continue generating flow, add backend connection on main tabs

src/screens/Library/components/LikedMusic.js

@@ -1,12 +1,17 @@
-import { View, Text, Image, FlatList } from "react-native";
+import { View, Image, FlatList, Pressable } from "react-native";
 import React from "react";
 import CardContainer from "./CardContainer";
 import { Style } from "../../../styles";
 import { img } from "../../../assets";
 import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { useUser } from "../../../providers/UserDataProvider";
 
 const LikedMusic = () => {
+  const { userLikedProjects = [] } = useUser();
+  const items = Array.isArray(userLikedProjects)
+    ? userLikedProjects.slice(0, 6)
+    : [];
   return (
     <CardContainer
       label="Musiques likées"
@@ -14,17 +19,21 @@ const LikedMusic = () => {
     >
       <FlatList
         scrollEnabled={false}
-        data={Array.from({ length: 6 })}
+        data={items}
         numColumns={3}
         contentContainerStyle={{ gap: 10 }}
         columnWrapperStyle={{ gap: 6 }}
-        renderItem={() => (
-          <View style={{ flex: 1 }}>
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <Pressable
+            style={{ flex: 1 }}
+            onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+          >
             <Image
-              source={img.placeholder3}
+              source={item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3}
               style={{ width: "100%", height: 172, borderRadius: 10 }}
             />
-          </View>
+          </Pressable>
         )}
       />
     </CardContainer>

src/screens/Library/components/MusicCard.js

@@ -12,8 +12,11 @@ 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";
 
-const MusicCard = ({ onPress, onPressMore }) => {
+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);
   const [layout, setLayout] = useState(null);
@@ -26,6 +29,26 @@ const MusicCard = ({ onPress, onPressMore }) => {
     }
   }, [layout]);
 
+  useEffect(() => {
+    if (Array.isArray(likedBy) && currentUID) {
+      setSelected(likedBy.includes(currentUID));
+    }
+  }, [JSON.stringify(likedBy), currentUID]);
+
+  const toggleLike = async () => {
+    if (!projectId || !currentUID) return;
+    const next = !selected;
+    setSelected(next);
+    try {
+      await projectsRef.doc(projectId).update({
+        likedBy: next ? arrayUnion(currentUID) : arrayRemove(currentUID),
+      });
+    } catch (e) {
+      // rollback on failure
+      setSelected(!next);
+    }
+  };
+
   const onPressMenu = () => {
     onPressMore?.(menuPos);
   };
@@ -41,7 +64,7 @@ const MusicCard = ({ onPress, onPressMore }) => {
         onLayout={(e) => setLayout(e.nativeEvent.layout)}
       >
         <Image
-          source={img.placeholder2}
+          source={imageUri ? { uri: imageUri } : img.placeholder2}
           style={{ ...size({ size: 60 }), borderRadius: 12 }}
         />
         <View style={styles.blurContainer}>
@@ -57,8 +80,8 @@ const MusicCard = ({ onPress, onPressMore }) => {
             }
           >
             <View>
-              <Text style={styles.title}>Alors on danse</Text>
-              <Text style={styles.subTitle}>Stromae</Text>
+              <Text style={styles.title}>{title || "Sans titre"}</Text>
+              <Text style={styles.subTitle}>{subtitle || "MusicLand"}</Text>
             </View>
             <View
               style={{
@@ -66,7 +89,7 @@ const MusicCard = ({ onPress, onPressMore }) => {
                 gap: 12,
               }}
             >
-              <Pressable onPress={() => setSelected(!selected)}>
+              <Pressable onPress={toggleLike}>
                 <Image
                   source={selected ? icons.heart : icons.heartOutline}
                   style={size({ size: 24 })}

src/screens/Library/components/MyMusic.js

@@ -4,17 +4,32 @@ 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)
+    : [];
+
   return (
     <CardContainer
       label="Mes musiques"
       onPress={() => navigate(Routes.AllMyMusic)}
     >
       <View style={{ gap: 10 }}>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <MusicCard key={index} />
-        ))}
+        {Array.isArray(projects) &&
+          projects.map((p) => (
+            <MusicCard
+              key={p.id}
+              title={p?.title}
+              subtitle={"MusicLand"}
+              imageUri={p?.coverUrl || null}
+              projectId={p?.id}
+              likedBy={p?.likedBy || []}
+              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+            />
+          ))}
       </View>
     </CardContainer>
   );