delete playlist modal

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>

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,15 +41,11 @@ 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 () => {
+    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();
@@ -56,14 +53,16 @@ const PlaylistDetails = () => {
             }
           } catch (e) {
             console.log("Delete playlist error", e?.message);
-              setTooltip({ type: "error", text: e?.message || "Suppression impossible" });
+            setTooltip({
+              type: "error",
+              text: e?.message || "Suppression impossible",
+            });
           } finally {
             goBack();
           }
         },
       },
-      ],
-    );
+    });
   };
 
   return (