continue generating flow, add backend connection on main tabs

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 })}