about summary refs log tree commit diff
diff options
context:
space:
mode:
authorOllie H <renahlee@outlook.com>2023-05-01 11:31:00 -0700
committerGitHub <noreply@github.com>2023-05-01 13:31:00 -0500
commit0ec98c77ef65ff74e83b314d8eed9ef9b07d47d3 (patch)
tree744eaf6c0761499e3b1321e874a80c63d3194fc5
parent7171d0404ed61fbfb6d593aae3030834ad885072 (diff)
downloadvoidsky-0ec98c77ef65ff74e83b314d8eed9ef9b07d47d3.tar.zst
Format large numbers (#556)
-rw-r--r--src/view/com/profile/ProfileHeader.tsx5
-rw-r--r--src/view/com/util/numeric/format.ts5
-rw-r--r--src/view/shell/Drawer.tsx5
3 files changed, 11 insertions, 4 deletions
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 719b84e20..4accd7aba 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -33,6 +33,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {isDesktopWeb} from 'platform/detection'
 import {FollowState} from 'state/models/cache/my-follows'
 import {shareUrl} from 'lib/sharing'
+import {formatCount} from '../util/numeric/format'
 
 const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
 
@@ -364,7 +365,7 @@ const ProfileHeaderLoaded = observer(
                   style={[s.flexRow, s.mr10]}
                   onPress={onPressFollowers}>
                   <Text type="md" style={[s.bold, s.mr2, pal.text]}>
-                    {view.followersCount}
+                    {formatCount(view.followersCount)}
                   </Text>
                   <Text type="md" style={[pal.textLight]}>
                     {pluralize(view.followersCount, 'follower')}
@@ -375,7 +376,7 @@ const ProfileHeaderLoaded = observer(
                   style={[s.flexRow, s.mr10]}
                   onPress={onPressFollows}>
                   <Text type="md" style={[s.bold, s.mr2, pal.text]}>
-                    {view.followsCount}
+                    {formatCount(view.followsCount)}
                   </Text>
                   <Text type="md" style={[pal.textLight]}>
                     following
diff --git a/src/view/com/util/numeric/format.ts b/src/view/com/util/numeric/format.ts
new file mode 100644
index 000000000..f0e90217f
--- /dev/null
+++ b/src/view/com/util/numeric/format.ts
@@ -0,0 +1,5 @@
+export const formatCount = (num: number) =>
+  Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(num)
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 7128d4213..81ee005c8 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -39,6 +39,7 @@ import {getTabState, TabState} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
+import {formatCount} from 'view/com/util/numeric/format'
 
 export const DrawerContent = observer(() => {
   const theme = useTheme()
@@ -133,11 +134,11 @@ export const DrawerContent = observer(() => {
               type="xl"
               style={[pal.textLight, styles.profileCardFollowers]}>
               <Text type="xl-medium" style={pal.text}>
-                {store.me.followersCount || 0}
+                {formatCount(store.me.followersCount ?? 0)}
               </Text>{' '}
               {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
               <Text type="xl-medium" style={pal.text}>
-                {store.me.followsCount || 0}
+                {formatCount(store.me.followsCount ?? 0)}
               </Text>{' '}
               following
             </Text>