Gallery editor polish (#2444)

gallery-so · Apr 26, 2024 · 4efa9d6 · 4efa9d6
1 parent b3705d8
commit 4efa9d6
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 68 deletions.
diff --git 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 (
     <View className="p-4 flex flex-col gap-4">
-      <Typography
-        font={{
-          family: 'GTAlpina',
-          weight: 'Light',
-        }}
-        className="text-[32px] leading-[36px] text-black-900 dark:text-white"
+      <TextInput
+        className="text-[32px] leading-[36px] text-metal dark:text-white"
+        onChangeText={setGalleryName}
+        placeholder="My Gallery"
+      >
+        <Typography
+          font={{
+            family: 'GTAlpina',
+            weight: 'Light',
+          }}
+          className="text-[32px] leading-[36px]text-black-900 dark:text-white"
+        >
+          {galleryName}
+        </Typography>
+      </TextInput>
+      <TextInput
+        onChangeText={setGalleryDescription}
+        placeholder="Add an optional description...."
+        className="text-metal"
+        multiline
       >
-        {gallery.name ?? 'My Gallery'}
-      </Typography>
-      <BaseM classNameOverride="text-metal">
-        {gallery.description || 'Add an optional description....'}
-      </BaseM>
+        <BaseM classNameOverride="text-metal leading-1">{galleryDescription}</BaseM>
+      </TextInput>
     </View>
   );
 }
diff --git 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<FlashList<ListItemType>>();
 
   const renderItem = useCallback<ListRenderItem<ListItemType>>(
-    ({ item }) => {
+    ({ item, index }) => {
+      const isLastItem = index === items.length - 1;
+
       if (item.kind === 'header') {
-        return <GalleryEditorHeader galleryRef={item.galleryRef} />;
-      } else if (item.kind === 'navigation') {
-        return <GalleryEditorNavbar />;
+        return <GalleryEditorHeader />;
       } else if (item.kind === 'section') {
         return (
-          <GalleryEditorSection
-            section={item.section}
-            queryRef={item.queryRef}
-            scrollContentOffsetY={scrollContentOffsetY}
-            scrollViewRef={ref}
-          />
+          <View className={isLastItem ? 'pb-32' : ''}>
+            <GalleryEditorSection
+              section={item.section}
+              queryRef={item.queryRef}
+              scrollContentOffsetY={scrollContentOffsetY}
+              scrollViewRef={ref}
+            />
+          </View>
         );
       } else {
         return null;
       }
     },
-    [ref, scrollContentOffsetY]
+    [items.length, ref, scrollContentOffsetY]
   );
 
   const handleScroll = useCallback(
@@ -126,6 +111,7 @@ export function GalleryEditorRenderer({ galleryRef, queryRef }: Props) {
         paddingTop: top,
       }}
     >
+      <GalleryEditorNavbar />
       <FlashList
         ref={ref}
         data={items}

diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorSection.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorSection.tsx
@@ -78,10 +78,12 @@ export function GalleryEditorSection({
             </View>
           </View>
         )}
-        <BaseM classNameOverride="text-base" weight="Bold">
-          {section.name}
-        </BaseM>
-        <ProcessedText text={section.collectorsNote || ''} />
+        <View className="space-y-1">
+          <BaseM classNameOverride="text-base" weight="Bold">
+            {section.name}
+          </BaseM>
+          <ProcessedText text={section.collectorsNote || ''} />
+        </View>
         <SortableRowList
           rows={section.rows}
           sectionId={section.dbid}

diff --git a/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx b/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx
@@ -1,6 +1,6 @@
 import { FlashList } from '@shopify/flash-list';
 import { useEffect, useMemo } from 'react';
-import { useWindowDimensions, View } from 'react-native';
+import { useWindowDimensions, View, ViewProps } from 'react-native';
 import { AnimatedRef, SharedValue, useSharedValue } from 'react-native-reanimated';
 import { graphql, useFragment } from 'react-relay';
 
@@ -22,6 +22,8 @@ type Props = {
 
   scrollContentOffsetY: SharedValue<number>;
   scrollViewRef: AnimatedRef<FlashList<ListItemType>>;
+
+  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 (
-    <View className="relative" style={style}>
+    <View className="relative" style={[rStyle, style]}>
       {rows.map((row, index) => {
         return (
           <SortableRow

diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorScreen.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorScreen.tsx
@@ -22,7 +22,6 @@ function InnerGalleryEditorScreen() {
         }
         galleryById(id: $galleryId) {
           __typename
-          ...GalleryEditorRendererFragment
         }
         ...GalleryEditorContextFragment
         ...GalleryEditorRendererQueryFragment
@@ -39,7 +38,7 @@ function InnerGalleryEditorScreen() {
 
   return (
     <GalleryEditorProvider queryRef={query}>
-      <GalleryEditorRenderer galleryRef={gallery} queryRef={query} />
+      <GalleryEditorRenderer queryRef={query} />
       <GalleryEditorActions />
     </GalleryEditorProvider>
   );