playlists

src/components/modal/PlaylistModal.js

@@ -1,31 +1,34 @@
-import {
-  View,
-  Text,
-  FlatList,
-  Pressable,
-  Image,
-  Dimensions,
-  TextInput,
-} from "react-native";
 import React, { useRef, useState } from "react";
-import AppActionSheet from "../AppActionSheet";
-import AppCheckbox from "../AppCheckbox";
+import {
+  Dimensions,
+  FlatList,
+  Image,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import SwiperFlatList from "react-native-swiper-flatlist";
+import { icons } from "../../assets";
+import { useUserData } from "../../providers/UserDataProvider";
+import { createPlaylist } from "../../screens/Library/Playlists/playlist";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import { icons } from "../../assets";
 import Style, { size } from "../../styles/Style";
-import SwiperFlatList from "react-native-swiper-flatlist";
+import AppActionSheet from "../AppActionSheet";
+import AppCheckbox from "../AppCheckbox";
 import GradientButton from "../GradientButton";
-import { SheetManager } from "react-native-actions-sheet";
-
-const PLAYLIST = ["Ménage", "Voiture", "Roadtrip"];
 
 const { width } = Dimensions.get("window");
 
-const PlaylistModal = () => {
+const PlaylistModal = (props) => {
   const scrollRef = useRef(null);
-  const [selected, setSelected] = useState("");
+  const [selectedId, setSelectedId] = useState("");
   const [playlist, setPlaylist] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const { currentUID, userPlaylists = [] } = useUserData();
+  const startAtCreate = props?.payload?.startAtCreate || false;
 
   return (
     <AppActionSheet id="Playlist">
@@ -33,6 +36,7 @@ const PlaylistModal = () => {
         style={{ width, left: -14 }}
         ref={scrollRef}
         disableGesture
+        index={startAtCreate ? 1 : 0}
       >
         <View style={{ width, paddingHorizontal: 14 }}>
           <View style={{ gap: 20 }}>
@@ -47,7 +51,7 @@ const PlaylistModal = () => {
               Ajouter ce titre à une playlist
             </Text>
             <FlatList
-              data={PLAYLIST}
+              data={Array.isArray(userPlaylists) ? userPlaylists : []}
               contentContainerStyle={{ gap: 20 }}
               ListHeaderComponent={
                 <Pressable
@@ -76,9 +80,9 @@ const PlaylistModal = () => {
               }
               renderItem={({ item }) => (
                 <AppCheckbox
-                  label={item}
-                  onPress={() => setSelected(item)}
-                  selected={selected === item}
+                  label={item?.name || "Sans nom"}
+                  onPress={() => setSelectedId(item?.id)}
+                  selected={selectedId === item?.id}
                 />
               )}
             />
@@ -94,25 +98,27 @@ const PlaylistModal = () => {
         </View>
         <View style={{ width, paddingHorizontal: 14 }}>
           <View style={{ gap: 20 }}>
-            <Pressable
-              onPress={() => {
-                scrollRef.current.scrollToIndex({
-                  index: 0,
-                  animated: true,
-                });
-                setPlaylist("");
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 12,
-                  color: Palette.gray,
-                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+            {!startAtCreate && (
+              <Pressable
+                onPress={() => {
+                  scrollRef.current.scrollToIndex({
+                    index: 0,
+                    animated: true,
+                  });
+                  setPlaylist("");
                 }}
               >
-                Annuler
-              </Text>
-            </Pressable>
+                <Text
+                  style={{
+                    fontSize: 12,
+                    color: Palette.gray,
+                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  }}
+                >
+                  Annuler
+                </Text>
+              </Pressable>
+            )}
             <View style={{ ...Style.containerCenter, gap: 14 }}>
               <Text
                 style={{
@@ -140,17 +146,32 @@ const PlaylistModal = () => {
               />
             </View>
             <GradientButton
-              title="Créer la playlist"
+              title={isCreating ? "Création..." : "Créer la playlist"}
               containerStyle={{
                 width: "80%",
                 alignSelf: "center",
+                opacity: playlist?.trim()?.length ? 1 : 0.5,
               }}
-              onPress={() => {
-                scrollRef.current.scrollToIndex({
-                  index: 0,
-                  animated: true,
-                });
-                setPlaylist("");
+              disabled={!playlist?.trim()?.length || isCreating}
+              onPress={async () => {
+                if (!playlist?.trim()?.length || !currentUID) return;
+                try {
+                  setIsCreating(true);
+                  await createPlaylist({
+                    createdBy: currentUID,
+                    name: playlist.trim(),
+                    musics: [],
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                  });
+                  setPlaylist("");
+                  SheetManager.hide("Playlist");
+                  scrollRef.current.scrollToIndex({ index: 0, animated: true });
+                } catch (e) {
+                  console.log(e);
+                } finally {
+                  setIsCreating(false);
+                }
               }}
             />
           </View>