follow from reel

src/screens/Playbacks.js

@@ -1,13 +1,21 @@
 import { useAudioPlayer } from "expo-audio";
 import { BlurView } from "expo-blur";
 import { VideoView, useVideoPlayer } from "expo-video";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { icons, img } from "../assets";
-import { arrayRemove, arrayUnion, projectsRef } from "../config/firebase";
+import { arrayRemove, arrayUnion, projectsRef, usersRef } from "../config/firebase";
 import useDataFromRef from "../hooks/useDataFromRef";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
 import { useUser } from "../providers/UserDataProvider";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
@@ -33,7 +41,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   const [owner, setOwner] = useState(
     item?.userId && userCache?.current?.get(item.userId)
       ? userCache.current.get(item.userId)
-      : null,
+      : null
   );
   useEffect(() => {
     let cancelled = false;
@@ -59,6 +67,25 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     };
   }, [item?.userId, userCache, getUserByUid]);
 
+  // Live sync owner from Firestore to reflect follow changes elsewhere
+  useEffect(() => {
+    const uid = item?.userId;
+    if (!uid) return;
+    const unsub = usersRef.doc(uid).onSnapshot(
+      (doc) => {
+        if (doc?.exists) {
+          const data = { id: doc.id, ...doc.data() };
+          setOwner(data);
+          try {
+            userCache?.current?.set(uid, data);
+          } catch (e) {}
+        }
+      },
+      () => {},
+    );
+    return () => unsub?.();
+  }, [item?.userId, userCache]);
+
   // Follow state derived from owner.followedBy
   const [isFollowing, setIsFollowing] = useState(false);
   useEffect(() => {
@@ -171,7 +198,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
           }}
         >
           <View style={{ gap: 6, alignItems: "center" }}>
-            <Pressable>
+            <Pressable
+              onPress={() => {
+                navigate(Routes.SingerProfile, { userId: item?.userId });
+              }}
+            >
               {owner?.profilePictureURL ? (
                 <Image
                   source={{ uri: owner.profilePictureURL }}
@@ -237,7 +268,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                       fontFamily: FONT_FAMILY.InterMedium,
                     }}
                   >
-                    {isFollowing ? "Suivi" : "Suivre"}
+                    {isFollowing ? "Ne plus suivre" : "Suivre"}
                   </Text>
                 </BlurView>
               </Pressable>