web playlist modal

src/components/modal/PlaylistModal.js

@@ -9,10 +9,10 @@ import {
   View,
 } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit";
 import SwiperFlatList from "react-native-swiper-flatlist";
 import { icons } from "../../assets";
 import { arrayUnion, playlistsRef } from "../../config/firebase";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit";
 import { useUserData } from "../../providers/UserDataProvider";
 import { createPlaylist } from "../../screens/Library/Playlists/playlist";
 import { Palette } from "../../styles";
@@ -33,12 +33,22 @@ const PlaylistModal = (props) => {
   const startAtCreate = props?.payload?.startAtCreate || false;
   const { setTooltip } = useMinuit();
 
+  const sanitizedPlaylists = useMemo(
+    () => (Array.isArray(userPlaylists) ? userPlaylists : []),
+    [userPlaylists],
+  );
+
   const isDuplicateName = useMemo(() => {
     const lower = (playlist || "").trim().toLowerCase();
     if (!lower) return false;
-    const list = Array.isArray(userPlaylists) ? userPlaylists : [];
-    return list.some((p) => (p?.name || "").trim().toLowerCase() === lower);
-  }, [playlist, JSON.stringify(userPlaylists)]);
+    return sanitizedPlaylists.some(
+      (p) => (p?.name || "").trim().toLowerCase() === lower,
+    );
+  }, [playlist, sanitizedPlaylists]);
+
+  const hideSheet = () => {
+    SheetManager.hide("Playlist");
+  };
 
   return (
     <AppActionSheet id="Playlist">
@@ -60,8 +70,10 @@ const PlaylistModal = (props) => {
             >
               Ajouter ce titre à une playlist
             </Text>
+
             <FlatList
-              data={Array.isArray(userPlaylists) ? userPlaylists : []}
+              data={sanitizedPlaylists}
+              keyExtractor={(item, index) => item?.id || `playlist-${index}`}
               contentContainerStyle={{ gap: 20 }}
               ListHeaderComponent={
                 <Pressable
@@ -70,7 +82,7 @@ const PlaylistModal = (props) => {
                     gap: 10,
                   }}
                   onPress={() =>
-                    scrollRef.current.scrollToIndex({
+                    scrollRef.current?.scrollToIndex({
                       index: 1,
                       animated: true,
                     })
@@ -96,6 +108,7 @@ const PlaylistModal = (props) => {
                 />
               )}
             />
+
             <GradientButton
               title="Valider"
               containerStyle={{
@@ -113,9 +126,9 @@ const PlaylistModal = (props) => {
                       musics: arrayUnion(projectId),
                       updatedAt: new Date(),
                     });
-                    const addedPlaylist = (
-                      Array.isArray(userPlaylists) ? userPlaylists : []
-                    ).find((p) => p?.id === selectedId);
+                    const addedPlaylist = sanitizedPlaylists.find(
+                      (p) => p?.id === selectedId,
+                    );
                     const name = addedPlaylist?.name || "la playlist";
                     setTooltip({
                       type: "success",
@@ -129,18 +142,19 @@ const PlaylistModal = (props) => {
                     text: e?.message || "Ajout impossible",
                   });
                 } finally {
-                  SheetManager.hide("Playlist");
+                  hideSheet();
                 }
               }}
             />
           </View>
         </View>
+
         <View style={{ width, paddingHorizontal: 14 }}>
           <View style={{ gap: 20 }}>
             {!startAtCreate && (
               <Pressable
                 onPress={() => {
-                  scrollRef.current.scrollToIndex({
+                  scrollRef.current?.scrollToIndex({
                     index: 0,
                     animated: true,
                   });
@@ -158,12 +172,14 @@ const PlaylistModal = (props) => {
                 </Text>
               </Pressable>
             )}
+
             <View style={{ ...Style.containerCenter, gap: 14 }}>
               <Text
                 style={{
                   fontSize: 20,
                   color: Palette.white,
                   fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+                  textAlign: "center",
                 }}
               >
                 Nommer la playlist
@@ -197,6 +213,7 @@ const PlaylistModal = (props) => {
                 </Text>
               )}
             </View>
+
             <GradientButton
               title={isCreating ? "Création..." : "Créer la playlist"}
               containerStyle={{
@@ -211,10 +228,9 @@ const PlaylistModal = (props) => {
                   setIsCreating(true);
                   const name = playlist.trim();
                   const lower = name.toLowerCase();
-                  // Unicité du nom pour l'utilisateur courant (insensible à la casse)
-                  const exists = (
-                    Array.isArray(userPlaylists) ? userPlaylists : []
-                  ).some((p) => (p?.name || "").trim().toLowerCase() === lower);
+                  const exists = sanitizedPlaylists.some(
+                    (p) => (p?.name || "").trim().toLowerCase() === lower,
+                  );
                   if (exists) {
                     setTooltip({
                       type: "error",
@@ -222,6 +238,7 @@ const PlaylistModal = (props) => {
                     });
                     return;
                   }
+
                   await createPlaylist({
                     createdBy: currentUID,
                     name,
@@ -231,15 +248,20 @@ const PlaylistModal = (props) => {
                     createdAt: new Date(),
                     updatedAt: new Date(),
                   });
+
                   setTooltip({
                     type: "success",
                     text: props?.payload?.projectId
                       ? `Playlist “${name}” créée et musique ajoutée`
                       : `Playlist “${name}” créée`,
                   });
+
                   setPlaylist("");
-                  SheetManager.hide("Playlist");
-                  scrollRef.current.scrollToIndex({ index: 0, animated: true });
+                  scrollRef.current?.scrollToIndex({
+                    index: 0,
+                    animated: true,
+                  });
+                  hideSheet();
                 } catch (e) {
                   console.log(e);
                   setTooltip({