From 7593982d9cf997e607ebbd72cb9970a1010f4565 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Mon, 26 Aug 2024 22:11:15 +0300
Subject: [PATCH] feature(mobile): Add support for deleting lists

---
 apps/mobile/app/dashboard/lists/[slug].tsx | 60 ++++++++++++++++++++--
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index ccde00a8..10b9243d 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -1,10 +1,13 @@
-import { View } from "react-native";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { Alert, Platform, View } from "react-native";
+import * as Haptics from "expo-haptics";
+import { router, Stack, useLocalSearchParams } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
+import { MenuView } from "@react-native-menu/menu";
+import { Ellipsis } from "lucide-react-native";
 
 export default function ListView() {
   const { slug } = useLocalSearchParams();
@@ -28,7 +31,12 @@ export default function ListView() {
             query={{
               listId: list.id,
             }}
-            header={<PageTitle title={`${list.icon} ${list.name}`} />}
+            header={
+              <View className="flex flex-row items-center justify-between">
+                <PageTitle title={`${list.icon} ${list.name}`} />
+                <ListActionsMenu listId={list.id} />
+              </View>
+            }
           />
         </View>
       ) : (
@@ -37,3 +45,49 @@ export default function ListView() {
     </CustomSafeAreaView>
   );
 }
+
+function ListActionsMenu({ listId }: { listId: string }) {
+  const { mutate } = api.lists.delete.useMutation({
+    onSuccess: () => {
+      router.replace("/dashboard/lists");
+    },
+  });
+
+  const handleDelete = () => {
+    Alert.alert("Delete List", "Are you sure you want to delete this list?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        onPress: () => {
+          mutate({ listId });
+        },
+        style: "destructive",
+      },
+    ]);
+  };
+
+  return (
+    <MenuView
+      actions={[
+        {
+          id: "delete",
+          title: "Delete List",
+          attributes: {
+            destructive: true,
+          },
+          image: Platform.select({
+            ios: "trash",
+          }),
+        },
+      ]}
+      onPressAction={({ nativeEvent }) => {
+        if (nativeEvent.event === "delete") {
+          handleDelete();
+        }
+      }}
+      shouldOpenOnLongPress={false}
+    >
+      <Ellipsis onPress={() => Haptics.selectionAsync()} color="gray" />
+    </MenuView>
+  );
+}