Fix 651 Make followers and following button into a `<Link>` (#1429)

* make followers and following button into a Link

* make buttons into `<a>` tags

2 files changed, 25 insertions, 26 deletions

diff --git a/src/lib/analytics/types.ts b/src/lib/analytics/types.ts
index 5f9437319..4fcd3ebd2 100644
--- a/src/lib/analytics/types.ts
+++ b/src/lib/analytics/types.ts
@@ -56,8 +56,12 @@ interface TrackPropertiesMap {
   }
   // PROFILE HEADER events
   'ProfileHeader:EditProfileButtonClicked': {}
-  'ProfileHeader:FollowersButtonClicked': {}
-  'ProfileHeader:FollowsButtonClicked': {}
+  'ProfileHeader:FollowersButtonClicked': {
+    handle: string
+  }
+  'ProfileHeader:FollowsButtonClicked': {
+    handle: string
+  }
   'ProfileHeader:ShareButtonClicked': {}
   'ProfileHeader:MuteAccountButtonClicked': {}
   'ProfileHeader:UnmuteAccountButtonClicked': {}
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index b52d338aa..cafb37743 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -33,11 +33,11 @@ import {isNative} from 'platform/detection'
 import {FollowState} from 'state/models/cache/my-follows'
 import {shareUrl} from 'lib/sharing'
 import {formatCount} from '../util/numeric/format'
-import {navigate} from '../../../Navigation'
 import {NativeDropdown, DropdownItem} from '../util/forms/NativeDropdown'
 import {BACK_HITSLOP} from 'lib/constants'
 import {isInvalidHandle} from 'lib/strings/handles'
 import {makeProfileLink} from 'lib/routes/links'
+import {Link} from '../util/Link'
 
 interface Props {
   view: ProfileModel
@@ -152,21 +152,14 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
     })
   }, [track, store, view, onRefreshAll])
 
-  const onPressFollowers = React.useCallback(() => {
-    track('ProfileHeader:FollowersButtonClicked')
-    navigate('ProfileFollowers', {
-      name: isInvalidHandle(view.handle) ? view.did : view.handle,
-    })
-    store.shell.closeAllActiveElements() // for when used in the profile preview modal
-  }, [track, view, store.shell])
-
-  const onPressFollows = React.useCallback(() => {
-    track('ProfileHeader:FollowsButtonClicked')
-    navigate('ProfileFollows', {
-      name: isInvalidHandle(view.handle) ? view.did : view.handle,
-    })
-    store.shell.closeAllActiveElements() // for when used in the profile preview modal
-  }, [track, view, store.shell])
+  const trackPress = React.useCallback(
+    (f: 'Followers' | 'Follows') => {
+      track(`ProfileHeader:${f}ButtonClicked`, {
+        handle: view.handle,
+      })
+    },
+    [track, view],
+  )
 
   const onPressShare = React.useCallback(() => {
     track('ProfileHeader:ShareButtonClicked')
@@ -460,11 +453,12 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
         {!blockHide && (
           <>
             <View style={styles.metricsLine}>
-              <TouchableOpacity
+              <Link
                 testID="profileHeaderFollowersButton"
                 style={[s.flexRow, s.mr10]}
-                onPress={onPressFollowers}
-                accessibilityRole="button"
+                href={makeProfileLink(view, 'followers')}
+                onPressOut={() => trackPress('Followers')}
+                asAnchor
                 accessibilityLabel={`${followers} ${pluralizedFollowers}`}
                 accessibilityHint={'Opens followers list'}>
                 <Text type="md" style={[s.bold, pal.text]}>
@@ -473,12 +467,13 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
                 <Text type="md" style={[pal.textLight]}>
                   {pluralizedFollowers}
                 </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
+              </Link>
+              <Link
                 testID="profileHeaderFollowsButton"
                 style={[s.flexRow, s.mr10]}
-                onPress={onPressFollows}
-                accessibilityRole="button"
+                href={makeProfileLink(view, 'follows')}
+                onPressOut={() => trackPress('Follows')}
+                asAnchor
                 accessibilityLabel={`${following} following`}
                 accessibilityHint={'Opens following list'}>
                 <Text type="md" style={[s.bold, pal.text]}>
@@ -487,7 +482,7 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
                 <Text type="md" style={[pal.textLight]}>
                   following
                 </Text>
-              </TouchableOpacity>
+              </Link>
               <Text type="md" style={[s.bold, pal.text]}>
                 {formatCount(view.postsCount)}{' '}
                 <Text type="md" style={[pal.textLight]}>