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),
@@ -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" }}
             />
+            <Pressable onPress={handlePlayRandomSong}>
               <Image
                 source={icons.play}
                 style={{ alignSelf: "center", marginVertical: 10 }}
               />
+            </Pressable>
             <CreateLyricsHeader
               gradientProps={{ colors: ["#F94697", "#7023F7"] }}
             >