From 88cb5fcdfb9522aaf7ad00239812e51b1142e4db Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Tue, 2 Sep 2025 16:47:32 +0200
Subject: [PATCH] delete playlist modal

---
 src/components/modal/DeleteModal.js    | 21 +++++++--
 src/screens/Library/PlaylistDetails.js | 61 +++++++++++++-------------
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/components/modal/DeleteModal.js b/src/components/modal/DeleteModal.js
index 0b7e875..bfaf5cc 100644
--- a/src/components/modal/DeleteModal.js
+++ b/src/components/modal/DeleteModal.js
@@ -7,11 +7,24 @@ import GradientButton from "../GradientButton";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import AppActionSheet from "../AppActionSheet";
 
-const DeleteModal = () => {
+const DeleteModal = ({ payload }) => {
+  const {
+    title = "Supprimer ma playlist",
+    message = "Es-tu sur de vouloir supprimer ta playlist?",
+    onConfirm,
+  } = payload || {};
+
   const onClose = () => {
     SheetManager.hide("Delete");
   };
 
+  const handleConfirm = async () => {
+    if (onConfirm) {
+      await onConfirm();
+    }
+    onClose();
+  };
+
   return (
     <AppActionSheet id="Delete">
       <View style={{ gap: 20 }}>
@@ -24,7 +37,7 @@ const DeleteModal = () => {
               textAlign: "center",
             }}
           >
-            Supprimer ma playlist
+            {title}
           </Text>
           <Text
             style={{
@@ -34,11 +47,11 @@ const DeleteModal = () => {
               textAlign: "center",
             }}
           >
-            Es-tu sur de vouloir supprimer ta playlist?
+            {message}
           </Text>
         </View>
         <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
-          <BorderGradientButton title="Oui, supprimer" onPress={onClose} />
+          <BorderGradientButton title="Oui, supprimer" onPress={handleConfirm} />
           <GradientButton title="Non, annuler" onPress={onClose} />
         </View>
       </View>
diff --git a/src/screens/Library/PlaylistDetails.js b/src/screens/Library/PlaylistDetails.js
index 542d217..9a731b5 100644
--- a/src/screens/Library/PlaylistDetails.js
+++ b/src/screens/Library/PlaylistDetails.js
@@ -1,17 +1,18 @@
-import React, { useState } from "react";
-import { View, Pressable, Image, Alert } from "react-native";
-import { useGlobal } from "reactn";
-import Page from "../../layouts/Page";
-import { background, icons } from "../../assets";
-import { gutters } from "../../styles";
 import { useRoute } from "@react-navigation/native";
+import React, { useState } from "react";
+import { Image, Pressable, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
 import { useDataFromRef } from "react-native-minuit/src/hooks";
 import useDataFromArrayId from "react-native-minuit/src/hooks/useDataFromArrayId";
-import { playlistsRef, projectsRef } from "../../config/firebase";
-import MusicCard from "./components/MusicCard";
+import { useGlobal } from "reactn";
+import { background, icons } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
-import { navigate, goBack } from "../../navigation/NavigationService";
+import { playlistsRef, projectsRef } from "../../config/firebase";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { gutters } from "../../styles";
+import MusicCard from "./components/MusicCard";
 
 const PlaylistDetails = () => {
   const [, setTooltip] = useGlobal("_tooltip");
@@ -40,30 +41,28 @@ const PlaylistDetails = () => {
   const [selectedProjectId, setSelectedProjectId] = useState(null);
 
   const confirmDelete = () => {
-    Alert.alert(
-      "Supprimer la playlist",
-      "Es-tu sûr de vouloir supprimer cette playlist ?",
-      [
-        { text: "Annuler", style: "cancel" },
-        {
-          text: "Supprimer",
-          style: "destructive",
-          onPress: async () => {
-            try {
-              if (playlistId) {
-                await playlistsRef.doc(playlistId).delete();
-                setTooltip({ type: "success", text: "Playlist supprimée" });
-              }
-            } catch (e) {
-              console.log("Delete playlist error", e?.message);
-              setTooltip({ type: "error", text: e?.message || "Suppression impossible" });
-            } finally {
-              goBack();
+    SheetManager.show("Delete", {
+      payload: {
+        title: "Supprimer la playlist",
+        message: "Es-tu sûr de vouloir supprimer cette playlist ?",
+        onConfirm: async () => {
+          try {
+            if (playlistId) {
+              await playlistsRef.doc(playlistId).delete();
+              setTooltip({ type: "success", text: "Playlist supprimée" });
             }
-          },
+          } catch (e) {
+            console.log("Delete playlist error", e?.message);
+            setTooltip({
+              type: "error",
+              text: e?.message || "Suppression impossible",
+            });
+          } finally {
+            goBack();
+          }
         },
-      ],
-    );
+      },
+    });
   };
 
   return (