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 (
-
+
);