Fix navigation stack on create new gallery flow

gallery-so · May 3, 2024 · a4763f8 · a4763f8
1 parent 7708d7b
commit a4763f8
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 9 deletions.
diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorRenderer.tsx
@@ -42,16 +42,61 @@ export function GalleryEditorRenderer({ queryRef }: Props) {
   const route = useRoute<RouteProp<RootStackNavigatorParamList, 'GalleryEditor'>>();
 
   useEffect(() => {
-    if (route.params.stagedTokens) {
+    if (route.params.isNewGallery) {
+      // reset the navigation stack to remove the nft selector screen
+      navigation.reset({
+        index: 0,
+        routes: [
+          {
+            name: 'MainTabs',
+            state: {
+              index: 0,
+              routes: [
+                {
+                  name: 'AccountTab',
+                  params: {
+                    screen: 'Profile',
+                    params: {
+                      username: 'fraser',
+                      navigateToTab: 'Galleries',
+                    },
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: 'GalleryEditor',
+            params: {
+              galleryId: route.params.galleryId,
+              stagedTokens: route.params.stagedTokens,
+              isNewGallery: false,
+            },
+          },
+        ],
+      });
+
+      return;
+    }
+
+    if (route.params.stagedTokens.length > 0) {
       toggleTokensStaged(route.params.stagedTokens);
 
       // remove the staged tokens from the route params
       // to prevent them from being used again
       navigation.setParams({
-        stagedTokens: null,
+        stagedTokens: [],
+        isNewGallery: false,
       });
     }
-  }, [navigation, route.params.stagedTokens, toggleTokensStaged]);
+  }, [
+    navigation,
+    route.params,
+    route.params.stagedTokens,
+    toggleTokensStaged,
+    route.params.galleryId,
+    route.params.isNewGallery,
+  ]);
 
   const items = useMemo((): ListItemType[] => {
     const items: ListItemType[] = [];

diff --git a/apps/mobile/src/components/ProfileView/Tabs/ProfileViewGalleriesTab.tsx b/apps/mobile/src/components/ProfileView/Tabs/ProfileViewGalleriesTab.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 import { Tabs } from 'react-native-collapsible-tab-view';
 import { useFragment } from 'react-relay';
-import { graphql,SelectorStoreUpdater } from 'relay-runtime';
+import { graphql, SelectorStoreUpdater } from 'relay-runtime';
 
 import { Button } from '~/components/Button';
 import { GalleryPreviewCard } from '~/components/ProfileView/GalleryPreviewCard';
@@ -67,7 +67,7 @@ export function ProfileViewGalleriesTab({ queryRef }: ProfileViewGalleriesTabPro
       await createGallery(
         latestPosition,
         (galleryId) => {
-          navigation.navigate('NftSelectorGalleryEditor', { galleryId });
+          navigation.navigate('NftSelectorGalleryEditor', { galleryId, isNewGallery: true });
         },
         updater
       );

diff --git a/apps/mobile/src/navigation/types.ts b/apps/mobile/src/navigation/types.ts
@@ -26,14 +26,17 @@ export type RootStackNavigatorParamList = {
   GalleryEditor: {
     galleryId: string;
     stagedTokens: string[];
+    isNewGallery?: boolean;
   };
   NftSelectorGalleryEditor: {
     galleryId: string;
+    isNewGallery?: boolean;
   };
   NftSelectorContractGalleryEditor: {
     galleryId: string;
     contractAddress: string;
     ownerFilter?: 'Collected' | 'Created';
+    isNewGallery?: boolean;
   };
   PublishGallery: {
     galleryId: string;

diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx
@@ -53,12 +53,13 @@ export function GalleryEditorNftSelector() {
           params: {
             galleryId: route.params.galleryId,
             stagedTokens: [tokenId],
+            isNewGallery: route.params.isNewGallery,
           },
           merge: true,
         });
       }
     },
-    [isMultiselectMode, navigation, route.params.galleryId]
+    [isMultiselectMode, navigation, route.params.galleryId, route.params.isNewGallery]
   );
 
   const handleSelectNftGroup = useCallback(
@@ -82,11 +83,12 @@ export function GalleryEditorNftSelector() {
           params: {
             galleryId: route.params.galleryId,
             contractAddress,
+            isNewGallery: route.params.isNewGallery,
           },
         });
       }
     },
-    [isMultiselectMode, navigation, route.params.galleryId]
+    [isMultiselectMode, navigation, route.params.galleryId, route.params.isNewGallery]
   );
 
   const handleAddSelectedTokens = useCallback(() => {

diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
@@ -83,12 +83,13 @@ export function GalleryEditorNftSelectorContractScreen() {
           params: {
             galleryId: route.params.galleryId,
             stagedTokens: [tokenId],
+            isNewGallery: route.params.isNewGallery,
           },
           merge: true,
         });
       }
     },
-    [navigation, isMultiselectMode, route.params.galleryId]
+    [navigation, isMultiselectMode, route.params.galleryId, route.params.isNewGallery]
   );
 
   const handleAddSelectedTokens = useCallback(() => {
@@ -99,10 +100,11 @@ export function GalleryEditorNftSelectorContractScreen() {
       params: {
         galleryId: route.params.galleryId,
         stagedTokens: formattedTokens,
+        isNewGallery: route.params.isNewGallery,
       },
       merge: true,
     });
-  }, [navigation, route.params.galleryId, selectedTokens]);
+  }, [navigation, route.params.galleryId, selectedTokens, route.params.isNewGallery]);
 
   const handleSelectedAllPress = useCallback(() => {
     setSelectedTokens((prevTokens) => {