use only profile

src/screens/Profile/Profile.js

@@ -1,6 +1,7 @@
+import { useRoute } from "@react-navigation/native";
 import { BlurView } from "expo-blur";
 import { Image as ExpoImage } from "expo-image";
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   FlatList,
   Image,
@@ -17,7 +18,8 @@ import { useGlobal } from "reactn";
 import { background, icons, img } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import MoreMenu from "../../components/MoreMenu";
-import { projectsRef } from "../../config/firebase";
+import { projectsRef, usersRef } from "../../config/firebase";
+import useDataFromRef from "../../hooks/useDataFromRef";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate, push } from "../../navigation/NavigationService";
@@ -28,10 +30,25 @@ import Style, { gutters, size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
 
 const Profile = () => {
+  const { params } = useRoute();
   const [selected, setSelected] = useState("Chansons");
-  const { userProjects, userPlaybacks, followingCount, currentUserData } =
-    useUser();
+  const {
+    userProjects: selfProjects,
+    userPlaybacks: selfPlaybacks,
+    followingCount,
+    currentUserData,
+    getUserByUid,
+    followUser,
+    unfollowUser,
+  } = useUser();
+  const [currentUID] = useGlobal("currentUID");
+  const targetUserId = params?.userId || currentUID || null;
+  const isSelf = !!currentUID && targetUserId === currentUID;
   const [, setTooltip] = useGlobal("_tooltip");
+  const [userData, setUserData] = useState(null);
+  const [isFollowing, setIsFollowing] = useState(false);
+  const [followers, setFollowers] = useState(0);
+  const [following, setFollowing] = useState(0);
   const [menuTop, setMenuTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
@@ -39,6 +56,61 @@ const Profile = () => {
     setSelected(item);
   };
 
+  // Chargement des données utilisateur si on consulte un autre profil
+  useEffect(() => {
+    const fetch = async () => {
+      if (!targetUserId) return;
+      if (isSelf) {
+        setUserData(currentUserData || null);
+        setFollowers(
+          Array.isArray(currentUserData?.followedBy)
+            ? currentUserData.followedBy.length
+            : 0
+        );
+        return;
+      }
+      const data = await getUserByUid(targetUserId);
+      setUserData(data || null);
+      const list = Array.isArray(data?.followedBy) ? data.followedBy : [];
+      setFollowers(list.length);
+      setIsFollowing(currentUID ? list.includes(currentUID) : false);
+    };
+    fetch();
+  }, [targetUserId, isSelf, currentUserData?.followedBy?.length || 0]);
+
+  // Live following count pour l'utilisateur consulté (autre que soi)
+  const followingQueryRef = useMemo(() => {
+    try {
+      return targetUserId
+        ? usersRef.where("followedBy", "array-contains", targetUserId)
+        : null;
+    } catch (e) {
+      return null;
+    }
+  }, [targetUserId]);
+
+  useDataFromRef({
+    ref: followingQueryRef,
+    simpleRef: false,
+    listener: true,
+    condition: !!followingQueryRef && !isSelf,
+    refreshArray: [targetUserId],
+    onUpdate: (list) => setFollowing(Array.isArray(list) ? list.length : 0),
+  });
+
+  const handleFollowUser = async () => {
+    if (!currentUID || !targetUserId || isSelf) return;
+    if (isFollowing) {
+      await unfollowUser(targetUserId);
+      setIsFollowing(false);
+      setFollowers((v) => Math.max(0, (v || 0) - 1));
+    } else {
+      await followUser(targetUserId);
+      setIsFollowing(true);
+      setFollowers((v) => (v || 0) + 1);
+    }
+  };
+
   // Composant factorisé pour afficher la liste de musiques
   const MusicListSection = ({ data, emptyText }) => (
     <ScrollView style={{ flex: 1 }}>
@@ -52,7 +124,10 @@ const Profile = () => {
           renderItem={({ item }) => (
             <MusicCard
               title={item?.title || "Sans titre"}
-              subtitle={currentUserData?.userName || "MusicLand"}
+              subtitle={
+                (isSelf ? currentUserData?.userName : userData?.userName) ||
+                "MusicLand"
+              }
               imageUri={item?.coverUrl || null}
               projectId={item?.id}
               likedBy={item?.likedBy || []}
@@ -76,33 +151,38 @@ const Profile = () => {
         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",
-                      });
-                    }
-                  },
+        extraItems={
+          isSelf
+            ? [
+                {
+                  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",
+                            });
+                          }
+                        },
+                      },
+                    }),
                 },
-              }),
-          },
-        ]}
+              ]
+            : []
+        }
       />
     </ScrollView>
   );
@@ -122,22 +202,47 @@ const Profile = () => {
     </View>
   );
 
+  // Données projets/profils selon si c'est soi ou un autre utilisateur
+  const projectsQueryRef = useMemo(() => {
+    try {
+      if (!targetUserId || isSelf) return null;
+      return projectsRef
+        .where("userId", "==", targetUserId)
+        .orderBy("updatedAt", "desc");
+    } catch (e) {
+      return null;
+    }
+  }, [targetUserId, isSelf]);
+
+  const { data: otherUserProjects = [] } = useDataFromRef({
+    ref: projectsQueryRef,
+    simpleRef: false,
+    listener: true,
+    condition: !!projectsQueryRef,
+    refreshArray: [targetUserId],
+  });
+
+  const displayedProjects = isSelf ? selfProjects : otherUserProjects;
+  const displayedPlaybacks = isSelf ? selfPlaybacks : [];
+
   return (
     <Page
       backgroundImg={background.profileBG}
       headerType="NAVIGATE"
-      hideBackButton
+      hideBackButton={isSelf}
       contentContainerStyle={{
         paddingBottom: gutters * 2,
       }}
       containerStyle={{
         backgroundColor: "#0000004D",
       }}
-      rightComponent={() => (
-        <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
-          <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
-        </Pressable>
-      )}
+      rightComponent={() =>
+        isSelf ? (
+          <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
+            <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
+          </Pressable>
+        ) : null
+      }
     >
       <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
         <View style={{ borderRadius: 20, overflow: "hidden" }}>
@@ -155,9 +260,15 @@ const Profile = () => {
             <View style={{ alignItems: "center" }}>
               <ExpoImage
                 source={
-                  currentUserData?.profilePictureURL
+                  (
+                    isSelf
+                      ? currentUserData?.profilePictureURL
+                      : userData?.profilePictureURL
+                  )
                     ? {
-                        uri: currentUserData?.profilePictureURL,
+                        uri: isSelf
+                          ? currentUserData?.profilePictureURL
+                          : userData?.profilePictureURL,
                       }
                     : img.profile
                 }
@@ -177,33 +288,77 @@ const Profile = () => {
                   fontFamily: FONT_FAMILY.InterSemiBold,
                 }}
               >
-                {currentUserData?.userName}
+                {(isSelf ? currentUserData?.userName : userData?.userName) ||
+                  "Profil"}
               </Text>
             </View>
             <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>{userProjects?.length || 0}</Text>
+                <Text style={styles.value}>
+                  {Array.isArray(displayedProjects)
+                    ? displayedProjects.length
+                    : 0}
+                </Text>
                 <Text style={styles.label}>projets</Text>
               </View>
               <Pressable
                 style={{ flex: 1, alignItems: "center" }}
-                onPress={() => push(Routes.Follows, { selected: "Abonnés" })}
+                onPress={() =>
+                  push(Routes.Follows, {
+                    selected: "Abonnés",
+                    ...(isSelf ? {} : { userId: targetUserId }),
+                  })
+                }
               >
                 <Text style={styles.value}>
-                  {currentUserData?.followedBy?.length || 0}
+                  {isSelf
+                    ? currentUserData?.followedBy?.length || 0
+                    : followers}
                 </Text>
                 <Text style={styles.label}>abonnés</Text>
               </Pressable>
               <Pressable
                 style={{ flex: 1, alignItems: "center" }}
                 onPress={() =>
-                  push(Routes.Follows, { selected: "Abonnements" })
+                  push(Routes.Follows, {
+                    selected: "Abonnements",
+                    ...(isSelf ? {} : { userId: targetUserId }),
+                  })
                 }
               >
-                <Text style={styles.value}>{followingCount}</Text>
+                <Text style={styles.value}>
+                  {isSelf ? followingCount : following}
+                </Text>
                 <Text style={styles.label}>abonnements</Text>
               </Pressable>
             </View>
+            {!isSelf && (
+              <Pressable onPress={handleFollowUser}>
+                <View
+                  style={{
+                    height: 36,
+                    borderRadius: 100,
+                    overflow: "hidden",
+                    backgroundColor: "#FFFFFF22",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "80%",
+                    alignSelf: "center",
+                    marginTop: 18,
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterSemiBold,
+                    }}
+                  >
+                    {isFollowing ? "Ne plus suivre" : "Suivre"}
+                  </Text>
+                </View>
+              </Pressable>
+            )}
           </BlurView>
         </View>
         <View
@@ -246,13 +401,13 @@ const Profile = () => {
         </View>
         {selected === "Playbacks" && (
           <MusicListSection
-            data={userPlaybacks}
+            data={displayedPlaybacks}
             emptyText="Aucun playback pour le moment"
           />
         )}
         {selected === "Chansons" && (
           <MusicListSection
-            data={userProjects}
+            data={displayedProjects}
             emptyText="Aucune chanson pour le moment"
           />
         )}

src/screens/Profile/SingerProfile.js

@@ -1,352 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import {
-  FlatList,
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import { Image as ExpoImage } from "expo-image";
-import { responsiveHeight } from "react-native-responsive-dimensions";
-import { useGlobal } from "reactn";
-import { background, icons, img } from "../../assets";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
-import GradientButton from "../../components/GradientButton";
-import MoreMenu from "../../components/MoreMenu";
-import { projectsRef } from "../../config/firebase";
-import Page from "../../layouts/Page";
-import { Routes } from "../../navigation";
-import { navigate, push } from "../../navigation/NavigationService";
-import { useUser } from "../../providers/UserDataProvider";
-import useDataFromRef from "../../hooks/useDataFromRef";
-import { usersRef } from "../../config/firebase";
-import { gutters, Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import Style, { size } from "../../styles/Style";
-import MusicCard from "../Library/components/MusicCard";
-import { BlurView } from "expo-blur";
-
-const SingerProfile = ({ route }) => {
-  const { userId } = route.params;
-  const { getUserByUid, followUser, unfollowUser } = useUser();
-  const [currentUID] = useGlobal("currentUID");
-  const [selected, setSelected] = useState("Chansons");
-  const [userData, setUserData] = useState(null);
-  const [following, setFollowing] = useState(0);
-  const [followers, setFollowers] = useState(0);
-  const fetchUserData = async () => {
-    const data = userId ? await getUserByUid(userId) : {};
-    setUserData(data);
-    const list = Array.isArray(data?.followedBy) ? data.followedBy : [];
-    setFollowers(list.length);
-    setIsFollowing(currentUID ? list.includes(currentUID) : false);
-  };
-  useEffect(() => {
-    fetchUserData();
-  }, [userId]);
-  // Live following count for the viewed user
-  const followingQueryRef = React.useMemo(() => {
-    try {
-      return userId
-        ? usersRef.where("followedBy", "array-contains", userId)
-        : null;
-    } catch (e) {
-      return null;
-    }
-  }, [userId]);
-
-  useDataFromRef({
-    ref: followingQueryRef,
-    simpleRef: false,
-    listener: true,
-    condition: !!followingQueryRef,
-    refreshArray: [userId],
-    onUpdate: (list) => setFollowing(Array.isArray(list) ? list.length : 0),
-  });
-  const onPressMenu = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
-    }
-  };
-  const [isFollowing, setIsFollowing] = useState(false);
-  const [menuTop, setMenuTop] = useState(0);
-  const [showMenu, setShowMenu] = useState(false);
-  const [selectedProjectId, setSelectedProjectId] = useState(null);
-  const userProjectsQueryRef = useMemo(() => {
-    try {
-      if (!userId) return null;
-      return projectsRef
-        .where("userId", "==", userId)
-        .orderBy("updatedAt", "desc");
-    } catch (e) {
-      return null;
-    }
-  }, [userId]);
-
-  const { data: userProjects = [] } = useDataFromRef({
-    ref: userProjectsQueryRef,
-    simpleRef: false,
-    listener: true,
-    condition: !!userProjectsQueryRef,
-    refreshArray: [userId],
-  });
-
-  const EmptyText = ({ text }) => (
-    <View style={{ flex: 1, ...Style.containerCenter, paddingTop: 20 }}>
-      <Text
-        style={{
-          fontSize: 14,
-          color: Palette.white,
-          fontFamily: FONT_FAMILY.InterRegular,
-          opacity: 0.8,
-        }}
-      >
-        {text}
-      </Text>
-    </View>
-  );
-  const handleFollowUser = async () => {
-    if (!currentUID || !userId || currentUID === userId) return;
-    if (isFollowing) {
-      await unfollowUser(userId);
-      setIsFollowing(false);
-      setFollowers((v) => Math.max(0, (v || 0) - 1));
-    } else {
-      await followUser(userId);
-      setIsFollowing(true);
-      setFollowers((v) => (v || 0) + 1);
-    }
-  };
-  return (
-    <Page
-      backgroundImg={background.profileBG}
-      headerType="NAVIGATE"
-      contentContainerStyle={{
-        paddingBottom: gutters * 2,
-      }}
-      containerStyle={{
-        backgroundColor: "#0000004D",
-      }}
-      rightComponent={() => (
-        <Pressable>
-          <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
-        </Pressable>
-      )}
-    >
-      <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
-        <View style={{ borderRadius: 20, overflow: "hidden" }}>
-          <BlurView
-            intensity={20}
-            style={{
-              paddingVertical: 14,
-              backgroundColor: Palette.glass,
-              paddingHorizontal: 20,
-            }}
-            experimentalBlurMethod={
-              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-            }
-          >
-            <View style={{ alignItems: "center" }}>
-              <ExpoImage
-                source={
-                  userData?.profilePictureURL
-                    ? {
-                        uri: userData?.profilePictureURL,
-                      }
-                    : img.profile
-                }
-                cachePolicy="memory-disk"
-                priority="high"
-                contentFit="cover"
-                transition={100}
-                style={{
-                  ...size({ size: 108 }),
-                  borderRadius: 100,
-                }}
-              />
-              <Text
-                style={{
-                  fontSize: 22,
-                  color: Palette.white,
-                  fontFamily: FONT_FAMILY.InterSemiBold,
-                }}
-              >
-                {userData?.userName}
-              </Text>
-            </View>
-            <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
-              <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>
-                  {Array.isArray(userProjects) ? userProjects.length : 0}
-                </Text>
-                <Text style={styles.label}>projets</Text>
-              </View>
-              <Pressable
-                style={{ flex: 1, alignItems: "center" }}
-                onPress={() =>
-                  push(Routes.Follows, { selected: "Abonnés", userId })
-                }
-              >
-                <Text style={styles.value}>{followers}</Text>
-                <Text style={styles.label}>abonnés</Text>
-              </Pressable>
-              <Pressable
-                style={{ flex: 1, alignItems: "center" }}
-                onPress={() =>
-                  push(Routes.Follows, { selected: "Abonnements", userId })
-                }
-              >
-                <Text style={styles.value}>{following}</Text>
-                <Text style={styles.label}>abonnements</Text>
-              </Pressable>
-            </View>
-            {currentUID !== userId && (
-              <GradientButton
-                onPress={handleFollowUser}
-                title={isFollowing ? "Ne plus suivre" : "Suivre"}
-                containerStyle={{
-                  width: "80%",
-                  alignSelf: "center",
-                  marginTop: 18,
-                }}
-              />
-            )}
-          </BlurView>
-        </View>
-        <View
-          style={{
-            ...Style.containerRow,
-            gap: 6,
-          }}
-        >
-          {["Playbacks", "Clips", "Chansons"].map((item, index) => (
-            <Pressable
-              key={index}
-              onPress={() => onPressMenu(item)}
-              style={{ flex: 1 }}
-            >
-              <BorderGradient
-                gradientProps={{
-                  colors:
-                    selected === item
-                      ? ["#FFFFFF00", "#FFFFFF"]
-                      : [Palette.tran, Palette.tran],
-                  locations: [0, 1],
-                  start: { x: 0, y: 0 },
-                  end: { x: 1, y: 0 },
-                }}
-                style={styles.borderGradient}
-              />
-              <View style={styles.blurContainer}>
-                <BlurView
-                  intensity={20}
-                  style={styles.blurView}
-                  experimentalBlurMethod={
-                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                  }
-                >
-                  <Text style={styles.menu}>{item}</Text>
-                </BlurView>
-              </View>
-            </Pressable>
-          ))}
-        </View>
-        {selected === "Playbacks" && (
-          <View style={{ flex: 1 }}>
-            <EmptyText text={"Aucun playback pour le moment"} />
-          </View>
-        )}
-        {selected === "Chansons" && (
-          <View style={{ flex: 1 }}>
-            {Array.isArray(userProjects) && userProjects.length > 0 ? (
-              <FlatList
-                data={userProjects}
-                contentContainerStyle={{
-                  gap: 10,
-                }}
-                keyExtractor={(item) => item.id}
-                renderItem={({ item }) => (
-                  <MusicCard
-                    title={item?.title || "Sans titre"}
-                    subtitle={userData?.userName || "MusicLand"}
-                    imageUri={item?.coverUrl || null}
-                    projectId={item?.id}
-                    likedBy={item?.likedBy || []}
-                    onPress={() =>
-                      navigate(Routes.MusicDetails, { projectId: item.id })
-                    }
-                    onPressMore={(posTop) => {
-                      setSelectedProjectId(item.id);
-                      setMenuTop(posTop);
-                      setShowMenu((prev) => !prev || posTop !== menuTop);
-                    }}
-                  />
-                )}
-              />
-            ) : (
-              <EmptyText text={"Aucune chanson pour le moment"} />
-            )}
-          </View>
-        )}
-
-        {selected === "Clips" && (
-          <View style={{ flex: 1 }}>
-            <EmptyText text={"Aucun clip pour le moment"} />
-          </View>
-        )}
-        <MoreMenu
-          visible={showMenu}
-          top={menuTop}
-          onClose={() => setShowMenu(false)}
-          inPlaylist={false}
-          projectId={selectedProjectId}
-        />
-      </View>
-    </Page>
-  );
-};
-
-export default SingerProfile;
-
-const styles = StyleSheet.create({
-  value: {
-    fontSize: 16,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
-  label: {
-    fontSize: 12,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
-  menu: {
-    fontSize: 12,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
-  borderGradient: {
-    borderWidth: 1,
-    borderRadius: 10,
-    height: 33,
-    position: "absolute",
-    zIndex: 1,
-    width: "100%",
-  },
-  blurContainer: {
-    height: 33,
-    zIndex: -1,
-    borderRadius: 10,
-    overflow: "hidden",
-    backgroundColor: Palette.glass,
-  },
-  blurView: {
-    width: "100%",
-    height: "100%",
-    paddingHorizontal: 10,
-    ...Style.containerCenter,
-  },
-});