display music singer profile

src/screens/HitParade/HitParade.js

@@ -48,7 +48,7 @@ const HitParade = () => {
                   fontFamily: FONT_FAMILY.HelveticaNeueBold,
                 }}
               >
-                Coups de coeur des utilisateurs catégorie Playbacks
+                Coups de coeur des utilisateurs catégorie {selected}
               </Text>
               <Text
                 style={{
@@ -57,7 +57,7 @@ const HitParade = () => {
                   fontFamily: FONT_FAMILY.InterRegular,
                 }}
               >
-                Les 3 Playbacks les plus likées du mois reçoivent des{"\n"}
+                Les 3 {selected} les plus likées du mois reçoivent des{"\n"}
                 tokens.
               </Text>
             </CreateLyricsHeader>

src/screens/Profile/SingerProfile.js

@@ -1,5 +1,5 @@
 import { BlurView } from "expo-blur";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   FlatList,
   Image,
@@ -14,7 +14,8 @@ import { useGlobal } from "reactn";
 import { background, icons, img } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import GradientButton from "../../components/GradientButton";
-import { followsRef } from "../../config/firebase";
+import { followsRef, projectsRef } from "../../config/firebase";
+import useDataFromRef from "../../hooks/useDataFromRef";
 import Page from "../../layouts/Page";
 import { useUser } from "../../providers/UserDataProvider";
 import { getFollowersCount, getFollowingCount } from "../../services/follows";
@@ -22,6 +23,8 @@ import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 const SingerProfile = ({ route }) => {
   const { userId } = route.params;
   const { getUserByUid, followUser, unfollowUser } = useUser();
@@ -62,6 +65,22 @@ const SingerProfile = ({ route }) => {
     }
   };
   const [isFollowing, setIsFollowing] = useState(false);
+  const userProjectsQueryRef = useMemo(() => {
+    try {
+      if (!userId) return null;
+      return projectsRef.where("userId", "==", userId).orderBy("updatedAt", "desc");
+    } catch (e) {
+      return null;
+    }
+  }, [userId]);
+
+  const { data: userProjects = [] } = useDataFromRef({
+    ref: userProjectsQueryRef,
+    simpleRef: false,
+    listener: true,
+    condition: !!userProjectsQueryRef,
+    refreshArray: [userId],
+  });
   const handleFollowUser = async () => {
     if (!currentUID || !userId || currentUID === userId) return;
     if (isFollowing) {
@@ -105,7 +124,11 @@ const SingerProfile = ({ route }) => {
           >
             <View style={{ alignItems: "center" }}>
               <Image
-                source={img.profile}
+                source={
+                  userData?.pictureUrl || userData?.profilePictureURL || userData?.photoURL
+                    ? { uri: userData?.pictureUrl || userData?.profilePictureURL || userData?.photoURL }
+                    : img.profile
+                }
                 style={{
                   ...size({ size: 108 }),
                   borderRadius: 100,
@@ -123,7 +146,7 @@ const SingerProfile = ({ route }) => {
             </View>
             <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>0</Text>
+                <Text style={styles.value}>{Array.isArray(userProjects) ? userProjects.length : 0}</Text>
                 <Text style={styles.label}>playbacks</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
@@ -220,11 +243,22 @@ const SingerProfile = ({ route }) => {
         {selected === "Chansons" && (
           <View style={{ flex: 1 }}>
             <FlatList
-              data={Array.from({ length: 3 })}
+              data={Array.isArray(userProjects) ? userProjects : []}
               contentContainerStyle={{
                 gap: 10,
               }}
-              renderItem={() => <MusicCard />}
+              keyExtractor={(item) => item.id}
+              renderItem={({ item }) => (
+                <MusicCard
+                  title={item?.title || "Sans titre"}
+                  subtitle={userData?.userName || "MusicLand"}
+                  imageUri={item?.coverUrl || null}
+                  projectId={item?.id}
+                  likedBy={item?.likedBy || []}
+                  onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+                  onPressMore={() => {}}
+                />
+              )}
             />
           </View>
         )}