last tickets

src/screens/Library/components/MyMusic.js

@@ -1,13 +1,17 @@
 import React, { useState } from "react";
-import { View } from "react-native";
+import { Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { useGlobal } from "reactn";
+import GradientButton from "../../../components/GradientButton";
 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";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import { getProjectLikes, LIKE_TARGET } from "../../../utils/likes";
 import CardContainer from "./CardContainer";
 import MusicCard from "./MusicCard";
 const MyMusic = () => {
@@ -16,6 +20,7 @@ const MyMusic = () => {
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
   const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];
+  const hasProjects = projects.length > 0;
 
   const [, setTooltip] = useGlobal("_tooltip");
   const navigateToMusicDetails = useNavigateToMusicDetails();
@@ -32,69 +37,91 @@ const MyMusic = () => {
       }
       onPressPlus={() => navigate(Routes.WritingLyrics)}
     >
-      <View style={{ gap: 10 }}>
-        {Array.isArray(projects) &&
-          projects.map((p) => (
-            <MusicCard
-              key={p.id}
-              title={p?.title}
-              subtitle={p?.userName}
-              imageUri={p?.coverUrl || null}
-              projectId={p?.id}
-              likedBy={p?.likedBy || []}
-              onPress={() =>
-                navigateToMusicDetails({
-                  projectId: p.id,
-                  songUrl: p?.songUrl,
-                  project: p,
-                })
-              }
-              onPressMore={(posTop) => {
-                setSelectedProjectId(p.id);
-                setMenuPosition(posTop);
-                setShowMenu(
-                  (prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
-                );
-              }}
-            />
-          ))}
-        <MoreMenu
-          visible={showMenu}
-          top={menuPosition?.top ?? 0}
-          position={menuPosition}
-          onClose={() => setShowMenu(false)}
-          inPlaylist={false}
-          projectId={selectedProjectId}
-          extraItems={[
-            {
-              label: "Supprimer",
-              onPress: () =>
-                SheetManager.show("Delete", {
-                  payload: {
-                    title: "Supprimer le projet",
-                    message:
-                      "Cette action supprimera définitivement ce projet.",
-                    onConfirm: async () => {
-                      try {
-                        if (!selectedProjectId) return;
-                        await projectsRef.doc(selectedProjectId).delete();
-                        setTooltip({
-                          type: "success",
-                          text: "Projet supprimé",
-                        });
-                      } catch (e) {
-                        setTooltip({
-                          type: "error",
-                          text: e?.message || "Suppression impossible",
-                        });
-                      }
+      {hasProjects ? (
+        <View style={{ gap: 10 }}>
+          {Array.isArray(projects) &&
+            projects.map((p) => (
+              <MusicCard
+                key={p.id}
+                title={p?.title}
+                subtitle={p?.userName}
+                imageUri={p?.coverUrl || null}
+                projectId={p?.id}
+                likedBy={getProjectLikes(p, LIKE_TARGET.SONG)}
+                likeTarget={LIKE_TARGET.SONG}
+                onPress={() =>
+                  navigateToMusicDetails({
+                    projectId: p.id,
+                    songUrl: p?.songUrl,
+                    project: p,
+                  })
+                }
+                onPressMore={(posTop) => {
+                  setSelectedProjectId(p.id);
+                  setMenuPosition(posTop);
+                  setShowMenu(
+                    (prev) =>
+                      !prev || posTop?.top !== (menuPosition?.top ?? null)
+                  );
+                }}
+              />
+            ))}
+          <MoreMenu
+            visible={showMenu}
+            top={menuPosition?.top ?? 0}
+            position={menuPosition}
+            onClose={() => setShowMenu(false)}
+            inPlaylist={false}
+            projectId={selectedProjectId}
+            extraItems={[
+              {
+                label: "Supprimer",
+                onPress: () =>
+                  SheetManager.show("Delete", {
+                    payload: {
+                      title: "Supprimer le projet",
+                      message:
+                        "Cette action supprimera définitivement ce projet.",
+                      onConfirm: async () => {
+                        try {
+                          if (!selectedProjectId) return;
+                          await projectsRef.doc(selectedProjectId).delete();
+                          setTooltip({
+                            type: "success",
+                            text: "Projet supprimé",
+                          });
+                        } catch (e) {
+                          setTooltip({
+                            type: "error",
+                            text: e?.message || "Suppression impossible",
+                          });
+                        }
+                      },
                     },
-                  },
-                }),
-            },
-          ]}
-        />
-      </View>
+                  }),
+              },
+            ]}
+          />
+        </View>
+      ) : (
+        <View style={{ flexDirection: "column", gap: 10 }}>
+          <Text
+            style={{
+              textAlign: "center",
+              fontFamily: FONT_FAMILY.InterRegular,
+              color: Palette.white,
+              fontSize: 16,
+            }}
+          >
+            Aucune musique pour l'instant
+          </Text>
+          <GradientButton
+            containerStyle={{ padding: 2 }}
+            onPress={() => navigate(Routes.WritingLyrics)}
+            title="     Créer une musique"
+          />
+        </View>
+      )}
     </CardContainer>
   );
 };