questionable following bug

GenerateNU · Nov 5, 2024 · 452e710 · 452e710
1 parent c7e69d9
commit 452e710
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 19 deletions.
diff --git a/frontend/app/(app)/user/components/header.tsx b/frontend/app/(app)/user/components/header.tsx
@@ -16,27 +16,28 @@ const Header = ({ id }: { id: string }) => {
   const followMutation = useFollowUser();
   const [isFollowing, setIsFollowing] = useState(false);
 
+  useEffect(() => {
+    if (data && data.user && Array.isArray(data.user.followers)) {
+      const isUserFollowing = data.user.followers.includes(mongoDBId);
+      setIsFollowing(isUserFollowing);
+    }
+  }, [data, mongoDBId]);
+
   const handleFollowToggle = useCallback(async () => {
+    if (!supabaseId) {
+      console.error('supabaseId is null');
+      return;
+    }
+
+    setIsFollowing((prevIsFollowing) => !prevIsFollowing);
+
     try {
-      if (supabaseId) {
-        await followMutation.mutateAsync({ id: supabaseId, followUserId: id });
-      } else {
-        console.error('supabaseId is null');
-      }
-      setIsFollowing((prevState) => !prevState);
+      await followMutation.mutateAsync({ id: supabaseId, followUserId: id });
     } catch (error) {
       console.error('Error toggling follow status:', error);
+      setIsFollowing((prevIsFollowing) => !prevIsFollowing);
     }
-  }, [followMutation, id]);
-
-  useEffect(() => {
-    if (data && data.user) {
-      const follow = data.user.followers.some(
-        (follower: string) => follower === mongoDBId,
-      );
-      setIsFollowing(follow);
-    }
-  }, [data, mongoDBId]);
+  }, [followMutation, id, supabaseId]);
 
   if (isLoading) {
     return <HeaderSkeleton />;
@@ -71,7 +72,9 @@ const Header = ({ id }: { id: string }) => {
       </View>
       <View className="flex flex-row justify-between py-[5%]">
         <View>
-          <Text className="font-bold text-xl text-darkblue">First Last</Text>
+          <Text className="font-bold text-xl text-darkblue">
+            {data?.user.name || 'First Last'}
+          </Text>
           <Text className="text-ocean">{`@${data?.user.username}`}</Text>
         </View>
         {id !== supabaseId && (

diff --git a/frontend/auth/authStore.ts b/frontend/auth/authStore.ts
@@ -38,7 +38,6 @@ export const useAuthStore = create<AuthState>(
 
       clearStorage: async () => {
         try {
-          // Clear all auth-related items from AsyncStorage
           await AsyncStorage.multiRemove([
             'auth-storage',
             'supabase.auth.token',

diff --git a/frontend/hooks/user.ts b/frontend/hooks/user.ts
@@ -43,8 +43,41 @@ export const useFollowUser = () => {
     onSuccess: (_, { id }) => {
       queryClient.invalidateQueries({ queryKey: ['user', id] });
       queryClient.invalidateQueries({ queryKey: ['user'] });
+
+      queryClient.setQueryData(['user', id], (oldData: any) => {
+        if (
+          !oldData ||
+          !oldData.user ||
+          !Array.isArray(oldData.user.followers)
+        ) {
+          return oldData;
+        }
+
+        const currentUser = queryClient.getQueryData(['user']) as any;
+        const currentUserId = currentUser?.user?.id;
+
+        if (!currentUserId) return oldData;
+
+        const isCurrentlyFollowing = oldData.user.followers.some(
+          (follower: { id: string }) => follower.id === currentUserId,
+        );
+
+        const updatedFollowers = isCurrentlyFollowing
+          ? oldData.user.followers.filter(
+              (follower: { id: string }) => follower.id !== currentUserId,
+            )
+          : [...oldData.user.followers, { id: currentUserId }];
+
+        return {
+          ...oldData,
+          user: {
+            ...oldData.user,
+            followers: updatedFollowers,
+          },
+        };
+      });
     },
-    onError: (error) => {
+    onError: (error: any) => {
       console.error('Error toggling follow status:', error);
       queryClient.invalidateQueries({ queryKey: ['user'] });
     },