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

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'}
       />
     )
   },

src/view/com/profile/ProfileHeader.tsx

@@ -30,6 +30,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {isDesktopWeb} from 'platform/detection'
+import {FollowState} from 'state/models/cache/my-follows'
 
 const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
 
@@ -219,7 +220,8 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
             </TouchableOpacity>
           ) : (
             <>
-              {store.me.follows.isFollowing(view.did) ? (
+              {store.me.follows.getFollowState(view.did) ===
+              FollowState.Following ? (
                 <TouchableOpacity
                   testID="unfollowBtn"
                   onPress={onPressToggleFollow}

src/view/com/util/PostMeta.tsx

@@ -8,6 +8,7 @@ import {useStores} from 'state/index'
 import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
 import FollowButton from '../profile/FollowButton'
+import {FollowState} from 'state/models/cache/my-follows'
 
 interface PostMetaOpts {
   authorAvatar?: string
@@ -25,15 +26,22 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
   const handle = opts.authorHandle
   const store = useStores()
   const isMe = opts.did === store.me.did
-  const isFollowing =
-    typeof opts.did === 'string' && store.me.follows.isFollowing(opts.did)
+  const followState =
+    typeof opts.did === 'string'
+      ? store.me.follows.getFollowState(opts.did)
+      : FollowState.Unknown
 
   const [didFollow, setDidFollow] = React.useState(false)
   const onToggleFollow = React.useCallback(() => {
     setDidFollow(true)
   }, [setDidFollow])
 
-  if (opts.showFollowBtn && !isMe && (!isFollowing || didFollow) && opts.did) {
+  if (
+    opts.showFollowBtn &&
+    !isMe &&
+    (followState === FollowState.NotFollowing || didFollow) &&
+    opts.did
+  ) {
     // two-liner with follow button
     return (
       <View style={styles.metaTwoLine}>