From 4ef5865af022ac94a3212623f0d9b3cb1c89fcc0 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 19 Jul 2024 14:25:01 -0700
Subject: [PATCH] Add i18n formatDistance

---
 src/components/dialogs/MutedWords.tsx |  3 +-
 src/components/hooks/dates.ts         | 50 +++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/components/hooks/dates.ts

diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 404e3970c3..f3e2d500d4 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/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()
diff --git a/src/components/hooks/dates.ts b/src/components/hooks/dates.ts
new file mode 100644
index 0000000000..f4eef4e53e
--- /dev/null
+++ b/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],
+  )
+}