playlists

src/screens/Library/AllMyPlaylist.js

@@ -1,31 +1,44 @@
-import { View, Text, Image, Pressable, Platform } from "react-native";
-import React from "react";
-import Page from "../../layouts/Page";
-import { background, icons } from "../../assets";
-import { gutters, Palette, Style } from "../../styles";
 import { BlurView } from "expo-blur";
+import React from "react";
+import { Image, Platform, Pressable, Text, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { background, icons } from "../../assets";
+import Page from "../../layouts/Page";
+import { gutters, Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { size } from "../../styles/Style";
-
+import { useUser } from "../../providers/UserDataProvider";
 const AllMyPlaylist = () => {
+  const { userPlaylists = [] } = useUser();
   return (
     <Page
       headerType="NAVIGATION"
       backgroundImg={background.libraryBG}
       title="Mes Playlists"
+      rightComponent={() => (
+        <Pressable
+          onPress={() =>
+            SheetManager.show("Playlist", { payload: { startAtCreate: true } })
+          }
+        >
+          <Image
+            source={icons.add}
+            style={size({ size: 18 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+      )}
       contentContainerStyle={{
         paddingBottom: gutters * 2,
       }}
     >
       <View style={{ flex: 1 }}>
         <View style={{ gap: 8 }}>
-          {[
-            "Musiques de lover",
-            "Musiques triste",
-            "Happy new year",
-            "Happy songs",
-          ].map((item, index) => (
-            <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
+          {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
+            <View
+              style={{ borderRadius: 12, overflow: "hidden" }}
+              key={item?.id}
+            >
               <BlurView
                 intensity={20}
                 style={{
@@ -44,7 +57,7 @@ const AllMyPlaylist = () => {
                     fontFamily: FONT_FAMILY.InterRegular,
                   }}
                 >
-                  {item}
+                  {item?.name || "Sans nom"}
                 </Text>
                 <Pressable>
                   <Image