edit profile

src/screens/Profile/Profile.js

@@ -1,5 +1,5 @@
 import { BlurView } from "expo-blur";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   FlatList,
   Image,
@@ -22,24 +22,29 @@ 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 { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { gutters, size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
-
 const Profile = () => {
   const [selected, setSelected] = useState("Chansons");
   const [currentUserData] = useGlobal("currentUserData");
-  const { userProjects } = useUser();
+  const { userProjects, currentUID } = useUser();
   const [, setTooltip] = useGlobal("_tooltip");
   const [menuTop, setMenuTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
-
+  const [following, setFollowing] = useState(0);
+  const [followers, setFollowers] = useState(0);
   const onPressMenu = (item) => {
     setSelected(item);
   };
-
+  useEffect(() => {
+    if (!currentUID) return;
+    getFollowersCount(currentUID).then(setFollowers);
+    getFollowingCount(currentUID).then(setFollowing);
+  }, [currentUID]);
   return (
     <Page
       backgroundImg={background.profileBG}
@@ -72,7 +77,13 @@ const Profile = () => {
           >
             <View style={{ alignItems: "center" }}>
               <Image
-                source={img.profile}
+                source={
+                  currentUserData?.profilePictureURL
+                    ? {
+                        uri: currentUserData?.profilePictureURL,
+                      }
+                    : img.profile
+                }
                 style={{
                   ...size({ size: 108 }),
                   borderRadius: 100,
@@ -96,15 +107,11 @@ const Profile = () => {
                 <Text style={styles.label}>playbacks</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>
-                  {currentUserData?.followBy?.length || 0}
-                </Text>
+                <Text style={styles.value}>{followers}</Text>
                 <Text style={styles.label}>abonnés</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>
-                  {currentUserData?.following?.length || 0}
-                </Text>
+                <Text style={styles.value}>{following}</Text>
                 <Text style={styles.label}>abonnements</Text>
               </View>
             </View>