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>

1 files changed, 12 insertions, 16 deletions

diff --git a/src/view/com/util/forms/DateInput.tsx b/src/view/com/util/forms/DateInput.tsx
index 0104562aa..bfbb2ff55 100644
--- a/src/view/com/util/forms/DateInput.tsx
+++ b/src/view/com/util/forms/DateInput.tsx
@@ -1,19 +1,18 @@
-import React, {useState, useCallback} from 'react'
+import React, {useCallback, useState} from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+import DatePicker from 'react-native-date-picker'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {isIOS, isAndroid} from 'platform/detection'
-import {Button, ButtonType} from './Button'
-import {Text} from '../text/Text'
+import {useLingui} from '@lingui/react'
+
+import {usePalette} from 'lib/hooks/usePalette'
 import {TypographyVariant} from 'lib/ThemeContext'
 import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
-import {getLocales} from 'expo-localization'
-import DatePicker from 'react-native-date-picker'
-
-const LOCALE = getLocales()[0]
+import {isAndroid, isIOS} from 'platform/detection'
+import {Text} from '../text/Text'
+import {Button, ButtonType} from './Button'
 
 interface Props {
   testID?: string
@@ -30,16 +29,11 @@ interface Props {
 }
 
 export function DateInput(props: Props) {
+  const {i18n} = useLingui()
   const [show, setShow] = useState(false)
   const theme = useTheme()
   const pal = usePalette('default')
 
-  const formatter = React.useMemo(() => {
-    return new Intl.DateTimeFormat(LOCALE.languageTag, {
-      timeZone: props.handleAsUTC ? 'UTC' : undefined,
-    })
-  }, [props.handleAsUTC])
-
   const onChangeInternal = useCallback(
     (date: Date) => {
       setShow(false)
@@ -74,7 +68,9 @@ export function DateInput(props: Props) {
             <Text
               type={props.buttonLabelType}
               style={[pal.text, props.buttonLabelStyle]}>
-              {formatter.format(props.value)}
+              {i18n.date(props.value, {
+                timeZone: props.handleAsUTC ? 'UTC' : undefined,
+              })}
             </Text>
           </View>
         </Button>