From 0ec98c77ef65ff74e83b314d8eed9ef9b07d47d3 Mon Sep 17 00:00:00 2001
From: Ollie H <renahlee@outlook.com>
Date: Mon, 1 May 2023 11:31:00 -0700
Subject: [PATCH] Format large numbers (#556)

---
 src/view/com/profile/ProfileHeader.tsx | 5 +++--
 src/view/com/util/numeric/format.ts    | 5 +++++
 src/view/shell/Drawer.tsx              | 5 +++--
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 src/view/com/util/numeric/format.ts

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 719b84e2..4accd7ab 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 00000000..f0e90217
--- /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 7128d421..81ee005c 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>