refacto

src/navigation/MainStack.js

@@ -46,9 +46,8 @@ import ChooseDecor from "../screens/Playback/ChooseDecor";
 import CreatingDecor from "../screens/Playback/CreatingDecor";
 import VideoFinalize from "../screens/Playback/VideoFinalize";
 import GeneratingSong from "../screens/Studio/GeneratingSong";
-import AllMyMusic from "../screens/Library/AllMyMusic";
 import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
-import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic";
+import AllMyList from "../screens/Library/AllMyList";
 import Research from "../screens/Library/Research";
 import MusicDetails from "../screens/Library/MusicDetails";
 import PlaylistDetails from "../screens/Library/PlaylistDetails";
@@ -227,10 +226,6 @@ const screens = [
     name: Routes.VideoFinalize,
     component: VideoFinalize,
   },
-  {
-    name: Routes.AllMyMusic,
-    component: AllMyMusic,
-  },
   {
     name: Routes.AllMyPlaylist,
     component: AllMyPlaylist,
@@ -240,8 +235,8 @@ const screens = [
     component: PlaylistDetails,
   },
   {
-    name: Routes.AllMyLikedMusic,
+    name: Routes.AllMyList,
-    component: AllMyLikedMusic,
+    component: AllMyList,
   },
   {
     name: Routes.Research,

src/navigation/Routes.js

@@ -64,10 +64,9 @@ export const Routes = {
   Playbacks: "Playbacks",
 
   Library: "Library",
-  AllMyMusic: "AllMyMusic",
   AllMyPlaylist: "AllMyPlaylist",
   PlaylistDetails: "PlaylistDetails",
-  AllMyLikedMusic: "AllMyLikedMusic",
+  AllMyList: "AllMyList",
   Research: "Research",
   MusicDetails: "MusicDetails",
 

src/screens/Library/AllMyList.js

@@ -1,33 +1,65 @@
-import { BlurView } from "expo-blur";
+import { useRoute } from "@react-navigation/core";
 import React, { useState } from "react";
 import { View } from "react-native";
 import { background } from "../../assets";
+import MoreMenu from "../../components/MoreMenu";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
-import { gutters, Palette } from "../../styles";
+import { gutters } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
 import MusicCard from "./components/MusicCard";
-import MoreMenu from "../../components/MoreMenu";
 
-const AllMyLikedMusic = () => {
+export default function AllMyList() {
+  const route = useRoute();
+  const {
+    title = "Mes éléments",
+    scope = "music",
+    liked = false,
+  } = route?.params || {};
+
+  const { userProjects, userLikedProjects, userPlaybacks, userLikedPlaybacks } =
+    useUser();
+
+  const items = (() => {
+    if (scope === "playback") {
+      return Array.isArray(liked ? userLikedPlaybacks : userPlaybacks)
+        ? liked
+          ? userLikedPlaybacks
+          : userPlaybacks
+        : [];
+    }
+    // music (projects)
+    return Array.isArray(liked ? userLikedProjects : userProjects)
+      ? liked
+        ? userLikedProjects
+        : userProjects
+      : [];
+  })();
+
   const [top, setTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
-  const { userLikedProjects: projects } = useUser();
+
+  const onPressItem = (item) => {
+    if (scope === "playback") {
+      navigate(Routes.Playbacks, { projectId: item.id });
+    } else {
+      navigate(Routes.MusicDetails, { projectId: item.id });
+    }
+  };
 
   return (
     <Page
       headerType="NAVIGATION"
       backgroundImg={background.libraryBG}
-      title="Musiques de lover"
+      title={title}
       contentContainerStyle={{ paddingBottom: gutters * 2 }}
     >
       <View style={{ flex: 1 }}>
         <View style={{ gap: 10 }}>
-          {Array.isArray(projects) &&
+          {Array.isArray(items) &&
-            projects.map((item) => (
+            items.map((item) => (
               <MusicCard
                 key={item.id}
                 title={item?.title || "Sans titre"}
@@ -35,9 +67,7 @@ const AllMyLikedMusic = () => {
                 subtitle={"MusicLand"}
                 projectId={item?.id}
                 likedBy={item?.likedBy || []}
-                onPress={() =>
+                onPress={() => onPressItem(item)}
-                  navigate(Routes.MusicDetails, { projectId: item.id })
-                }
                 onPressMore={(posTop) => {
                   setSelectedProjectId(item.id);
                   setTop(posTop);
@@ -56,6 +86,4 @@ const AllMyLikedMusic = () => {
       </View>
     </Page>
   );
-};
+}
-
-export default AllMyLikedMusic;

src/screens/Library/AllMyMusic.js

@@ -1,93 +0,0 @@
-import { View, Text, FlatList, Pressable, Image as RNImage } from "react-native";
-import { Image as ExpoImage } from "expo-image";
-import React, { useState } from "react";
-import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import useLayoutType from "../../hooks/useLayoutType";
-import { useUser } from "../../providers/UserDataProvider";
-import { navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
-
-const AllMyMusic = () => {
-  const [containerLayout, setContainerLayout] = useState(null);
-  const { isWeb } = useLayoutType();
-  const { userProjects: projects } = useUser();
-
-  return (
-    <Page
-      backgroundImg={background.libraryBG}
-      headerType="NAVIGATION"
-      title="Mes musiques"
-      contentContainerStyle={{
-        paddingBottom: gutters * 2,
-      }}
-    >
-      <View
-        style={{ flex: 1 }}
-        onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
-      >
-        <CreateLyricsHeader
-          containerStyle={{
-            maxHeight: containerLayout?.height,
-            zIndex: 1,
-          }}
-          blurViewStyle={{
-            zIndex: 2,
-            ...(isWeb && { flex: 1 }),
-          }}
-          gradientProps={{
-            start: { x: 0, y: 0 },
-            end: { x: 0, y: 1 },
-          }}
-        >
-          <FlatList
-            data={Array.isArray(projects) ? projects : []}
-            numColumns={3}
-            columnWrapperStyle={{ gap: 10 }}
-            contentContainerStyle={{ gap: 14 }}
-            keyExtractor={(item) => item.id}
-            // Projects are provided by provider with a live listener
-          renderItem={({ item }) => (
-              <Pressable
-                style={{ flex: 1, gap: 4 }}
-                onPress={() =>
-                  navigate(Routes.MusicDetails, { projectId: item.id })
-                }
-              >
-                {item?.coverUrl ? (
-                  <ExpoImage
-                    source={{ uri: item.coverUrl }}
-                    cachePolicy="memory-disk"
-                    priority="high"
-                    contentFit="cover"
-                    transition={100}
-                    style={{ width: "100%", height: 114, borderRadius: 8 }}
-                  />
-                ) : (
-                  <RNImage
-                    source={img.placeholder2}
-                    style={{ width: "100%", height: 114, borderRadius: 8 }}
-                  />
-                )}
-                <Text
-                  style={{
-                    fontSize: 12,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.InterRegular,
-                  }}
-                >
-                  {item?.title || "Sans titre"}
-                </Text>
-              </Pressable>
-            )}
-          />
-        </CreateLyricsHeader>
-      </View>
-    </Page>
-  );
-};
-
-export default AllMyMusic;

src/screens/Library/components/BackTracks.js

@@ -23,7 +23,16 @@ const BackTracks = () => {
   );
 
   return (
-    <CardContainer label="Mes Playbacks">
+    <CardContainer
+      label="Mes Playbacks"
+      onPress={() =>
+        navigate(Routes.AllMyList, {
+          title: "Mes playbacks",
+          scope: "playback",
+          liked: false,
+        })
+      }
+    >
       <View>
         {items.length > 0 && (
           <FlatList

src/screens/Library/components/LikedMusic.js

@@ -28,7 +28,13 @@ const LikedMusic = () => {
   return (
     <CardContainer
       label="Musiques likées"
-      onPress={() => navigate(Routes.AllMyLikedMusic)}
+      onPress={() =>
+        navigate(Routes.AllMyList, {
+          title: "Musiques likées",
+          scope: "music",
+          liked: true,
+        })
+      }
     >
       <FlatList
         onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}

src/screens/Library/components/LikedPlayback.js

@@ -25,7 +25,16 @@ const LikedPlayback = () => {
     Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
   );
   return (
-    <CardContainer label="Playbacks likés">
+    <CardContainer
+      label="Playbacks likés"
+      onPress={() =>
+        navigate(Routes.AllMyList, {
+          title: "Playbacks likés",
+          scope: "playback",
+          liked: true,
+        })
+      }
+    >
       <View>
         {items.length > 0 && (
           <FlatList

src/screens/Library/components/MyMusic.js

@@ -16,7 +16,13 @@ const MyMusic = () => {
   return (
     <CardContainer
       label="Mes musiques"
-      onPress={() => navigate(Routes.AllMyMusic)}
+      onPress={() =>
+        navigate(Routes.AllMyList, {
+          title: "Mes musiques",
+          scope: "music",
+          liked: false,
+        })
+      }
     >
       <View style={{ gap: 10 }}>
         {Array.isArray(projects) &&