Followers/following exact count (#7057)

* followers exact count in heading * exact count for following * move files to new dir * use <Plural>
2024-12-11 21:12:58 +00:00
parent 7db5882ea2
commit 89c6ca94fe
5 changed files with 114 additions and 70 deletions
@@ -0,0 +1,56 @@
+import React from 'react'
+import {Plural} from '@lingui/macro'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ProfileFollowers'
+import * as Layout from '#/components/Layout'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
+export const ProfileFollowersScreen = ({route}: Props) => {
+  const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
+
+  const {data: resolvedDid} = useResolveDidQuery(name)
+  const {data: profile} = useProfileQuery({
+    did: resolvedDid,
+  })
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  return (
+    <Layout.Screen testID="profileFollowersScreen">
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          {profile && (
+            <>
+              <Layout.Header.TitleText>
+                {sanitizeDisplayName(profile.displayName || profile.handle)}
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural
+                  value={profile.followersCount ?? 0}
+                  one="# follower"
+                  other="# followers"
+                />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Center>
+        <ProfileFollowersComponent name={name} />
+      </Layout.Center>
+    </Layout.Screen>
+  )
+}
@@ -0,0 +1,56 @@
+import React from 'react'
+import {Plural} from '@lingui/macro'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows'
+import * as Layout from '#/components/Layout'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
+export const ProfileFollowsScreen = ({route}: Props) => {
+  const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
+
+  const {data: resolvedDid} = useResolveDidQuery(name)
+  const {data: profile} = useProfileQuery({
+    did: resolvedDid,
+  })
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  return (
+    <Layout.Screen testID="profileFollowsScreen">
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          {profile && (
+            <>
+              <Layout.Header.TitleText>
+                {sanitizeDisplayName(profile.displayName || profile.handle)}
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural
+                  value={profile.followersCount ?? 0}
+                  one="# following"
+                  other="# following"
+                />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Center>
+        <ProfileFollowsComponent name={name} />
+      </Layout.Center>
+    </Layout.Screen>
+  )
+}