robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {type AppBskyActorDefs} from '@atproto/api'
3import {msg, plural} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {makeProfileLink} from '#/lib/routes/links'
7import {type Shadow} from '#/state/cache/types'
8import {useDisableFollowersMetrics} from '#/state/preferences/disable-followers-metrics'
9import {useDisableFollowingMetrics} from '#/state/preferences/disable-following-metrics'
10import {useDisablePostsMetrics} from '#/state/preferences/disable-posts-metrics'
11import {formatCount} from '#/view/com/util/numeric/format'
12import {atoms as a, useTheme} from '#/alf'
13import {InlineLinkText} from '#/components/Link'
14import {Text} from '#/components/Typography'
15
16export function ProfileHeaderMetrics({
17 profile,
18}: {
19 profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
20}) {
21 const t = useTheme()
22 const {_, i18n} = useLingui()
23 const following = formatCount(i18n, profile.followsCount || 0)
24 const followers = formatCount(i18n, profile.followersCount || 0)
25 const pluralizedFollowers = plural(profile.followersCount || 0, {
26 one: 'follower',
27 other: 'followers',
28 })
29 const pluralizedFollowings = plural(profile.followsCount || 0, {
30 one: 'following',
31 other: 'following',
32 })
33
34 // disable metrics
35 const disableFollowersMetrics = useDisableFollowersMetrics()
36 const disableFollowingMetrics = useDisableFollowingMetrics()
37 const disablePostsMetrics = useDisablePostsMetrics()
38
39 return (
40 <>
41 {disableFollowersMetrics && disableFollowingMetrics && disablePostsMetrics ? ( null ) :
42 <View
43 style={[a.flex_row, a.gap_sm, a.align_center]}
44 pointerEvents="box-none">
45 {!disableFollowersMetrics ? (
46 <InlineLinkText
47 testID="profileHeaderFollowersButton"
48 style={[a.flex_row, t.atoms.text]}
49 to={makeProfileLink(profile, 'followers')}
50 label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
51 <Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
52 <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
53 {pluralizedFollowers}
54 </Text>
55 </InlineLinkText>
56 ) : null}
57 {!disableFollowingMetrics ? (
58 <InlineLinkText
59 testID="profileHeaderFollowsButton"
60 style={[a.flex_row, t.atoms.text]}
61 to={makeProfileLink(profile, 'follows')}
62 label={_(msg`${profile.followsCount || 0} following`)}>
63 <Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
64 <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
65 {pluralizedFollowings}
66 </Text>
67 </InlineLinkText>
68 ) : null}
69 {!disablePostsMetrics ? (
70 <Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
71 {formatCount(i18n, profile.postsCount || 0)}{' '}
72 <Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
73 {plural(profile.postsCount || 0, {one: 'skeet', other: 'skeets'})}
74 </Text>
75 </Text>
76 ) : null}
77 </View>
78 }
79 </>
80 )
81}