feat: Use local state for follow button to improve responsiveness

src/screens/profile/generic-profile.tsx

@@ -15,6 +15,7 @@ import {
   Callout,
   Icons,
   LazyListProps,
+  FollowButton,
 } from "@greeneggs/ui";
 import { useMutation, useQuery } from "@apollo/client";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -155,20 +156,6 @@ export const GenericProfile = ({
     },
   });
 
-  const [followUser] = useMutation<FollowUser>(Mutations.FOLLOW_USER, {
-    variables: {
-      userId,
-    },
-    refetchQueries: [Queries.GET_PROFILE, "profile"],
-  });
-
-  const [unfollowUser] = useMutation<FollowUser>(Mutations.UNFOLLOW_USER, {
-    variables: {
-      userId,
-    },
-    refetchQueries: [Queries.GET_PROFILE, "profile"],
-  });
-
   const [myRecipeQuery, setMyRecipeQuery] = useState("");
 
   if (profileResult.loading) {
@@ -239,16 +226,7 @@ export const GenericProfile = ({
                   EDIT
                 </Button>
               ) : (
-                <Button
-                  size="small"
-                  onPress={
-                    profile.isFollowing
-                      ? () => unfollowUser()
-                      : () => followUser()
-                  }
-                >
-                  {profile.isFollowing ? "UNFOLLOW" : "FOLLOW"}
-                </Button>
+                <FollowButton isFollowing={profile.isFollowing ?? false} userId={userId} />
               )}
             </View>
             {profile.bio ? (

src/ui/follow-button.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState } from 'react';
+import { Button } from '@ui-kitten/components';
+import { useMutation } from '@apollo/client';
+import { FollowUser, UnfollowUser } from '@greeneggs/types/graphql';
+import { Mutations, Queries } from '@greeneggs/graphql';
+
+interface FollowButtonProps {
+  userId: string;
+  isFollowing: boolean;
+
+}
+
+export const FollowButton: FC<FollowButtonProps> = ({ userId, isFollowing }) => {
+  const [isFollowingState, setIsFollowingState] = useState(isFollowing);
+  const [followUser] = useMutation<FollowUser>(Mutations.FOLLOW_USER, {
+    variables: {
+      userId,
+    },
+    refetchQueries: [Queries.GET_PROFILE, "profile"],
+  });
+
+  const [unfollowUser] = useMutation<UnfollowUser>(Mutations.UNFOLLOW_USER, {
+    variables: {
+      userId,
+    },
+    refetchQueries: [Queries.GET_PROFILE, "profile"],
+  });
+
+  function handleFollowUser() {
+    setIsFollowingState(true);
+    followUser().catch(() => {
+      // Undo local state change if mutation fails
+      setIsFollowingState(false);
+    });
+  }
+
+  function handleUnfollowUser() {
+    setIsFollowingState(false);
+    unfollowUser().catch(() => {
+      // Undo local state change if mutation fails
+      setIsFollowingState(true);
+    });
+  }
+
+  return (
+    <Button
+      size="small"
+      onPress={
+        isFollowingState
+          ? () => handleUnfollowUser()
+          : () => handleFollowUser()
+      }
+    >
+      {isFollowingState ? "UNFOLLOW" : "FOLLOW"}
+    </Button>
+  )
+}

src/ui/index.ts

@@ -18,4 +18,5 @@ export * from './counters/comment-like-counter';
 export * from './counters/comment-counter';
 export * from './save-recipe-button';
 export * from './empty-state';
-export * from './hide-on-keyboard';
+export * from './hide-on-keyboard';
+export * from './follow-button';