Fix 651 Make followers and following button into a <Link> (#1429)
				
					
				
			* make followers and following button into a Link * make buttons into `<a>` tags
This commit is contained in:
		
							parent
							
								
									2b6fe4cb50
								
							
						
					
					
						commit
						4977a5d2a3
					
				
					 2 changed files with 25 additions and 26 deletions
				
			
		| 
						 | 
				
			
			@ -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]}>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue