delete playlist web

src/screens/Library/AllMyPlaylist.web.js

@@ -2,6 +2,7 @@ import { BlurView } from "expo-blur";
 import React, { useState } from "react";
 import { Image, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
 import { playlistsRef, projectsRef } from "../../config/firebase";
@@ -9,6 +10,7 @@ import useDataFromArrayDocId from "../../hooks/useDataFromArrayId";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import Page from "../../layouts/Page";
+import { goBack } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
@@ -17,6 +19,7 @@ import MusicCard from "./components/MusicCard";
 
 const AllMyPlaylist = ({ route }) => {
   const { playListId } = route?.params || {};
+  const [, setTooltip] = useGlobal("_tooltip");
   const { userPlaylists = [] } = useUser();
   const [selectedPlaylistId, setSelectedPlaylistId] = useState(
     playListId || null
@@ -40,7 +43,33 @@ const AllMyPlaylist = ({ route }) => {
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
   const navigateToMusicDetails = useNavigateToMusicDetails();
-  console.log("musics are : ", musics);
+
+  // delete playlist
+  const confirmDelete = () => {
+    SheetManager.show("Delete", {
+      payload: {
+        title: "Supprimer la playlist",
+        message: "Es-tu sûr de vouloir supprimer cette playlist ?",
+        onConfirm: async () => {
+          try {
+            if (selectedPlaylistId) {
+              await playlistsRef.doc(selectedPlaylistId).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 (
     <Page
       headerType="NAVIGATION"
@@ -50,6 +79,15 @@ const AllMyPlaylist = ({ route }) => {
       contentContainerStyle={{
         paddingBottom: gutters * 2,
       }}
+      rightComponent={() => (
+        <>
+          {selectedPlaylistId != null && (
+            <Pressable onPress={confirmDelete}>
+              <Image source={icons.trash} style={{ width: 24, height: 24 }} />
+            </Pressable>
+          )}
+        </>
+      )}
     >
       <View style={{ flexDirection: "row", gap: 20 }}>
         <View
@@ -180,7 +218,7 @@ const AllMyPlaylist = ({ route }) => {
                   setMenuPosition(posTop);
                   setShowMenu(
                     (prev) =>
-                      !prev || posTop?.top !== (menuPosition?.top ?? null),
+                      !prev || posTop?.top !== (menuPosition?.top ?? null)
                   );
                 }}
               />