playlists

src/screens/Library/components/MusicCard.js

@@ -1,21 +1,29 @@
+import { BlurView } from "expo-blur";
+import React, { useEffect, useState } from "react";
 import {
-  View,
-  Text,
   Image,
+  Platform,
   Pressable,
   StyleSheet,
-  Platform,
+  Text,
+  View,
 } from "react-native";
-import React, { useEffect, useState } from "react";
-import { Palette, Style } from "../../../styles";
-import { icons, img } from "../../../assets";
-import { size } from "../../../styles/Style";
-import { BlurView } from "expo-blur";
-import { FONT_FAMILY } from "../../../styles/Fonts";
 import { useGlobal } from "reactn";
-import { projectsRef, arrayUnion, arrayRemove } from "../../../config/firebase";
+import { icons, img } from "../../../assets";
+import { arrayRemove, arrayUnion, projectsRef } from "../../../config/firebase";
+import { Palette, Style } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import { size } from "../../../styles/Style";
 
-const MusicCard = ({ onPress, onPressMore, title = "Sans titre", subtitle = "MusicLand", imageUri = null, projectId = null, likedBy = [] }) => {
+const MusicCard = ({
+  onPress,
+  onPressMore,
+  title = "Sans titre",
+  subtitle = "MusicLand",
+  imageUri = null,
+  projectId = null,
+  likedBy = [],
+}) => {
   const [currentUID] = useGlobal("currentUID");
   const [selected, setSelected] = useState(false);
   const [open, setOpen] = useState(false);

src/screens/Library/components/MyMusic.js

@@ -1,17 +1,14 @@
-import { View } from "react-native";
 import React from "react";
+import { View } from "react-native";
+import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
+import { useUser } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
 import MusicCard from "./MusicCard";
-import { navigate } from "../../../navigation/NavigationService";
-import { Routes } from "../../../navigation";
-import { useUser } from "../../../providers/UserDataProvider";
 
 const MyMusic = () => {
   const { userProjects = [] } = useUser();
-  const projects = Array.isArray(userProjects)
-    ? userProjects.slice(0, 3)
-    : [];
-
+  const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];
   return (
     <CardContainer
       label="Mes musiques"
@@ -28,6 +25,7 @@ const MyMusic = () => {
               projectId={p?.id}
               likedBy={p?.likedBy || []}
               onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+              onPressMore={() => console.log("More options for", p.id)}
             />
           ))}
       </View>

src/screens/Library/components/MyPlaylist.js

@@ -8,16 +8,21 @@ import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { useUser } from "../../../providers/UserDataProvider";
 
 const MyPlaylist = () => {
+  const { userPlaylists = [] } = useUser();
+  const playlists = Array.isArray(userPlaylists)
+    ? userPlaylists.slice(0, 2)
+    : [];
   return (
     <CardContainer
       label="Mes Playlists"
       onPress={() => navigate(Routes.AllMyPlaylist)}
     >
       <View style={{ gap: 8 }}>
-        {["Musiques de lover", "Musiques triste"].map((item, index) => (
-          <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
+        {playlists.map((item) => (
+          <View style={{ borderRadius: 12, overflow: "hidden" }} key={item.id}>
             <BlurView
               intensity={20}
               style={{
@@ -36,7 +41,7 @@ const MyPlaylist = () => {
                   fontFamily: FONT_FAMILY.InterRegular,
                 }}
               >
-                {item}
+                {item?.name || "Sans nom"}
               </Text>
               <Pressable>
                 <Image