Merge pull request #780 from Ekep-Obasi/feature/add-format-stats

feat: implement number formatting with commas

src/components/Stats/index.tsx

@@ -11,6 +11,7 @@ import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { Flex } from '../common/Flex'
 import EpisodeIcon from '../Icons/EpisodeIcon'
+import { formatNumberWithCommas } from '~/utils'
 
 type StatResponse = {
   /* eslint-disable camelcase */
@@ -24,13 +25,13 @@ type StatResponse = {
 }
 
 type TStats = {
-  numAudio: number
-  numContributors: number
-  numDaily: number
-  numEpisodes: number
-  numNodes: number
-  numTwitterSpace: number
-  numVideo: number
+  numAudio: string
+  numContributors: string
+  numDaily: string
+  numEpisodes: string
+  numNodes: string
+  numTwitterSpace: string
+  numVideo: string
 }
 
 export const Stats = () => {
@@ -56,13 +57,13 @@ export const Stats = () => {
 
         if (data) {
           setStats({
-            numAudio: data.num_audio,
-            numContributors: data.num_contributors,
-            numDaily: data.num_daily,
-            numEpisodes: data.num_episodes,
-            numNodes: data.num_nodes,
-            numTwitterSpace: data.num_twitter_space,
-            numVideo: data.num_video,
+            numAudio: formatNumberWithCommas(data.num_audio),
+            numContributors: formatNumberWithCommas(data.num_contributors),
+            numDaily: formatNumberWithCommas(data.num_daily),
+            numEpisodes: formatNumberWithCommas(data.num_episodes),
+            numNodes: formatNumberWithCommas(data.num_nodes),
+            numTwitterSpace: formatNumberWithCommas(data.num_twitter_space),
+            numVideo: formatNumberWithCommas(data.num_video),
           })
         }
       } catch (e) {

src/utils/formatStats/__tests__/index.ts

@@ -0,0 +1,27 @@
+import { formatNumberWithCommas } from '../index'
+
+describe('formatNumberWithCommas', () => {
+  it('should format a number with default locale (en-US)', () => {
+    const result = formatNumberWithCommas(1000000)
+
+    expect(result).toBe('1,000,000')
+  })
+
+  it('should handle a negative number', () => {
+    const result = formatNumberWithCommas(-1234567.89)
+
+    expect(result).toBe('-1,234,567.89')
+  })
+
+  it('should handle a decimal number', () => {
+    const result = formatNumberWithCommas(1234.56)
+
+    expect(result).toBe('1,234.56')
+  })
+
+  it('should handle zero', () => {
+    const result = formatNumberWithCommas(0)
+
+    expect(result).toBe('0')
+  })
+})

src/utils/formatStats/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Formats a number with commas as thousands separators using the Intl.NumberFormat constructor.
+ *
+ * @param {number} number - The number to be formatted.
+ * @param {string} [locale='en-US'] - The locale to use for formatting. Defaults to 'en-US'.
+ * @returns {string} A string representation of the formatted number.
+ */
+
+export const formatNumberWithCommas = (number: number, locale = 'en-US') => {
+  try {
+    const formatter = new Intl.NumberFormat(locale)
+
+    return formatter.format(number)
+  } catch (error) {
+    console.error('Error formatting number:', error)
+
+    return number.toString()
+  }
+}

src/utils/index.ts

@@ -21,6 +21,7 @@ import { extractUuidAndHost } from './auth'
 import { generateAuthQueryParam, getSignedMessageFromRelay } from './getSignedMessage'
 import { videoTimeToSeconds } from './videoTimetoSeconds'
 import { showPlayButton, getTrendingTopic } from './trending'
+import { formatNumberWithCommas } from './formatStats'
 
 export {
   E2ETests,
@@ -51,4 +52,5 @@ export {
   generateAuthQueryParam,
   showPlayButton,
   getTrendingTopic,
+  formatNumberWithCommas,
 }