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

…z/gallery-editor-token-draggable
gallery-so · Apr 25, 2024 · e23bb7d · e23bb7d
2 parents 4804304 + fd412df
commit e23bb7d
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 48 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.59',
+  version: '1.0.60',
   updates: {
     fallbackToCacheTimeout: 0,
   },

diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx
@@ -0,0 +1,138 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { FlashList, ListRenderItem } from '@shopify/flash-list';
+import { useCallback, useEffect, useMemo } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';
+import { useAnimatedRef, useSharedValue } from 'react-native-reanimated';
+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';
+
+import { useSafeAreaPadding } from '../SafeAreaViewWithPadding';
+import { GalleryEditorHeader } from './GalleryEditorHeader';
+import { GalleryEditorNavbar } from './GalleryEditorNavbar';
+import { GalleryEditorSection } from './GalleryEditorSection';
+
+export type ListItemType =
+  | { kind: 'navigation'; title: string }
+  | { kind: 'header'; galleryRef: GalleryEditorHeaderFragment$key }
+  | { 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
+  );
+
+  const query = useFragment(
+    graphql`
+      fragment GalleryEditorRendererQueryFragment on Query {
+        ...GalleryEditorSectionFragment
+      }
+    `,
+    queryRef
+  );
+
+  const { sections, toggleTokensStaged } = useGalleryEditorActions();
+  const { top } = useSafeAreaPadding();
+
+  const navigation = useNavigation<RootStackNavigatorProp>();
+  const route = useRoute<RouteProp<RootStackNavigatorParamList, 'GalleryEditor'>>();
+
+  useEffect(() => {
+    if (route.params.stagedTokens) {
+      toggleTokensStaged(route.params.stagedTokens);
+
+      // remove the staged tokens from the route params
+      // to prevent them from being used again
+      navigation.setParams({
+        stagedTokens: null,
+      });
+    }
+  }, [navigation, route.params.stagedTokens, toggleTokensStaged]);
+
+  const items = useMemo((): ListItemType[] => {
+    const items: ListItemType[] = [];
+    items.push({
+      kind: 'navigation',
+      title: 'Navigation',
+    });
+    items.push({
+      kind: 'header',
+      galleryRef: gallery,
+    });
+
+    sections.forEach((section) => {
+      items.push({
+        kind: 'section',
+        section,
+        queryRef: query,
+      });
+    });
+
+    return items;
+  }, [gallery, sections, query]);
+
+  const scrollContentOffsetY = useSharedValue(0);
+  const ref = useAnimatedRef<FlashList<ListItemType>>();
+
+  const renderItem = useCallback<ListRenderItem<ListItemType>>(
+    ({ item }) => {
+      if (item.kind === 'header') {
+        return <GalleryEditorHeader galleryRef={item.galleryRef} />;
+      } else if (item.kind === 'navigation') {
+        return <GalleryEditorNavbar />;
+      } else if (item.kind === 'section') {
+        return (
+          <GalleryEditorSection
+            section={item.section}
+            queryRef={item.queryRef}
+            scrollContentOffsetY={scrollContentOffsetY}
+            scrollViewRef={ref}
+          />
+        );
+      } else {
+        return null;
+      }
+    },
+    [ref, scrollContentOffsetY]
+  );
+
+  const handleScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      scrollContentOffsetY.value = e.nativeEvent.contentOffset.y;
+    },
+    [scrollContentOffsetY]
+  );
+
+  return (
+    <View
+      className="flex flex-col flex-1 bg-white dark:bg-black-900"
+      style={{
+        paddingTop: top,
+      }}
+    >
+      <FlashList
+        ref={ref}
+        data={items}
+        renderItem={renderItem}
+        estimatedItemSize={93}
+        onScroll={handleScroll}
+      />
+    </View>
+  );
+}
diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
-import { GestureResponderEvent, useWindowDimensions, View, ViewProps } from 'react-native';
+import { GestureResponderEvent, View, ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { graphql, useFragment } from 'react-relay';
 
@@ -11,7 +11,7 @@ import { GalleryEditorRowFragment$key } from '~/generated/GalleryEditorRowFragme
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
 import { GalleryEditorActiveActions } from './GalleryEditorActiveActions';
 import { GalleryEditorTokenPreview } from './GalleryEditorTokenPreview';
-import { horizontalRowPadding, inBetweenColumnPadding } from './utils';
+import { useWidthPerToken } from './useWidthPerToken';
 
 type Props = {
   sectionId: string;
@@ -32,13 +32,7 @@ export function GalleryEditorRow({ sectionId, row, style, queryRef }: Props) {
 
   const { activateRow, activeRowId } = useGalleryEditorActions();
 
-  const screenDimensions = useWindowDimensions();
-
-  const column = row.columns;
-  const totalSpaceForTokens =
-    screenDimensions.width - horizontalRowPadding * 2 - inBetweenColumnPadding * (column - 1);
-
-  const widthPerToken = totalSpaceForTokens / column;
+  const widthPerToken = useWidthPerToken(row.columns);
 
   const handleSectionPress = useCallback(
     (e: GestureResponderEvent) => {

diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorSection.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorSection.tsx
@@ -13,7 +13,7 @@ import { GalleryEditorSectionFragment$key } from '~/generated/GalleryEditorSecti
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
 import ProcessedText from '../ProcessedText/ProcessedText';
 import { BaseM } from '../Text';
-import { ListItemType } from './GalleryEditorRender';
+import { ListItemType } from './GalleryEditorRenderer';
 import { SortableRowList } from './SortableRowList';
 
 type Props = {

diff --git a/apps/mobile/src/components/GalleryEditor/SortableRow.tsx b/apps/mobile/src/components/GalleryEditor/SortableRow.tsx
@@ -1,5 +1,5 @@
 import { FlashList } from '@shopify/flash-list';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { trigger } from 'react-native-haptic-feedback';
@@ -17,7 +17,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { ListItemType } from './GalleryEditorRender';
+import { ListItemType } from './GalleryEditorRenderer';
 import { ItemHeights, Positions } from './SortableRowList';
 
 type Props = {
@@ -256,18 +256,18 @@ export function SortableRow({
     };
   }, []);
 
+  const animatedViewStyle = useMemo(() => {
+    return [
+      rStyle,
+      {
+        height: itemHeight,
+      },
+    ];
+  }, [itemHeight, rStyle]);
+
   return (
     <GestureDetector gesture={panGesture}>
-      <Animated.View
-        style={[
-          rStyle,
-          {
-            height: itemHeight,
-          },
-        ]}
-      >
-        {children}
-      </Animated.View>
+      <Animated.View style={animatedViewStyle}>{children}</Animated.View>
     </GestureDetector>
   );
 }
diff --git a/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx b/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx
@@ -7,7 +7,7 @@ import { graphql, useFragment } from 'react-relay';
 import { StagedRowList } from '~/contexts/GalleryEditor/types';
 import { SortableRowListFragment$key } from '~/generated/SortableRowListFragment.graphql';
 
-import { ListItemType } from './GalleryEditorRender';
+import { ListItemType } from './GalleryEditorRenderer';
 import { GalleryEditorRow } from './GalleryEditorRow';
 import { SortableRow } from './SortableRow';
 import { calculateItemHeights, calculateOffsetsRow, calculatePositions } from './utils';
@@ -72,18 +72,17 @@ export function SortableRowList({
     return rowOffsets.reduce((totalHeight, row) => totalHeight + row.height, 0);
   }, [rowOffsets]);
 
+  const style = useMemo(() => {
+    return {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: containerHeight,
+    };
+  }, [containerHeight]);
+
   return (
-    <View
-      className="relative"
-      style={[
-        {
-          height: containerHeight,
-          top: 0,
-          left: 0,
-          right: 0,
-        },
-      ]}
-    >
+    <View className="relative" style={style}>
       {rows.map((row, index) => {
         return (
           <SortableRow

diff --git a/apps/mobile/src/components/GalleryEditor/useWidthPerToken.ts b/apps/mobile/src/components/GalleryEditor/useWidthPerToken.ts
@@ -0,0 +1,12 @@
+import { useWindowDimensions } from 'react-native';
+
+import { horizontalRowPadding, inBetweenColumnPadding } from './utils';
+
+export function useWidthPerToken(columns: number) {
+  const screenDimensions = useWindowDimensions();
+
+  const totalSpaceForTokens =
+    screenDimensions.width - horizontalRowPadding * 2 - inBetweenColumnPadding * (columns - 1);
+
+  return totalSpaceForTokens / columns;
+}
diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx
@@ -1,6 +1,7 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
-import { Suspense, useCallback } from 'react';
+import { Suspense, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
+import { noop } from 'shared/utils/noop';
 
 import { NftSelectorHeader } from '~/components/NftSelector/NftSelectorHeader';
 import { NftSelectorToolbar } from '~/components/NftSelector/NftSelectorToolbar';
@@ -42,6 +43,16 @@ export function GalleryEditorNftSelector() {
     [navigation, route.params.galleryId]
   );
 
+  const searchCriteria = useMemo(
+    () => ({
+      searchQuery,
+      ownerFilter: ownershipTypeFilter,
+      networkFilter: networkFilter,
+      sortView,
+    }),
+    [searchQuery, ownershipTypeFilter, networkFilter, sortView]
+  );
+
   return (
     <NftSelectorWrapper ownershipTypeFilter={ownershipTypeFilter} isFullscreen>
       <View className="gap-8">
@@ -63,15 +74,10 @@ export function GalleryEditorNftSelector() {
       <View className="flex-grow flex-1 w-full">
         <Suspense fallback={<NftSelectorLoadingSkeleton />}>
           <NftSelectorPickerGrid
-            searchCriteria={{
-              searchQuery,
-              ownerFilter: ownershipTypeFilter,
-              networkFilter: networkFilter,
-              sortView,
-            }}
+            searchCriteria={searchCriteria}
             onRefresh={sync}
             onSelect={handleSelectNft}
-            onSelectNftGroup={() => {}}
+            onSelectNftGroup={noop}
           />
         </Suspense>
       </View>

diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorScreen.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorScreen.tsx
@@ -4,7 +4,7 @@ import { Text } from 'react-native';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 
 import { GalleryEditorActions } from '~/components/GalleryEditor/GalleryEditorActions';
-import { GalleryEditorRender } from '~/components/GalleryEditor/GalleryEditorRender';
+import { GalleryEditorRenderer } from '~/components/GalleryEditor/GalleryEditorRenderer';
 import GalleryEditorProvider from '~/contexts/GalleryEditor/GalleryEditorContext';
 import { GalleryEditorScreenQuery } from '~/generated/GalleryEditorScreenQuery.graphql';
 import { RootStackNavigatorParamList } from '~/navigation/types';
@@ -22,10 +22,10 @@ function InnerGalleryEditorScreen() {
         }
         galleryById(id: $galleryId) {
           __typename
-          ...GalleryEditorRenderFragment
+          ...GalleryEditorRendererFragment
         }
         ...GalleryEditorContextFragment
-        ...GalleryEditorRenderQueryFragment
+        ...GalleryEditorRendererQueryFragment
       }
     `,
     { galleryId: route.params.galleryId }
@@ -39,7 +39,7 @@ function InnerGalleryEditorScreen() {
 
   return (
     <GalleryEditorProvider queryRef={query}>
-      <GalleryEditorRender galleryRef={gallery} queryRef={query} />
+      <GalleryEditorRenderer galleryRef={gallery} queryRef={query} />
       <GalleryEditorActions />
     </GalleryEditorProvider>
   );

diff --git a/apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx b/apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx
@@ -281,7 +281,7 @@ function InnerOnboardingUsernameScreen() {
 
           <View />
         </View>
-        <OnboardingProgressBar from={20} to={40} />
+        <OnboardingProgressBar from={30} to={40} />
       </View>
       <View
         className="flex-1  justify-center space-y-12 px-8"