randome hit parade

src/screens/HitParade/HitParade.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import {
   FlatList,
   Image,
@@ -32,14 +32,6 @@ const HitParade = () => {
     condition: true,
   });
 
-  console.log(
-    "top songs",
-    JSON.stringify(
-      topSongs.map((song) => song.userId),
-      null,
-      2
-    )
-  );
   const { data: topPlaybacks } = useDataFromRef({
     ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(50),
     format: (docs) => docs.filter((d) => d?.playbackUrl != null).slice(0, 10),
@@ -136,21 +128,21 @@ const HitParade = () => {
         {songsCol2.length > 0 && (
           <View style={{ flex: 1, gap: 10 }}>
             {songsCol2.map((item, idx) => (
-            <SongCard
+              <SongCard
-              key={item.id}
+                key={item.id}
-              rank={5 + idx + 1}
+                rank={5 + idx + 1}
-              title={item?.title || "Sans titre"}
+                title={item?.title || "Sans titre"}
-              artist={"MusicLand"}
+                artist={"MusicLand"}
-              coverUrl={item?.coverUrl || null}
+                coverUrl={item?.coverUrl || null}
-              onPress={() =>
+                onPress={() =>
-                navigateToMusicDetails({
+                  navigateToMusicDetails({
-                  projectId: item.id,
+                    projectId: item.id,
-                  songUrl: item?.songUrl,
+                    songUrl: item?.songUrl,
-                })
+                  })
-              }
+                }
-            />
+              />
-          ))}
+            ))}
-        </View>
+          </View>
         )}
       </View>
     </ScrollView>
@@ -200,6 +192,21 @@ const HitParade = () => {
   );
 
   const isWeb = Platform.OS === "web";
+  const handlePlayRandomSong = useCallback(() => {
+    const arr = Array.isArray(topSongs) ? topSongs : [];
+
+    if (!arr.length) {
+      console.warn("Aucune chanson disponible pour le moment.");
+      return;
+    }
+
+    const randomSong = arr[Math.floor(Math.random() * arr.length)];
+
+    navigateToMusicDetails({
+      projectId: randomSong.id,
+      songUrl: randomSong?.songUrl,
+    });
+  }, [navigateToMusicDetails, topSongs]);
 
   return (
     <Page
@@ -220,10 +227,12 @@ const HitParade = () => {
               source={icons.hitParadeLogo}
               style={{ alignSelf: "center" }}
             />
-            <Image
+            <Pressable onPress={handlePlayRandomSong}>
-              source={icons.play}
+              <Image
-              style={{ alignSelf: "center", marginVertical: 10 }}
+                source={icons.play}
-            />
+                style={{ alignSelf: "center", marginVertical: 10 }}
+              />
+            </Pressable>
             <CreateLyricsHeader
               gradientProps={{ colors: ["#F94697", "#7023F7"] }}
             >