Localize dates, counts (#5027)

* refactor: consistent localized formatting

* refactor: localized date time

* refactor: localize relative time with strings

* chore: fix typo from copy-paste

* Clean up useTimeAgo

* Remove old ago

* Const

* Reuse

* Prettier

---------

Co-authored-by: Mary <git@mary.my.id>

2 files changed, 3 insertions, 13 deletions

diff --git a/src/components/forms/DateField/index.shared.tsx b/src/components/forms/DateField/index.shared.tsx
index 1f54bdc8b..814bbed7c 100644
--- a/src/components/forms/DateField/index.shared.tsx
+++ b/src/components/forms/DateField/index.shared.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import {Pressable, View} from 'react-native'
+import {useLingui} from '@lingui/react'
 
 import {android, atoms as a, useTheme, web} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
 import {Text} from '#/components/Typography'
-import {localizeDate} from './utils'
 
 // looks like a TextField.Input, but is just a button. It'll do something different on each platform on press
 // iOS: open a dialog with an inline date picker
@@ -25,6 +25,7 @@ export function DateFieldButton({
   isInvalid?: boolean
   accessibilityHint?: string
 }) {
+  const {i18n} = useLingui()
   const t = useTheme()
 
   const {
@@ -91,7 +92,7 @@ export function DateFieldButton({
             t.atoms.text,
             {lineHeight: a.text_md.fontSize * 1.1875},
           ]}>
-          {localizeDate(value)}
+          {i18n.date(value, {timeZone: 'UTC'})}
         </Text>
       </Pressable>
     </View>
diff --git a/src/components/forms/DateField/utils.ts b/src/components/forms/DateField/utils.ts
index c787272fe..04bb482ce 100644
--- a/src/components/forms/DateField/utils.ts
+++ b/src/components/forms/DateField/utils.ts
@@ -1,16 +1,5 @@
-import {getLocales} from 'expo-localization'
-
-const LOCALE = getLocales()[0]
-
 // we need the date in the form yyyy-MM-dd to pass to the input
 export function toSimpleDateString(date: Date | string): string {
   const _date = typeof date === 'string' ? new Date(date) : date
   return _date.toISOString().split('T')[0]
 }
-
-export function localizeDate(date: Date | string): string {
-  const _date = typeof date === 'string' ? new Date(date) : date
-  return new Intl.DateTimeFormat(LOCALE.languageTag, {
-    timeZone: 'UTC',
-  }).format(_date)
-}