From 490eef9b431e0265412469656d1bc60d195949fe Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 19 Jul 2025 19:04:39 +0200
Subject: [PATCH] Add tablo deletion feature

---
 xtablo-expo/app/(home)/(tabs)/planning.tsx |  1 -
 xtablo-expo/app/(home)/(tabs)/tablos.tsx   | 37 +++++++++++++++++++---
 xtablo-expo/hooks/tablos.ts                | 27 ++++++++++++++++
 3 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/xtablo-expo/app/(home)/(tabs)/planning.tsx b/xtablo-expo/app/(home)/(tabs)/planning.tsx
index b84d52a..25db5d9 100644
--- a/xtablo-expo/app/(home)/(tabs)/planning.tsx
+++ b/xtablo-expo/app/(home)/(tabs)/planning.tsx
@@ -166,7 +166,6 @@ export default function PlanningScreen() {
       Alert.alert("Erreur", "Veuillez sélectionner un tablo");
       return;
     }
-    console.log({ newEvent });
     createEvent({
       ...newEvent,
       start_date: newEvent.start_date,
diff --git a/xtablo-expo/app/(home)/(tabs)/tablos.tsx b/xtablo-expo/app/(home)/(tabs)/tablos.tsx
index dd58976..8234b4b 100644
--- a/xtablo-expo/app/(home)/(tabs)/tablos.tsx
+++ b/xtablo-expo/app/(home)/(tabs)/tablos.tsx
@@ -16,7 +16,7 @@ import {
   Platform,
 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
-import { useCreateTablo, useTablosList } from "@/hooks/tablos";
+import { useCreateTablo, useTablosList, useDeleteTablo } from "@/hooks/tablos";
 import { UserTablo } from "@/types/tablos.types";
 import {
   Plus,
@@ -30,7 +30,6 @@ import {
 } from "lucide-react-native";
 import { router } from "expo-router";
 import { AVAILABLE_COLORS, ColorMap } from "@/constants/colors";
-import { useAuth } from "@/stores/auth";
 
 const { width } = Dimensions.get("window");
 const numColumns = 2;
@@ -46,6 +45,7 @@ export default function TablosScreen() {
   const [refreshing, setRefreshing] = useState(false);
   const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
   const { mutate: createTablo } = useCreateTablo();
+  const { mutate: deleteTablo } = useDeleteTablo();
 
   const [newTablo, setNewTablo] = useState<{
     name: string;
@@ -156,6 +156,33 @@ export default function TablosScreen() {
     });
   };
 
+  const handleDeleteTablo = (tablo: UserTablo) => {
+    // Only allow admin users to delete tablos
+    if (!tablo.is_admin) {
+      Alert.alert(
+        "Non autorisé",
+        "Seuls les administrateurs peuvent supprimer ce tablo."
+      );
+      return;
+    }
+
+    Alert.alert(
+      "Supprimer le tablo",
+      `Êtes-vous sûr de vouloir supprimer "${tablo.name}" ? Cette action est irréversible.`,
+      [
+        {
+          text: "Annuler",
+          style: "cancel",
+        },
+        {
+          text: "Supprimer",
+          style: "destructive",
+          onPress: () => deleteTablo(tablo.id),
+        },
+      ]
+    );
+  };
+
   const renderTabloCard = ({ item: tablo }: { item: UserTablo }) => {
     const initials = tablo.name?.charAt(0)?.toUpperCase() || "T";
 
@@ -166,6 +193,7 @@ export default function TablosScreen() {
           { width: viewMode === "grid" ? itemWidth : "100%" },
         ]}
         onPress={() => navigateToTablo(tablo)}
+        onLongPress={() => handleDeleteTablo(tablo)}
         activeOpacity={0.8}
       >
         {/* Tablo Image/Color Header */}
@@ -249,6 +277,7 @@ export default function TablosScreen() {
       <TouchableOpacity
         style={styles.listItem}
         onPress={() => navigateToTablo(tablo)}
+        onLongPress={() => handleDeleteTablo(tablo)}
         activeOpacity={0.8}
       >
         <View
@@ -663,8 +692,8 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#f8fafc",
     marginTop: -10,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
     paddingTop: 10,
   },
   listContent: {
diff --git a/xtablo-expo/hooks/tablos.ts b/xtablo-expo/hooks/tablos.ts
index b12e8fc..d3ee201 100644
--- a/xtablo-expo/hooks/tablos.ts
+++ b/xtablo-expo/hooks/tablos.ts
@@ -50,3 +50,30 @@ export const useCreateTablo = () => {
     },
   });
 };
+
+// Delete tablo (soft delete)
+export const useDeleteTablo = () => {
+  const session = useAuth((state) => state.session);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await api.delete("/api/v1/tablos/delete", {
+        data: { id },
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tablos"] });
+    },
+    onError: (error) => {
+      console.error(error);
+      Alert.alert(
+        "Erreur",
+        "Impossible de supprimer le tablo. Veuillez réessayer."
+      );
+    },
+  });
+};