Merge branch 'main' of https://github.com/gallery-so/gallery into jak…

…z/gallery-editor-token-draggable
gallery-so · Apr 27, 2024 · b782555 · b782555
2 parents 910db8c + 0b6d352
commit b782555
Show file tree

Hide file tree

Showing 46 changed files with 925 additions and 412 deletions.
diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts
@@ -50,7 +50,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   orientation: 'portrait',
   icon: './assets/icon.png',
   userInterfaceStyle: 'automatic',
-  version: '1.0.60',
+  version: '1.0.61',
   updates: {
     fallbackToCacheTimeout: 0,
   },

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -24,7 +24,7 @@
     "date-fns": "^2.29.3",
     "dotenv": "^16.0.3",
     "ethers": "6.11.1",
-    "expo": "^50.0.0",
+    "expo": "^50.0.17",
     "expo-application": "~5.8.3",
     "expo-asset": "~9.0.2",
     "expo-av": "~13.10.5",

diff --git a/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx b/apps/mobile/src/components/Feed/Posts/FeedSuggestedProfileRow.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { View } from 'react-native';
+import { Dimensions, FlatList, View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 import { removeNullValues } from 'shared/relay/removeNullValues';
 
@@ -8,8 +8,8 @@ import { FeedSuggestedProfileRowFragment$key } from '~/generated/FeedSuggestedPr
 
 import { Typography } from '../../Typography';
 
-const CARD_HEIGHT = 180;
-const CARD_WIDTH = 180;
+const CARD_HEIGHT = 183;
+const CARD_ROW_HORIZONTAL_PADDING = 42;
 
 type FeedSuggestedProfileRowProps = {
   queryRef: FeedSuggestedProfileRowFragment$key;
@@ -21,7 +21,7 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro
       fragment FeedSuggestedProfileRowFragment on Query {
         viewer @required(action: THROW) {
           ... on Viewer {
-            suggestedUsers(first: 4) @required(action: THROW) {
+            suggestedUsers(first: 24) @required(action: THROW) {
               __typename
               edges {
                 node {
@@ -60,11 +60,14 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro
           (gallery) => removeNullValues(gallery?.tokenPreviews).length > 0
         );
       });
-      return usersWithTokenPreviews?.slice(0, 2);
+      return usersWithTokenPreviews;
     }
     return users;
   }, [query.viewer?.suggestedUsers]);
 
+  const { width: SCREEN_WIDTH } = Dimensions.get('window');
+  const cardWidth = (SCREEN_WIDTH - CARD_ROW_HORIZONTAL_PADDING) / 2;
+
   return (
     <View className="pl-4 mt-2 mb-12 space-y-3">
       <Typography
@@ -73,15 +76,17 @@ export function FeedSuggestedProfileRow({ queryRef }: FeedSuggestedProfileRowPro
       >
         Suggested creators and collectors
       </Typography>
-      <View className="space-x-1 flex flex-row">
-        {suggestedUsers?.map((user, idx) => {
-          return (
-            <View className="mb-1" style={{ width: CARD_WIDTH, height: CARD_HEIGHT }} key={idx}>
-              <TrendingUserCard userRef={user} queryRef={query} />
-            </View>
-          );
-        })}
-      </View>
+      <FlatList
+        data={suggestedUsers}
+        horizontal={true}
+        renderItem={({ item, index }) => (
+          <View style={{ width: cardWidth, height: CARD_HEIGHT, marginLeft: index === 0 ? 0 : 4 }}>
+            <TrendingUserCard userRef={item} queryRef={query} variant="detailed" />
+          </View>
+        )}
+        keyExtractor={(_, index) => index.toString()}
+        showsHorizontalScrollIndicator={false}
+      />
     </View>
   );
 }
diff --git a/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts b/apps/mobile/src/components/Feed/createVirtualizedFeedEventItems.ts
@@ -22,7 +22,7 @@ import { removeNullValues } from '~/shared/relay/removeNullValues';
 export type FeedItemTypes = 'Post' | 'FeedEvent';
 type itemType = FeedItemTypes | null;
 
-const SUGGESTED_PROFILE_ROW_IDX = 5;
+const SUGGESTED_PROFILE_ROW_IDX = 8;
 
 export type FeedListItemType = { key: string } & (
   | {

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
@@ -70,10 +70,12 @@ export function GalleryEditorSection({
           'border-activeBlue': highlightedSection,
         })}
       >
-        <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