2 files changed, 61 insertions, 45 deletions
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
new file mode 100644
index 000000000..71462bea8
--- /dev/null
+++ b/src/view/com/profile/FollowButton.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {Text} from '../util/text/Text'
+import {useStores} from 'state/index'
+import * as apilib from 'lib/api/index'
+import * as Toast from '../util/Toast'
+import {usePalette} from 'lib/hooks/usePalette'
+
+const FollowButton = observer(
+  ({did, declarationCid}: {did: string; declarationCid: string}) => {
+    const store = useStores()
+    const pal = usePalette('default')
+    const isFollowing = store.me.follows.isFollowing(did)
+
+    const onToggleFollow = async () => {
+      if (store.me.follows.isFollowing(did)) {
+        try {
+          await apilib.unfollow(store, store.me.follows.getFollowUri(did))
+          store.me.follows.removeFollow(did)
+        } catch (e: any) {
+          store.log.error('Failed fo delete follow', e)
+          Toast.show('An issue occurred, please try again.')
+        }
+      } else {
+        try {
+          const res = await apilib.follow(store, did, declarationCid)
+          store.me.follows.addFollow(did, res.uri)
+        } catch (e: any) {
+          store.log.error('Failed fo create follow', e)
+          Toast.show('An issue occurred, please try again.')
+        }
+      }
+    }
+
+    return (
+      <TouchableOpacity onPress={onToggleFollow}>
+        <View style={[styles.btn, pal.btn]}>
+          <Text type="button" style={[pal.text]}>
+            {isFollowing ? 'Unfollow' : 'Follow'}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    )
+  },
+)
+
+export default FollowButton
+
+const styles = StyleSheet.create({
+  btn: {
+    paddingVertical: 7,
+    borderRadius: 50,
+    marginLeft: 6,
+    paddingHorizontal: 14,
+  },
+})
diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index 6a136a02d..3c487b70f 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -1,14 +1,13 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
 import {UserAvatar} from '../util/UserAvatar'
-import * as Toast from '../util/Toast'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
-import * as apilib from 'lib/api/index'
+import FollowButton from './FollowButton'
 
 export function ProfileCard({
   handle,
@@ -102,26 +101,7 @@ export const ProfileCardWithFollowBtn = observer(
   }) => {
     const store = useStores()
     const isMe = store.me.handle === handle
-    const isFollowing = store.me.follows.isFollowing(did)
-    const onToggleFollow = async () => {
-      if (store.me.follows.isFollowing(did)) {
-        try {
-          await apilib.unfollow(store, store.me.follows.getFollowUri(did))
-          store.me.follows.removeFollow(did)
-        } catch (e: any) {
-          store.log.error('Failed fo delete follow', e)
-          Toast.show('An issue occurred, please try again.')
-        }
-      } else {
-        try {
-          const res = await apilib.follow(store, did, declarationCid)
-          store.me.follows.addFollow(did, res.uri)
-        } catch (e: any) {
-          store.log.error('Failed fo create follow', e)
-          Toast.show('An issue occurred, please try again.')
-        }
-      }
-    }
+
     return (
       <ProfileCard
         handle={handle}
@@ -132,34 +112,13 @@ export const ProfileCardWithFollowBtn = observer(
         renderButton={
           isMe
             ? undefined
-            : () => (
-                <FollowBtn isFollowing={isFollowing} onPress={onToggleFollow} />
-              )
+            : () => <FollowButton did={did} declarationCid={declarationCid} />
         }
       />
     )
   },
 )
 
-function FollowBtn({
-  isFollowing,
-  onPress,
-}: {
-  isFollowing: boolean
-  onPress: () => void
-}) {
-  const pal = usePalette('default')
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <View style={[styles.btn, pal.btn]}>
-        <Text type="button" style={[pal.text]}>
-          {isFollowing ? 'Unfollow' : 'Follow'}
-        </Text>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
 const styles = StyleSheet.create({
   outer: {
     borderTopWidth: 1,