From 94cd7c72f623b2e954b0aaa0f3d034d55114a5c6 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 25 Nov 2022 21:57:40 +0000
Subject: [PATCH] feat: human readable numbers for counts

---
 components/account/AccountHeader.vue    |  6 +++---
 components/account/AccountHoverCard.vue |  6 +++---
 composables/numbers.ts                  | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 composables/numbers.ts

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index c8648f19..97d22e68 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -95,13 +95,13 @@ function previewAvatar() {
       </div>
       <div flex gap-5>
         <NuxtLink :to="`/${getFullHandle(account)}/`" exact-active-class="text-primary">
-          <span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
+          <span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span op50>Posts</span>
         </NuxtLink>
         <NuxtLink :to="`/${getFullHandle(account)}/following`" exact-active-class="text-primary">
-          <span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
+          <span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span op50>Following</span>
         </NuxtLink>
         <NuxtLink :to="`/${getFullHandle(account)}/followers`" exact-active-class="text-primary">
-          <span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
+          <span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span op50>Followers</span>
         </NuxtLink>
       </div>
     </div>
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index 41d29c9c..fabba76f 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -11,15 +11,15 @@ defineProps<{
     <AccountInfo :account="account" />
     <div text-sm flex flex-row text-gray mt-4>
       <NuxtLink :to="`/${getShortHandle(account)}/`">
-        {{ account.statusesCount }} Posts
+        {{ formattedNumber(account.statusesCount) }} Posts
       </NuxtLink>
       <span flex-1 text-center> • </span>
       <NuxtLink :to="`/${getShortHandle(account)}/following`">
-        {{ account.followingCount }} Following
+        {{ humanReadableNumber(account.followingCount) }} Following
       </NuxtLink>
       <span flex-1 text-center> • </span>
       <NuxtLink :to="`/${getShortHandle(account)}/followers`">
-        {{ account.followersCount }} Followers
+        {{ humanReadableNumber(account.followersCount) }} Followers
       </NuxtLink>
     </div>
     <ContentRich text-4 text-gray :content="account.note" :emojis="account.emojis" />
diff --git a/composables/numbers.ts b/composables/numbers.ts
new file mode 100644
index 00000000..a287576a
--- /dev/null
+++ b/composables/numbers.ts
@@ -0,0 +1,15 @@
+const formatter = Intl.NumberFormat()
+
+export const humanReadableNumber = (num: number) => {
+  if (num < 10000)
+    return formatter.format(num)
+
+  if (num < 1000000)
+    return `${Math.floor(num / 1000)}K`
+
+  return `${Math.floor(num / 1000000)}M`
+}
+
+export const formattedNumber = (num: number) => {
+  return formatter.format(num)
+}