forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Followers/following exact count (#7057)
* followers exact count in heading
* exact count for following
* move files to new dir
* use <Plural>
authored by
Samuel Newman
and committed by
GitHub
89c6ca94
7db5882e
+114
-70
+56
src/screens/Profile/ProfileFollowers.tsx
+56
src/screens/Profile/ProfileFollowers.tsx
···
1
+
import React from 'react'
2
+
import {Plural} from '@lingui/macro'
3
+
import {useFocusEffect} from '@react-navigation/native'
4
+
5
+
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
6
+
import {sanitizeDisplayName} from '#/lib/strings/display-names'
7
+
import {useProfileQuery} from '#/state/queries/profile'
8
+
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
9
+
import {useSetMinimalShellMode} from '#/state/shell'
10
+
import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ProfileFollowers'
11
+
import * as Layout from '#/components/Layout'
12
+
13
+
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
14
+
export const ProfileFollowersScreen = ({route}: Props) => {
15
+
const {name} = route.params
16
+
const setMinimalShellMode = useSetMinimalShellMode()
17
+
18
+
const {data: resolvedDid} = useResolveDidQuery(name)
19
+
const {data: profile} = useProfileQuery({
20
+
did: resolvedDid,
21
+
})
22
+
23
+
useFocusEffect(
24
+
React.useCallback(() => {
25
+
setMinimalShellMode(false)
26
+
}, [setMinimalShellMode]),
27
+
)
28
+
29
+
return (
30
+
<Layout.Screen testID="profileFollowersScreen">
31
+
<Layout.Header.Outer>
32
+
<Layout.Header.BackButton />
33
+
<Layout.Header.Content>
34
+
{profile && (
35
+
<>
36
+
<Layout.Header.TitleText>
37
+
{sanitizeDisplayName(profile.displayName || profile.handle)}
38
+
</Layout.Header.TitleText>
39
+
<Layout.Header.SubtitleText>
40
+
<Plural
41
+
value={profile.followersCount ?? 0}
42
+
one="# follower"
43
+
other="# followers"
44
+
/>
45
+
</Layout.Header.SubtitleText>
46
+
</>
47
+
)}
48
+
</Layout.Header.Content>
49
+
<Layout.Header.Slot />
50
+
</Layout.Header.Outer>
51
+
<Layout.Center>
52
+
<ProfileFollowersComponent name={name} />
53
+
</Layout.Center>
54
+
</Layout.Screen>
55
+
)
56
+
}
+56
src/screens/Profile/ProfileFollows.tsx
+56
src/screens/Profile/ProfileFollows.tsx
···
1
+
import React from 'react'
2
+
import {Plural} from '@lingui/macro'
3
+
import {useFocusEffect} from '@react-navigation/native'
4
+
5
+
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
6
+
import {sanitizeDisplayName} from '#/lib/strings/display-names'
7
+
import {useProfileQuery} from '#/state/queries/profile'
8
+
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
9
+
import {useSetMinimalShellMode} from '#/state/shell'
10
+
import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows'
11
+
import * as Layout from '#/components/Layout'
12
+
13
+
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
14
+
export const ProfileFollowsScreen = ({route}: Props) => {
15
+
const {name} = route.params
16
+
const setMinimalShellMode = useSetMinimalShellMode()
17
+
18
+
const {data: resolvedDid} = useResolveDidQuery(name)
19
+
const {data: profile} = useProfileQuery({
20
+
did: resolvedDid,
21
+
})
22
+
23
+
useFocusEffect(
24
+
React.useCallback(() => {
25
+
setMinimalShellMode(false)
26
+
}, [setMinimalShellMode]),
27
+
)
28
+
29
+
return (
30
+
<Layout.Screen testID="profileFollowsScreen">
31
+
<Layout.Header.Outer>
32
+
<Layout.Header.BackButton />
33
+
<Layout.Header.Content>
34
+
{profile && (
35
+
<>
36
+
<Layout.Header.TitleText>
37
+
{sanitizeDisplayName(profile.displayName || profile.handle)}
38
+
</Layout.Header.TitleText>
39
+
<Layout.Header.SubtitleText>
40
+
<Plural
41
+
value={profile.followersCount ?? 0}
42
+
one="# following"
43
+
other="# following"
44
+
/>
45
+
</Layout.Header.SubtitleText>
46
+
</>
47
+
)}
48
+
</Layout.Header.Content>
49
+
<Layout.Header.Slot />
50
+
</Layout.Header.Outer>
51
+
<Layout.Center>
52
+
<ProfileFollowsComponent name={name} />
53
+
</Layout.Center>
54
+
</Layout.Screen>
55
+
)
56
+
}
-34
src/view/screens/ProfileFollowers.tsx
-34
src/view/screens/ProfileFollowers.tsx
···
1
-
import React from 'react'
2
-
import {msg} from '@lingui/macro'
3
-
import {useLingui} from '@lingui/react'
4
-
import {useFocusEffect} from '@react-navigation/native'
5
-
6
-
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
7
-
import {isWeb} from '#/platform/detection'
8
-
import {useSetMinimalShellMode} from '#/state/shell'
9
-
import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ProfileFollowers'
10
-
import {ViewHeader} from '#/view/com/util/ViewHeader'
11
-
import {CenteredView} from '#/view/com/util/Views'
12
-
import * as Layout from '#/components/Layout'
13
-
14
-
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
15
-
export const ProfileFollowersScreen = ({route}: Props) => {
16
-
const {name} = route.params
17
-
const setMinimalShellMode = useSetMinimalShellMode()
18
-
const {_} = useLingui()
19
-
20
-
useFocusEffect(
21
-
React.useCallback(() => {
22
-
setMinimalShellMode(false)
23
-
}, [setMinimalShellMode]),
24
-
)
25
-
26
-
return (
27
-
<Layout.Screen testID="profileFollowersScreen">
28
-
<CenteredView sideBorders={true}>
29
-
<ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
30
-
<ProfileFollowersComponent name={name} />
31
-
</CenteredView>
32
-
</Layout.Screen>
33
-
)
34
-
}
-34
src/view/screens/ProfileFollows.tsx
-34
src/view/screens/ProfileFollows.tsx
···
1
-
import React from 'react'
2
-
import {msg} from '@lingui/macro'
3
-
import {useLingui} from '@lingui/react'
4
-
import {useFocusEffect} from '@react-navigation/native'
5
-
6
-
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
7
-
import {isWeb} from '#/platform/detection'
8
-
import {useSetMinimalShellMode} from '#/state/shell'
9
-
import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows'
10
-
import {ViewHeader} from '#/view/com/util/ViewHeader'
11
-
import {CenteredView} from '#/view/com/util/Views'
12
-
import * as Layout from '#/components/Layout'
13
-
14
-
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
15
-
export const ProfileFollowsScreen = ({route}: Props) => {
16
-
const {name} = route.params
17
-
const setMinimalShellMode = useSetMinimalShellMode()
18
-
const {_} = useLingui()
19
-
20
-
useFocusEffect(
21
-
React.useCallback(() => {
22
-
setMinimalShellMode(false)
23
-
}, [setMinimalShellMode]),
24
-
)
25
-
26
-
return (
27
-
<Layout.Screen testID="profileFollowsScreen">
28
-
<CenteredView sideBorders={true}>
29
-
<ViewHeader title={_(msg`Following`)} showBorder={!isWeb} />
30
-
<ProfileFollowsComponent name={name} />
31
-
</CenteredView>
32
-
</Layout.Screen>
33
-
)
34
-
}