check existing song url before navigating

src/screens/HitParade/HitParade.js

@@ -13,6 +13,7 @@ import { background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import { projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -21,10 +22,9 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import PlaybacksCard from "./components/PlaybacksCard";
 import SongCard from "./components/SongCard";
-
 const HitParade = () => {
   const [selected, setSelected] = useState("Chansons");
-
+  const navigateToMusicDetails = useNavigateToMusicDetails();
   const { data: topSongs } = useDataFromRef({
     ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(10),
     simpleRef: false,
@@ -74,7 +74,12 @@ const HitParade = () => {
           title={item?.title || "Sans titre"}
           artist={item?.userName}
           coverUrl={item?.coverUrl || null}
-          onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+          onPress={() =>
+            navigateToMusicDetails({
+              projectId: item.id,
+              songUrl: item?.songUrl,
+            })
+          }
         />
       )}
     />
@@ -118,7 +123,10 @@ const HitParade = () => {
               artist={"MusicLand"}
               coverUrl={item?.coverUrl || null}
               onPress={() =>
-                navigate(Routes.MusicDetails, { projectId: item.id })
+                navigateToMusicDetails({
+                  projectId: item.id,
+                  songUrl: item?.songUrl,
+                })
               }
             />
           ))}
@@ -128,18 +136,21 @@ const HitParade = () => {
         {songsCol2.length > 0 && (
           <View style={{ flex: 1, gap: 10 }}>
             {songsCol2.map((item, idx) => (
-              <SongCard
-                key={item.id}
-                rank={5 + idx + 1}
-                title={item?.title || "Sans titre"}
-                artist={"MusicLand"}
-                coverUrl={item?.coverUrl || null}
-                onPress={() =>
-                  navigate(Routes.MusicDetails, { projectId: item.id })
-                }
-              />
-            ))}
-          </View>
+            <SongCard
+              key={item.id}
+              rank={5 + idx + 1}
+              title={item?.title || "Sans titre"}
+              artist={"MusicLand"}
+              coverUrl={item?.coverUrl || null}
+              onPress={() =>
+                navigateToMusicDetails({
+                  projectId: item.id,
+                  songUrl: item?.songUrl,
+                })
+              }
+            />
+          ))}
+        </View>
         )}
       </View>
     </ScrollView>