format large numbers per locale (#34579)

Author: peterbe

Diff for: components/hooks/useNumberFormatter.ts

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+
+export function useNumberFormatter() {
+  const { locale } = useRouter()
+  return {
+    formatInteger: (num: number) => {
+      return new Intl.NumberFormat(locale).format(num)
+    },
+  }
+}

Diff for: components/search/SearchResults.tsx

@@ -5,6 +5,7 @@ import cx from 'classnames'
 
 import type { SearchResultsT, SearchResultHitT } from './types'
 import { useTranslation } from 'components/hooks/useTranslation'
+import { useNumberFormatter } from 'components/hooks/useNumberFormatter'
 import { Link } from 'components/Link'
 import { useQuery } from 'components/hooks/useQuery'
 import { sendEvent, EventType } from 'components/lib/events'
@@ -17,6 +18,7 @@ type Props = {
 }
 export function SearchResults({ results, query }: Props) {
   const { t } = useTranslation('search')
+  const { formatInteger } = useNumberFormatter()
 
   const pages = Math.ceil(results.meta.found.value / results.meta.size)
   const { page } = results.meta
@@ -26,7 +28,7 @@ export function SearchResults({ results, query }: Props) {
       <Text>
         {results.meta.found.value === 1
           ? t('one_result')
-          : t('n_results').replace('{n}', results.meta.found.value.toLocaleString())}
+          : t('n_results').replace('{n}', formatInteger(results.meta.found.value))}
       </Text>
       <br />
       <SearchResultHits hits={results.hits} query={query} />

Diff for: components/search/index.tsx

@@ -6,6 +6,7 @@ import { Heading } from '@primer/react'
 import { sendEvent, EventType } from 'components/lib/events'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { DEFAULT_VERSION, useVersion } from 'components/hooks/useVersion'
+import { useNumberFormatter } from 'components/hooks/useNumberFormatter'
 import type { SearchResultsT } from 'components/search/types'
 import { SearchResults } from 'components/search/SearchResults'
 import { SearchError } from 'components/search/SearchError'
@@ -17,6 +18,7 @@ import { useMainContext } from 'components/context/MainContext'
 
 export function Search() {
   const { locale } = useRouter()
+  const { formatInteger } = useNumberFormatter()
   const { t } = useTranslation('search')
   const { currentVersion } = useVersion()
   const { query, debug } = useQuery()
@@ -74,7 +76,7 @@ export function Search() {
       pageTitle += ` (${searchVersion})`
     }
     if (results) {
-      pageTitle = `${results.meta.found.value.toLocaleString()} ${pageTitle}`
+      pageTitle = `${formatInteger(results.meta.found.value)} ${pageTitle}`
     }
   }