follow users

src/screens/Profile/SingerProfile.js

@@ -1,5 +1,5 @@
 import { BlurView } from "expo-blur";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   FlatList,
   Image,
@@ -14,14 +14,46 @@ import { background, icons, img } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import GradientButton from "../../components/GradientButton";
 import Page from "../../layouts/Page";
+import { useUser } from "../../providers/UserDataProvider";
+import { getFollowersCount, getFollowingCount } from "../../services/follows";
+import { useGlobal } from "reactn";
+import { followsRef } 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";
-
-const SingerProfile = () => {
+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(null);
-
+  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);
+  };
+  useEffect(() => {
+    fetchUserData();
+  }, [userId]);
+  useEffect(() => {
+    if (!userId) return;
+    getFollowersCount(userId).then(setFollowers);
+    getFollowingCount(userId).then(setFollowing);
+    (async () => {
+      try {
+        if (currentUID && userId) {
+          const doc = await followsRef.doc(`${currentUID}_${userId}`).get();
+          setIsFollowing(!!doc?.exists);
+        } else {
+          setIsFollowing(false);
+        }
+      } catch (_) {}
+    })();
+  }, [userId, currentUID]);
+  console.log("following", following);
   const onPressMenu = (item) => {
     if (selected === item) {
       setSelected(null);
@@ -29,7 +61,19 @@ const SingerProfile = () => {
       setSelected(item);
     }
   };
-
+  const [isFollowing, setIsFollowing] = useState(false);
+  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}
@@ -74,7 +118,7 @@ const SingerProfile = () => {
                   fontFamily: FONT_FAMILY.InterSemiBold,
                 }}
               >
-                elia.mrn
+                {userData?.userName}
               </Text>
             </View>
             <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
@@ -83,22 +127,25 @@ const SingerProfile = () => {
                 <Text style={styles.label}>playbacks</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>880</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}>6</Text>
+                <Text style={styles.value}>{following}</Text>
                 <Text style={styles.label}>abonnements</Text>
               </View>
             </View>
-            <GradientButton
-              title="Suivre"
-              containerStyle={{
-                width: "80%",
-                alignSelf: "center",
-                marginTop: 18,
-              }}
-            />
+            {currentUID !== userId && (
+              <GradientButton
+                onPress={handleFollowUser}
+                title={isFollowing ? "Ne plus suivre" : "Suivre"}
+                containerStyle={{
+                  width: "80%",
+                  alignSelf: "center",
+                  marginTop: 18,
+                }}
+              />
+            )}
           </BlurView>
         </View>
         <View