check existing song url before navigating

src/hooks/useNavigateToMusicDetails.js

@@ -0,0 +1,30 @@
+import { useCallback } from "react";
+import { useGlobal } from "reactn";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
+
+const useNavigateToMusicDetails = () => {
+  const [, setTooltip] = useGlobal("_tooltip");
+
+  return useCallback(
+    ({ projectId, songUrl }) => {
+      if (!projectId) {
+        return false;
+      }
+
+      if (songUrl != null && songUrl !== "") {
+        navigate(Routes.MusicDetails, { projectId });
+        return true;
+      }
+
+      setTooltip({
+        type: "error",
+        text: "Les paroles pour cette musique n'ont pas été générées",
+      });
+      return false;
+    },
+    [setTooltip]
+  );
+};
+
+export default useNavigateToMusicDetails;

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
+            <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={() =>
-                  navigate(Routes.MusicDetails, { projectId: item.id })
+                navigateToMusicDetails({
-                }
+                  projectId: item.id,
-              />
+                  songUrl: item?.songUrl,
-            ))}
+                })
-          </View>
+              }
+            />
+          ))}
+        </View>
         )}
       </View>
     </ScrollView>

src/screens/Library/AllMyList.js

@@ -6,6 +6,7 @@ import MoreMenu from "../../components/MoreMenu";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
 import MusicCard from "./components/MusicCard";
@@ -20,6 +21,7 @@ export default function AllMyList() {
 
   const { userProjects, userLikedProjects, userPlaybacks, userLikedPlaybacks } =
     useUser();
+  const navigateToMusicDetails = useNavigateToMusicDetails();
 
   const items = (() => {
     if (scope === "playback") {
@@ -45,7 +47,10 @@ export default function AllMyList() {
     if (scope === "playback") {
       navigate(Routes.Playbacks, { projectId: item.id });
     } else {
-      navigate(Routes.MusicDetails, { projectId: item.id });
+      navigateToMusicDetails({
+        projectId: item.id,
+        songUrl: item?.songUrl,
+      });
     }
   };
 

src/screens/Library/AllMyPlaylist.web.js

@@ -7,9 +7,8 @@ import MoreMenu from "../../components/MoreMenu";
 import { playlistsRef, projectsRef } from "../../config/firebase";
 import useDataFromArrayDocId from "../../hooks/useDataFromArrayId";
 import useDataFromRef from "../../hooks/useDataFromRef";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import Page from "../../layouts/Page";
-import { Routes } from "../../navigation";
-import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
@@ -40,6 +39,7 @@ const AllMyPlaylist = ({ route }) => {
   const [menuPosition, setMenuPosition] = useState(null);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
+  const navigateToMusicDetails = useNavigateToMusicDetails();
   console.log("musics are : ", musics);
   return (
     <Page
@@ -170,7 +170,10 @@ const AllMyPlaylist = ({ route }) => {
                 projectId={p?.id}
                 likedBy={p?.likedBy || []}
                 onPress={() =>
-                  navigate(Routes.MusicDetails, { projectId: p.id })
+                  navigateToMusicDetails({
+                    projectId: p.id,
+                    songUrl: p?.songUrl,
+                  })
                 }
                 onPressMore={(posTop) => {
                   setSelectedProjectId(p.id);

src/screens/Library/Library.js

@@ -88,7 +88,7 @@ const Library = () => {
           {hasBackTracks && <BackTracks />}
           {hasLikedMusic && <LikedMusic />}
           {hasMyClips && <MyClips />}
-          {hasPlaylists && <MyPlaylist />}
+          <MyPlaylist />
           {hasLikedPlayback && <LikedPlayback />}
           {hasLikedClips && <LikedClips />}
 

src/screens/Library/PlaylistDetails.js

@@ -9,8 +9,8 @@ import { background, icons } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
 import { playlistsRef, projectsRef } from "../../config/firebase";
 import Page from "../../layouts/Page";
-import { Routes } from "../../navigation";
+import { goBack } from "../../navigation/NavigationService";
-import { goBack, navigate } from "../../navigation/NavigationService";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import { gutters } from "../../styles";
 import MusicCard from "./components/MusicCard";
 
@@ -39,6 +39,7 @@ const PlaylistDetails = () => {
   const [menuPosition, setMenuPosition] = useState(null);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
+  const navigateToMusicDetails = useNavigateToMusicDetails();
 
   const confirmDelete = () => {
     SheetManager.show("Delete", {
@@ -87,7 +88,12 @@ const PlaylistDetails = () => {
               imageUri={p?.coverUrl || null}
               projectId={p?.id}
               likedBy={p?.likedBy || []}
-              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+              onPress={() =>
+                navigateToMusicDetails({
+                  projectId: p.id,
+                  songUrl: p?.songUrl,
+                })
+              }
               onPressMore={(posTop) => {
                 setSelectedProjectId(p.id);
                 setMenuPosition(posTop);

src/screens/Library/components/LikedMusic.js

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { img } from "../../../assets";
 import useLayoutType from "../../../hooks/useLayoutType";
+import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
@@ -26,6 +27,7 @@ const LikedMusic = () => {
     0,
     Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
   );
+  const navigateToMusicDetails = useNavigateToMusicDetails();
   return (
     <CardContainer
       label="Musiques likées"
@@ -50,7 +52,10 @@ const LikedMusic = () => {
           <Pressable
             style={{ width: itemWidth }}
             onPress={() =>
-              navigate(Routes.MusicDetails, { projectId: item.id })
+              navigateToMusicDetails({
+                projectId: item.id,
+                songUrl: item?.songUrl,
+              })
             }
           >
             {item?.coverUrl ? (

src/screens/Library/components/MyMusic.js

@@ -4,6 +4,7 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useGlobal } from "reactn";
 import MoreMenu from "../../../components/MoreMenu";
 import { projectsRef } from "../../../config/firebase";
+import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
@@ -17,6 +18,7 @@ const MyMusic = () => {
   const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];
 
   const [, setTooltip] = useGlobal("_tooltip");
+  const navigateToMusicDetails = useNavigateToMusicDetails();
 
   return (
     <CardContainer
@@ -39,7 +41,12 @@ const MyMusic = () => {
               imageUri={p?.coverUrl || null}
               projectId={p?.id}
               likedBy={p?.likedBy || []}
-              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+              onPress={() =>
+                navigateToMusicDetails({
+                  projectId: p.id,
+                  songUrl: p?.songUrl,
+                })
+              }
               onPressMore={(posTop) => {
                 setSelectedProjectId(p.id);
                 setMenuPosition(posTop);

src/screens/Library/components/SearchResultsList.js

@@ -3,6 +3,7 @@ import { Pressable, ScrollView, Text, View } from "react-native";
 import { Image as ExpoImage } from "expo-image";
 import { img } from "../../../assets";
 import MoreMenu from "../../../components/MoreMenu";
+import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { Palette, Style } from "../../../styles";
@@ -42,9 +43,17 @@ const SearchResultsList = ({
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
 
-  const handleProjectPress = (projectId) => {
+  const navigateToMusicDetails = useNavigateToMusicDetails();
-    navigate(Routes.MusicDetails, { projectId });
+
-    onResultSelected?.();
+  const handleProjectPress = (project) => {
+    const didNavigate = navigateToMusicDetails({
+      projectId: project?.id,
+      songUrl: project?.songUrl,
+    });
+
+    if (didNavigate) {
+      onResultSelected?.();
+    }
   };
 
   const handleProfilePress = (userId) => {
@@ -87,7 +96,7 @@ const SearchResultsList = ({
                         imageUri={project?.coverUrl || null}
                         projectId={project?.id}
                         likedBy={project?.likedBy || []}
-                        onPress={() => handleProjectPress(project.id)}
+                        onPress={() => handleProjectPress(project)}
                         onPressMore={(positionTop) => {
                           setSelectedProjectId(project.id);
                           setMenuPosition(positionTop);
@@ -138,7 +147,7 @@ const SearchResultsList = ({
                         imageUri={project?.coverUrl || null}
                         projectId={project?.id}
                         likedBy={project?.likedBy || []}
-                        onPress={() => handleProjectPress(project.id)}
+                        onPress={() => handleProjectPress(project)}
                         onPressMore={(positionTop) => {
                           setSelectedProjectId(project.id);
                           setMenuPosition(positionTop);

src/screens/Profile/Profile.js

@@ -21,6 +21,7 @@ import PressableScale from "../../components/PressableScale";
 import { projectsRef, usersRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import useLayoutType from "../../hooks/useLayoutType";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate, push } from "../../navigation/NavigationService";
@@ -53,6 +54,7 @@ const Profile = () => {
   const [menuPosition, setMenuPosition] = useState(null);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
+  const navigateToMusicDetails = useNavigateToMusicDetails();
   const onPressMenu = (item) => {
     setSelected(item);
   };
@@ -134,7 +136,10 @@ const Profile = () => {
               projectId={item?.id}
               likedBy={item?.likedBy || []}
               onPress={() =>
-                navigate(Routes.MusicDetails, { projectId: item.id })
+                navigateToMusicDetails({
+                  projectId: item.id,
+                  songUrl: item?.songUrl,
+                })
               }
               onPressMore={(posTop) => {
                 setSelectedProjectId(item.id);