singer profile

src/screens/Profile/SingerProfile.js

@@ -14,23 +14,23 @@ 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 { followsRef, projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { getFollowersCount, getFollowingCount } from "../../services/follows";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
-import { navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
 const SingerProfile = ({ route }) => {
   const { userId } = route.params;
   const { getUserByUid, followUser, unfollowUser } = useUser();
   const [currentUID] = useGlobal("currentUID");
-  console.log("user id ", userId);
+  const [selected, setSelected] = useState("Chansons");
-  const [selected, setSelected] = useState(null);
   const [userData, setUserData] = useState(null);
   const [following, setFollowing] = useState(0);
   const [followers, setFollowers] = useState(0);
@@ -56,7 +56,6 @@ const SingerProfile = ({ route }) => {
       } catch (_) {}
     })();
   }, [userId, currentUID]);
-  console.log("following", following);
   const onPressMenu = (item) => {
     if (selected === item) {
       setSelected(null);
@@ -65,10 +64,15 @@ const SingerProfile = ({ route }) => {
     }
   };
   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");
+      return projectsRef
+        .where("userId", "==", userId)
+        .orderBy("updatedAt", "desc");
     } catch (e) {
       return null;
     }
@@ -125,8 +129,10 @@ const SingerProfile = ({ route }) => {
             <View style={{ alignItems: "center" }}>
               <Image
                 source={
-                  userData?.pictureUrl || userData?.profilePictureURL || userData?.photoURL
+                  userData?.profilePictureURL
-                    ? { uri: userData?.pictureUrl || userData?.profilePictureURL || userData?.photoURL }
+                    ? {
+                        uri: userData?.profilePictureURL,
+                      }
                     : img.profile
                 }
                 style={{
@@ -146,7 +152,9 @@ const SingerProfile = ({ route }) => {
             </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.value}>
+                  {Array.isArray(userProjects) ? userProjects.length : 0}
+                </Text>
                 <Text style={styles.label}>playbacks</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
@@ -255,13 +263,26 @@ const SingerProfile = ({ route }) => {
                   imageUri={item?.coverUrl || null}
                   projectId={item?.id}
                   likedBy={item?.likedBy || []}
-                  onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+                  onPress={() =>
-                  onPressMore={() => {}}
+                    navigate(Routes.MusicDetails, { projectId: item.id })
+                  }
+                  onPressMore={(posTop) => {
+                    setSelectedProjectId(item.id);
+                    setMenuTop(posTop);
+                    setShowMenu((prev) => !prev || posTop !== menuTop);
+                  }}
                 />
               )}
             />
           </View>
         )}
+        <MoreMenu
+          visible={showMenu}
+          top={menuTop}
+          onClose={() => setShowMenu(false)}
+          inPlaylist={false}
+          projectId={selectedProjectId}
+        />
       </View>
     </Page>
   );