continue generating flow, add backend connection on main tabs

src/screens/HitParade/HitParade.js

@@ -9,9 +9,23 @@ import BorderGradientButton from "../../components/BorderGradientButton";
 import SongCard from "./components/SongCard";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import PlaybacksCard from "./components/PlaybacksCard";
+import firebase from "../../config/firebase";
+import useDataFromRef from "../../hooks/useDataFromRef";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 
 const HitParade = () => {
   const [selected, setSelected] = useState("Chansons");
+  const { data: latestSongs } = useDataFromRef({
+    ref: firebase
+      .firestore()
+      .collection("projects")
+      .orderBy("createdAt", "desc")
+      .limit(10),
+    simpleRef: false,
+    listener: true,
+    condition: true,
+  });
 
   return (
     <Page backgroundImg={background.hitParadeBG} headerType="NONE">
@@ -80,8 +94,17 @@ const HitParade = () => {
                 gap: 10,
                 paddingBottom: responsiveHeight(20),
               }}
-              data={Array.from({ length: 5 })}
-              renderItem={() => <SongCard />}
+              data={Array.isArray(latestSongs) ? latestSongs : []}
+              keyExtractor={(item) => item.id}
+              renderItem={({ item, index }) => (
+                <SongCard
+                  rank={index + 1}
+                  title={item?.title || "Sans titre"}
+                  artist={"MusicLand"}
+                  coverUrl={item?.coverUrl || null}
+                  onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+                />
+              )}
             />
           )}
           {selected === "Playbacks" && (

src/screens/HitParade/components/SongCard.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Platform } from "react-native";
+import { View, Text, Image, Platform, Pressable } from "react-native";
 import React from "react";
 import { img } from "../../../assets";
 import { BlurView } from "expo-blur";
@@ -7,16 +7,17 @@ import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import CoinBadge from "./CoinBadge";
 
-const SongCard = () => {
+const SongCard = ({ rank = 1, title = "Sans titre", artist = "MusicLand", coverUrl = null, onPress = null }) => {
   return (
-    <View
+    <Pressable
+      onPress={onPress || undefined}
       style={{
         ...Style.containerRow,
         gap: 6,
       }}
     >
       <Image
-        source={img.placeholder2}
+        source={coverUrl ? { uri: coverUrl } : img.placeholder2}
         style={{ ...size({ size: 60 }), borderRadius: 12 }}
       />
       <BlurView
@@ -43,7 +44,7 @@ const SongCard = () => {
               fontFamily: FONT_FAMILY.InterSemiBold,
             }}
           >
-            1
+            {rank}
           </Text>
           <View>
             <Text
@@ -53,7 +54,7 @@ const SongCard = () => {
                 fontFamily: FONT_FAMILY.InterMedium,
               }}
             >
-              Alors on danse
+              {title}
             </Text>
             <Text
               style={{
@@ -62,13 +63,13 @@ const SongCard = () => {
                 fontFamily: FONT_FAMILY.InterRegular,
               }}
             >
-              Stromae
+              {artist}
             </Text>
           </View>
         </View>
         <CoinBadge />
       </BlurView>
-    </View>
+    </Pressable>
   );
 };