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

* make followers and following button into a Link

* make buttons into `<a>` tags

src/lib/analytics/types.ts

@@ -56,8 +56,12 @@ interface TrackPropertiesMap {
   }
   // PROFILE HEADER events
   'ProfileHeader:EditProfileButtonClicked': {}
-  'ProfileHeader:FollowersButtonClicked': {}
+  'ProfileHeader:FollowersButtonClicked': {
-  'ProfileHeader:FollowsButtonClicked': {}
+    handle: string
+  }
+  'ProfileHeader:FollowsButtonClicked': {
+    handle: string
+  }
   'ProfileHeader:ShareButtonClicked': {}
   'ProfileHeader:MuteAccountButtonClicked': {}
   'ProfileHeader:UnmuteAccountButtonClicked': {}

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(() => {
+  const trackPress = React.useCallback(
-    track('ProfileHeader:FollowersButtonClicked')
+    (f: 'Followers' | 'Follows') => {
-    navigate('ProfileFollowers', {
+      track(`ProfileHeader:${f}ButtonClicked`, {
-      name: isInvalidHandle(view.handle) ? view.did : view.handle,
+        handle: view.handle,
-    })
+      })
-    store.shell.closeAllActiveElements() // for when used in the profile preview modal
+    },
-  }, [track, view, store.shell])
+    [track, view],
-
+  )
-  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 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}
+                href={makeProfileLink(view, 'followers')}
-                accessibilityRole="button"
+                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>
+              </Link>
-              <TouchableOpacity
+              <Link
                 testID="profileHeaderFollowsButton"
                 style={[s.flexRow, s.mr10]}
-                onPress={onPressFollows}
+                href={makeProfileLink(view, 'follows')}
-                accessibilityRole="button"
+                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]}>