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 &&
42 disableFollowingMetrics &&
43 disablePostsMetrics ? null : (
44 <View
45 style={[a.flex_row, a.gap_sm, a.align_center]}
46 pointerEvents="box-none">
47 {!disableFollowersMetrics ? (
48 <InlineLinkText
49 testID="profileHeaderFollowersButton"
50 style={[a.flex_row, t.atoms.text]}
51 to={makeProfileLink(profile, 'followers')}
52 label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
53 <Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
54 <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
55 {pluralizedFollowers}
56 </Text>
57 </InlineLinkText>
58 ) : null}
59 {!disableFollowingMetrics ? (
60 <InlineLinkText
61 testID="profileHeaderFollowsButton"
62 style={[a.flex_row, t.atoms.text]}
63 to={makeProfileLink(profile, 'follows')}
64 label={_(msg`${profile.followsCount || 0} following`)}>
65 <Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
66 <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
67 {pluralizedFollowings}
68 </Text>
69 </InlineLinkText>
70 ) : null}
71 {!disablePostsMetrics ? (
72 <Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
73 {formatCount(i18n, profile.postsCount || 0)}{' '}
74 <Text
75 style={[
76 t.atoms.text_contrast_medium,
77 a.font_normal,
78 a.text_md,
79 ]}>
80 {plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
81 </Text>
82 </Text>
83 ) : null}
84 </View>
85 )}
86 </>
87 )
88}