From 482c97033be04cb7706255a6cf82d9d7f16815d7 Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Thu, 2 May 2024 11:36:42 +0800
Subject: [PATCH] Able to delete gallery

---
 .../Gallery/DeleteGalleryBottomSheet.tsx      | 73 +++++++++++++++
 .../ProfileView/GalleryPreviewCard.tsx        | 71 ++------------
 .../GalleryPreviewCardBottomSheet.tsx         | 92 +++++++++++++++++++
 .../DeleteGalleryConfirmation.tsx             |  2 +-
 .../shared/src/hooks}/useDeleteGallery.ts     |  2 +-
 5 files changed, 174 insertions(+), 66 deletions(-)
 create mode 100644 apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx
 create mode 100644 apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx
 rename {apps/web/src/components/MultiGallery => packages/shared/src/hooks}/useDeleteGallery.ts (93%)

diff --git a/apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx b/apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx
new file mode 100644
index 0000000000..3458435190
--- /dev/null
+++ b/apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx
@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+import useDeleteGallery from 'shared/hooks/useDeleteGallery';
+
+import { Button } from '~/components/Button';
+import { Typography } from '~/components/Typography';
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { DeleteGalleryBottomSheet$key } from '~/generated/DeleteGalleryBottomSheet.graphql';
+import { contexts } from '~/shared/analytics/constants';
+
+type Props = {
+  galleryRef: DeleteGalleryBottomSheet$key;
+};
+
+export default function DeleteGalleryBottomSheet({ galleryRef }: Props) {
+  const gallery = useFragment(
+    graphql`
+      fragment DeleteGalleryBottomSheet on Gallery {
+        dbid
+      }
+    `,
+    galleryRef
+  );
+  const deleteGallery = useDeleteGallery();
+  const { hideBottomSheetModal } = useBottomSheetModalActions();
+
+  const handleBack = useCallback(() => {
+    hideBottomSheetModal();
+  }, [hideBottomSheetModal]);
+
+  const handleDelete = useCallback(() => {
+    deleteGallery(gallery.dbid);
+    hideBottomSheetModal();
+  }, [deleteGallery, gallery, hideBottomSheetModal]);
+
+  return (
+    <View className="flex flex-col space-y-6">
+      <View className="flex flex-col space-y-4">
+        <Typography
+          className="text-lg text-black-900 dark:text-offWhite"
+          font={{ family: 'ABCDiatype', weight: 'Bold' }}
+        >
+          Delete gallery
+        </Typography>
+        <Typography
+          className="text-lg text-black-900 dark:text-offWhite"
+          font={{ family: 'ABCDiatype', weight: 'Regular' }}
+        >
+          Are you sure you want to delete this gallery?
+        </Typography>
+      </View>
+
+      <View className="space-y-2">
+        <Button
+          onPress={handleDelete}
+          text="DELETE"
+          eventElementId="Delete Gallery Button"
+          eventName="Delete Gallery"
+          eventContext={contexts.UserGallery}
+        />
+        <Button
+          onPress={handleBack}
+          variant="secondary"
+          text="CANCEL"
+          eventElementId="Cancel Delete Gallery Button"
+          eventName="Cancel Delete Gallery"
+          eventContext={contexts.UserGallery}
+        />
+      </View>
+    </View>
+  );
+}
diff --git a/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx b/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx
index 3b4eba7971..cae767819c 100644
--- a/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx
+++ b/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx
@@ -11,17 +11,15 @@ import { RawNftPreviewAsset } from '~/components/NftPreview/NftPreviewAsset';
 import { NftPreviewErrorFallback } from '~/components/NftPreview/NftPreviewErrorFallback';
 import { Typography } from '~/components/Typography';
 import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
-import { useToastActions } from '~/contexts/ToastContext';
 import { GalleryPreviewCardFragment$key } from '~/generated/GalleryPreviewCardFragment.graphql';
 import { GalleryPreviewCardQueryFragment$key } from '~/generated/GalleryPreviewCardQueryFragment.graphql';
-import { MainTabStackNavigatorProp, RootStackNavigatorProp } from '~/navigation/types';
+import { MainTabStackNavigatorProp } from '~/navigation/types';
 import { contexts } from '~/shared/analytics/constants';
 import { ReportingErrorBoundary } from '~/shared/errors/ReportingErrorBoundary';
 import unescape from '~/shared/utils/unescape';
 
-import { BottomSheetRow } from '../BottomSheetRow';
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
-import { useSafeAreaPadding } from '../SafeAreaViewWithPadding';
+import { GalleryPreviewCardBottomSheet } from './GalleryPreviewCardBottomSheet';
 
 type GalleryPreviewCardProps = {
   isFeatured: boolean;
@@ -41,6 +39,7 @@ export function GalleryPreviewCard({ galleryRef, isFeatured, queryRef }: Gallery
         tokenPreviews {
           medium
         }
+        ...GalleryPreviewCardBottomSheetFragment
       }
     `,
     galleryRef
@@ -69,10 +68,10 @@ export function GalleryPreviewCard({ galleryRef, isFeatured, queryRef }: Gallery
   const handleOptionPress = useCallback(() => {
     showBottomSheetModal({
       content: (
-        <GalleryPreviewCardBottomSheet galleryId={gallery.dbid} onClose={hideBottomSheetModal} />
+        <GalleryPreviewCardBottomSheet galleryRef={gallery} onClose={hideBottomSheetModal} />
       ),
     });
-  }, [gallery.dbid, hideBottomSheetModal, showBottomSheetModal]);
+  }, [gallery, hideBottomSheetModal, showBottomSheetModal]);
 
   return (
     <GalleryTouchableOpacity
@@ -118,6 +117,8 @@ export function GalleryPreviewCard({ galleryRef, isFeatured, queryRef }: Gallery
               eventElementId={null}
               eventName={null}
               eventContext={null}
+              className="rounded-full p-1"
+              activeOpacity={0.5}
             >
               <OptionIcon />
             </GalleryTouchableOpacity>
@@ -160,61 +161,3 @@ function TokenCell({
     </View>
   );
 }
-
-type GalleryPreviewCardBottomSheetProps = {
-  galleryId: string;
-  onClose: () => void;
-};
-
-function GalleryPreviewCardBottomSheet({ galleryId, onClose }: GalleryPreviewCardBottomSheetProps) {
-  const { bottom } = useSafeAreaPadding();
-  const { pushToast } = useToastActions();
-  const navigation = useNavigation<RootStackNavigatorProp>();
-
-  const handleInProgress = useCallback(() => {
-    pushToast({
-      message: 'Feature in progress',
-    });
-  }, [pushToast]);
-
-  const handleEditGallery = useCallback(() => {
-    navigation.navigate('GalleryEditor', {
-      galleryId,
-      stagedTokens: [],
-    });
-    onClose();
-  }, [galleryId, navigation, onClose]);
-
-  return (
-    <View style={{ paddingBottom: bottom }} className=" flex flex-col space-y-6">
-      <View className="flex flex-col space-y-2">
-        <BottomSheetRow
-          text="Edit Gallery"
-          onPress={handleEditGallery}
-          eventContext={contexts.UserGallery}
-        />
-        <BottomSheetRow
-          text="Feature on Profile"
-          onPress={handleInProgress}
-          eventContext={contexts.UserGallery}
-        />
-        <BottomSheetRow
-          text="Hide Gallery"
-          onPress={handleInProgress}
-          eventContext={contexts.UserGallery}
-        />
-        <BottomSheetRow
-          text="Share Gallery"
-          onPress={handleInProgress}
-          eventContext={contexts.UserGallery}
-        />
-        <BottomSheetRow
-          text="Delete Gallery"
-          onPress={handleInProgress}
-          isConfirmationRow
-          eventContext={contexts.UserGallery}
-        />
-      </View>
-    </View>
-  );
-}
diff --git a/apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx b/apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx
new file mode 100644
index 0000000000..4a643ea88e
--- /dev/null
+++ b/apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx
@@ -0,0 +1,92 @@
+import { useNavigation } from '@react-navigation/native';
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+import { contexts } from 'shared/analytics/constants';
+
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { useToastActions } from '~/contexts/ToastContext';
+import { GalleryPreviewCardBottomSheetFragment$key } from '~/generated/GalleryPreviewCardBottomSheetFragment.graphql';
+import { RootStackNavigatorProp } from '~/navigation/types';
+
+import { BottomSheetRow } from '../BottomSheetRow';
+import DeleteGalleryBottomSheet from '../Gallery/DeleteGalleryBottomSheet';
+import { useSafeAreaPadding } from '../SafeAreaViewWithPadding';
+
+type Props = {
+  galleryRef: GalleryPreviewCardBottomSheetFragment$key;
+  onClose: () => void;
+};
+
+export function GalleryPreviewCardBottomSheet({ galleryRef, onClose }: Props) {
+  const gallery = useFragment(
+    graphql`
+      fragment GalleryPreviewCardBottomSheetFragment on Gallery {
+        dbid
+        ...DeleteGalleryBottomSheet
+      }
+    `,
+    galleryRef
+  );
+
+  const galleryId = gallery.dbid;
+
+  const { bottom } = useSafeAreaPadding();
+  const { pushToast } = useToastActions();
+
+  const { showBottomSheetModal } = useBottomSheetModalActions();
+  const navigation = useNavigation<RootStackNavigatorProp>();
+
+  const handleInProgress = useCallback(() => {
+    pushToast({
+      message: 'Feature in progress',
+    });
+  }, [pushToast]);
+
+  const handleEditGallery = useCallback(() => {
+    navigation.navigate('GalleryEditor', {
+      galleryId,
+      stagedTokens: [],
+    });
+    onClose();
+  }, [galleryId, navigation, onClose]);
+
+  const handleDeleteGallery = useCallback(() => {
+    showBottomSheetModal({
+      content: <DeleteGalleryBottomSheet galleryRef={gallery} />,
+    });
+  }, [gallery, showBottomSheetModal]);
+
+  return (
+    <View style={{ paddingBottom: bottom }} className=" flex flex-col space-y-6">
+      <View className="flex flex-col space-y-2">
+        <BottomSheetRow
+          text="Edit Gallery"
+          onPress={handleEditGallery}
+          eventContext={contexts.UserGallery}
+        />
+        <BottomSheetRow
+          text="Feature on Profile"
+          onPress={handleInProgress}
+          eventContext={contexts.UserGallery}
+        />
+        <BottomSheetRow
+          text="Hide Gallery"
+          onPress={handleInProgress}
+          eventContext={contexts.UserGallery}
+        />
+        <BottomSheetRow
+          text="Share Gallery"
+          onPress={handleInProgress}
+          eventContext={contexts.UserGallery}
+        />
+        <BottomSheetRow
+          text="Delete Gallery"
+          onPress={handleDeleteGallery}
+          isConfirmationRow
+          eventContext={contexts.UserGallery}
+        />
+      </View>
+    </View>
+  );
+}
diff --git a/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx b/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx
index 2750dacb9d..a629f4bd23 100644
--- a/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx
+++ b/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx
@@ -8,7 +8,7 @@ import { contexts } from '~/shared/analytics/constants';
 import { Button } from '../core/Button/Button';
 import { HStack } from '../core/Spacer/Stack';
 import { BaseM } from '../core/Text/Text';
-import useDeleteGallery from './useDeleteGallery';
+import useDeleteGallery from '~/shared/hooks/useDeleteGallery';
 
 type Props = {
   galleryId: string;
diff --git a/apps/web/src/components/MultiGallery/useDeleteGallery.ts b/packages/shared/src/hooks/useDeleteGallery.ts
similarity index 93%
rename from apps/web/src/components/MultiGallery/useDeleteGallery.ts
rename to packages/shared/src/hooks/useDeleteGallery.ts
index 93ec51ae5e..f5a77329dc 100644
--- a/apps/web/src/components/MultiGallery/useDeleteGallery.ts
+++ b/packages/shared/src/hooks/useDeleteGallery.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { graphql } from 'relay-runtime';
 
 import { useDeleteGalleryMutation } from '~/generated/useDeleteGalleryMutation.graphql';
-import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
+import { usePromisifiedMutation } from '../relay/usePromisifiedMutation';
 
 export default function useDeleteGallery() {
   const [deleteGallery] = usePromisifiedMutation<useDeleteGalleryMutation>(graphql`