add suggested follow section to profile header (#1481)

* add suggested follow section to profile header

* fix button overflow

* don't even render on preview

* fix useFollowDid and FollowButton race condition

* add section header, close button, active state

* lighten icon

src/view/com/profile/FollowButton.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import {StyleProp, TextStyle, 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'
+import {useFollowDid} from 'lib/hooks/useFollowDid'
 
 export const FollowButton = observer(function FollowButtonImpl({
   unfollowedType = 'inverted',
@@ -19,44 +19,27 @@ export const FollowButton = observer(function FollowButtonImpl({
   onToggleFollow?: (v: boolean) => void
   labelStyle?: StyleProp<TextStyle>
 }) {
-  const store = useStores()
-  const followState = store.me.follows.getFollowState(did)
+  const {state, following, toggle} = useFollowDid({did})
 
-  if (followState === FollowState.Unknown) {
-    return <View />
-  }
-
-  const onToggleFollowInner = async () => {
-    const updatedFollowState = await store.me.follows.fetchFollowState(did)
-    if (updatedFollowState === FollowState.Following) {
-      try {
-        onToggleFollow?.(false)
-        await store.agent.deleteFollow(store.me.follows.getFollowUri(did))
-        store.me.follows.removeFollow(did)
-      } catch (e: any) {
-        store.log.error('Failed to delete follow', e)
-        Toast.show('An issue occurred, please try again.')
-      }
-    } else if (updatedFollowState === FollowState.NotFollowing) {
-      try {
-        onToggleFollow?.(true)
-        const res = await store.agent.follow(did)
-        store.me.follows.addFollow(did, res.uri)
-      } catch (e: any) {
-        store.log.error('Failed to create follow', e)
-        Toast.show('An issue occurred, please try again.')
-      }
+  const onPress = React.useCallback(async () => {
+    try {
+      const {following} = await toggle()
+      onToggleFollow?.(following)
+    } catch (e: any) {
+      Toast.show('An issue occurred, please try again.')
     }
+  }, [toggle, onToggleFollow])
+
+  if (state === FollowState.Unknown) {
+    return <View />
   }
 
   return (
     <Button
-      type={
-        followState === FollowState.Following ? followedType : unfollowedType
-      }
+      type={following ? followedType : unfollowedType}
       labelStyle={labelStyle}
-      onPress={onToggleFollowInner}
-      label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
+      onPress={onPress}
+      label={following ? 'Unfollow' : 'Follow'}
       withLoading={true}
     />
   )