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

* make followers and following button into a Link

* make buttons into `<a>` tags
zio/stable
Ansh 2023-09-13 02:17:55 +05:30 committed by GitHub
parent 2b6fe4cb50
commit 4977a5d2a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 26 deletions

View File

@ -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': {}

View File

@ -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]}>