Add i18n formatDistance

src/components/dialogs/MutedWords.tsx

@@ -3,7 +3,6 @@ import {View} from 'react-native'
 import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {formatDistance} from 'date-fns'
 
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
@@ -25,6 +24,7 @@ import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
+import {useFormatDistance} from '#/components/hooks/dates'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
 import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
@@ -416,6 +416,7 @@ function MutedWordRow({
   ) : (
     <Trans>tags</Trans>
   )
+  const formatDistance = useFormatDistance()
 
   const remove = React.useCallback(async () => {
     control.close()

src/components/hooks/dates.ts

@@ -0,0 +1,50 @@
+import React from 'react'
+import {formatDistance, Locale} from 'date-fns'
+import {
+  ca,
+  de,
+  es,
+  fi,
+  fr,
+  hi,
+  id,
+  it,
+  ja,
+  ko,
+  ptBR,
+  tr,
+  uk,
+  zhCN,
+  zhTW,
+} from 'date-fns/locale'
+
+import {useLanguagePrefs} from '#/state/preferences'
+
+const locales: Record<string, Locale> = {
+  ca,
+  de,
+  es,
+  fi,
+  fr,
+  hi,
+  id,
+  it,
+  ja,
+  ko,
+  ptBR,
+  tr,
+  uk,
+  zhCN,
+  zhTW,
+}
+
+export function useFormatDistance() {
+  const {appLanguage} = useLanguagePrefs()
+  return React.useCallback<typeof formatDistance>(
+    (date, baseDate, options) => {
+      const locale = locales[appLanguage]
+      return formatDistance(date, baseDate, {...options, locale: locale})
+    },
+    [appLanguage],
+  )
+}