diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorHeader.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorHeader.tsx index c1a4d4e8b..b5a2bea82 100644 --- a/apps/mobile/src/components/GalleryEditor/GalleryEditorHeader.tsx +++ b/apps/mobile/src/components/GalleryEditor/GalleryEditorHeader.tsx @@ -1,40 +1,39 @@ -import { View } from 'react-native'; -import { graphql, useFragment } from 'react-relay'; +import { TextInput, View } from 'react-native'; -import { GalleryEditorHeaderFragment$key } from '~/generated/GalleryEditorHeaderFragment.graphql'; +import { useGalleryEditorActions } from '~/contexts/GalleryEditor/GalleryEditorContext'; import { BaseM } from '../Text'; import { Typography } from '../Typography'; -type Props = { - galleryRef: GalleryEditorHeaderFragment$key; -}; - -export function GalleryEditorHeader({ galleryRef }: Props) { - const gallery = useFragment( - graphql` - fragment GalleryEditorHeaderFragment on Gallery { - name - description - } - `, - galleryRef - ); +export function GalleryEditorHeader() { + const { galleryName, setGalleryName, galleryDescription, setGalleryDescription } = + useGalleryEditorActions(); return ( - + + {galleryName} + + + - {gallery.name ?? 'My Gallery'} - - - {gallery.description || 'Add an optional description....'} - + {galleryDescription} + ); } diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx index 5e7250ba4..566d514bf 100644 --- a/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx +++ b/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx @@ -7,8 +7,6 @@ import { graphql, useFragment } from 'react-relay'; import { useGalleryEditorActions } from '~/contexts/GalleryEditor/GalleryEditorContext'; import { StagedSection } from '~/contexts/GalleryEditor/types'; -import { GalleryEditorHeaderFragment$key } from '~/generated/GalleryEditorHeaderFragment.graphql'; -import { GalleryEditorRendererFragment$key } from '~/generated/GalleryEditorRendererFragment.graphql'; import { GalleryEditorRendererQueryFragment$key } from '~/generated/GalleryEditorRendererQueryFragment.graphql'; import { GalleryEditorSectionFragment$key } from '~/generated/GalleryEditorSectionFragment.graphql'; import { RootStackNavigatorParamList, RootStackNavigatorProp } from '~/navigation/types'; @@ -20,24 +18,14 @@ import { GalleryEditorSection } from './GalleryEditorSection'; export type ListItemType = | { kind: 'navigation'; title: string } - | { kind: 'header'; galleryRef: GalleryEditorHeaderFragment$key } + | { kind: 'header' } | { kind: 'section'; section: StagedSection; queryRef: GalleryEditorSectionFragment$key }; type Props = { - galleryRef: GalleryEditorRendererFragment$key; queryRef: GalleryEditorRendererQueryFragment$key; }; -export function GalleryEditorRenderer({ galleryRef, queryRef }: Props) { - const gallery = useFragment( - graphql` - fragment GalleryEditorRendererFragment on Gallery { - ...GalleryEditorHeaderFragment - } - `, - galleryRef - ); - +export function GalleryEditorRenderer({ queryRef }: Props) { const query = useFragment( graphql` fragment GalleryEditorRendererQueryFragment on Query { @@ -67,13 +55,8 @@ export function GalleryEditorRenderer({ galleryRef, queryRef }: Props) { const items = useMemo((): ListItemType[] => { const items: ListItemType[] = []; - items.push({ - kind: 'navigation', - title: 'Navigation', - }); items.push({ kind: 'header', - galleryRef: gallery, }); sections.forEach((section) => { @@ -85,31 +68,33 @@ export function GalleryEditorRenderer({ galleryRef, queryRef }: Props) { }); return items; - }, [gallery, sections, query]); + }, [sections, query]); const scrollContentOffsetY = useSharedValue(0); const ref = useAnimatedRef>(); const renderItem = useCallback>( - ({ item }) => { + ({ item, index }) => { + const isLastItem = index === items.length - 1; + if (item.kind === 'header') { - return ; - } else if (item.kind === 'navigation') { - return ; + return ; } else if (item.kind === 'section') { return ( - + + + ); } else { return null; } }, - [ref, scrollContentOffsetY] + [items.length, ref, scrollContentOffsetY] ); const handleScroll = useCallback( @@ -126,6 +111,7 @@ export function GalleryEditorRenderer({ galleryRef, queryRef }: Props) { paddingTop: top, }} > + )} - - {section.name} - - + + + {section.name} + + + ; scrollViewRef: AnimatedRef>; + + style?: ViewProps['style']; }; type Index = number; @@ -38,6 +40,7 @@ export function SortableRowList({ onDragEnd, scrollContentOffsetY, scrollViewRef, + style, }: Props) { const query = useFragment( graphql` @@ -72,7 +75,7 @@ export function SortableRowList({ return rowOffsets.reduce((totalHeight, row) => totalHeight + row.height, 0); }, [rowOffsets]); - const style = useMemo(() => { + const rStyle = useMemo(() => { return { top: 0, left: 0, @@ -82,7 +85,7 @@ export function SortableRowList({ }, [containerHeight]); return ( - + {rows.map((row, index) => { return ( - + );