Rework the me.follows cache to reduce network load (#384)

1 files changed, 12 insertions, 5 deletions

diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index f22eb9b4a..f799e26f2 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
+import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {Button, ButtonType} from '../util/forms/Button'
 import {useStores} from 'state/index'
 import * as Toast from '../util/Toast'
+import {FollowState} from 'state/models/cache/my-follows'
 
 const FollowButton = observer(
   ({
@@ -15,10 +17,15 @@ const FollowButton = observer(
     onToggleFollow?: (v: boolean) => void
   }) => {
     const store = useStores()
-    const isFollowing = store.me.follows.isFollowing(did)
+    const followState = store.me.follows.getFollowState(did)
+
+    if (followState === FollowState.Unknown) {
+      return <View />
+    }
 
     const onToggleFollowInner = async () => {
-      if (store.me.follows.isFollowing(did)) {
+      const updatedFollowState = await store.me.follows.fetchFollowState(did)
+      if (updatedFollowState === FollowState.Following) {
         try {
           await store.agent.deleteFollow(store.me.follows.getFollowUri(did))
           store.me.follows.removeFollow(did)
@@ -27,7 +34,7 @@ const FollowButton = observer(
           store.log.error('Failed fo delete follow', e)
           Toast.show('An issue occurred, please try again.')
         }
-      } else {
+      } else if (updatedFollowState === FollowState.NotFollowing) {
         try {
           const res = await store.agent.follow(did)
           store.me.follows.addFollow(did, res.uri)
@@ -41,9 +48,9 @@ const FollowButton = observer(
 
     return (
       <Button
-        type={isFollowing ? 'default' : type}
+        type={followState === FollowState.Following ? 'default' : type}
         onPress={onToggleFollowInner}
-        label={isFollowing ? 'Unfollow' : 'Follow'}
+        label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
       />
     )
   },