Using format.js

https://github.com/tooot-app/app/issues/280

src/App.tsx

@@ -1,4 +1,31 @@
 import { ActionSheetProvider } from '@expo/react-native-action-sheet'
+import '@formatjs/intl-getcanonicallocales/polyfill'
+import '@formatjs/intl-locale/polyfill'
+import '@formatjs/intl-pluralrules/polyfill'
+import '@formatjs/intl-pluralrules/locale-data/de'
+import '@formatjs/intl-pluralrules/locale-data/en'
+import '@formatjs/intl-pluralrules/locale-data/ko'
+import '@formatjs/intl-pluralrules/locale-data/vi'
+import '@formatjs/intl-pluralrules/locale-data/zh'
+import '@formatjs/intl-numberformat/polyfill'
+import '@formatjs/intl-numberformat/locale-data/de'
+import '@formatjs/intl-numberformat/locale-data/en'
+import '@formatjs/intl-numberformat/locale-data/ko'
+import '@formatjs/intl-numberformat/locale-data/vi'
+import '@formatjs/intl-numberformat/locale-data/zh'
+import '@formatjs/intl-datetimeformat/polyfill'
+import '@formatjs/intl-datetimeformat/locale-data/de'
+import '@formatjs/intl-datetimeformat/locale-data/en'
+import '@formatjs/intl-datetimeformat/locale-data/ko'
+import '@formatjs/intl-datetimeformat/locale-data/vi'
+import '@formatjs/intl-datetimeformat/locale-data/zh'
+import '@formatjs/intl-datetimeformat/add-all-tz'
+import '@formatjs/intl-relativetimeformat/polyfill'
+import '@formatjs/intl-relativetimeformat/locale-data/de'
+import '@formatjs/intl-relativetimeformat/locale-data/en'
+import '@formatjs/intl-relativetimeformat/locale-data/ko'
+import '@formatjs/intl-relativetimeformat/locale-data/vi'
+import '@formatjs/intl-relativetimeformat/locale-data/zh'
 import queryClient from '@helpers/queryClient'
 import i18n from '@root/i18n/i18n'
 import Screens from '@root/Screens'
@@ -6,7 +33,9 @@ import audio from '@root/startup/audio'
 import dev from '@root/startup/dev'
 import log from '@root/startup/log'
 import netInfo from '@root/startup/netInfo'
+import push from '@root/startup/push'
 import sentry from '@root/startup/sentry'
+import timezone from '@root/startup/timezone'
 import { persistor, store } from '@root/store'
 import AccessibilityManager from '@utils/accessibility/AccessibilityManager'
 import {
@@ -24,7 +53,7 @@ import { enableFreeze } from 'react-native-screens'
 import { QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
-import push from './startup/push'
+import { IntlProvider } from 'react-intl'
 
 Platform.select({
   android: LogBox.ignoreLogs(['Setting a timer for a long period of time'])
@@ -34,6 +63,7 @@ dev()
 sentry()
 audio()
 push()
+timezone()
 enableFreeze(true)
 
 const App: React.FC = () => {
@@ -92,13 +122,18 @@ const App: React.FC = () => {
         const language = getSettingsLanguage(store.getState())
         if (!language) {
           store.dispatch(changeLanguage('en'))
+          i18n.changeLanguage('en')
+        } else {
+          i18n.changeLanguage(language)
         }
-        i18n.changeLanguage(language)
+
         return (
           <ActionSheetProvider>
             <AccessibilityManager>
               <ThemeManager>
-                <Screens localCorrupt={localCorrupt} />
+                <IntlProvider locale={language}>
+                  <Screens localCorrupt={localCorrupt} />
+                </IntlProvider>
               </ThemeManager>
             </AccessibilityManager>
           </ActionSheetProvider>

src/components/RelativeTime.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
-import TimeAgo from 'react-timeago'
-// @ts-ignore
-import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'
-
-export interface Props {
-  date: string | number
-}
-
-const RelativeTime: React.FC<Props> = ({ date }) => {
-  const { t } = useTranslation('componentRelativeTime')
-
-  return (
-    <TimeAgo
-      date={date}
-      component={Text}
-      formatter={buildFormatter(t('strings', { returnObjects: true }))}
-    />
-  )
-}
-
-export default RelativeTime

src/components/Timeline/Default.tsx

@@ -102,6 +102,7 @@ const TimelineDefault = React.memo(
             queryKey={disableOnPress ? undefined : queryKey}
             rootQueryKey={disableOnPress ? undefined : rootQueryKey}
             status={actualStatus}
+            highlighted={highlighted}
           />
         </View>
 

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -18,9 +18,15 @@ export interface Props {
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
   status: Mastodon.Status
+  highlighted: boolean
 }
 
-const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
+const TimelineHeaderDefault = ({
+  queryKey,
+  rootQueryKey,
+  status,
+  highlighted
+}: Props) => {
   const { t } = useTranslation('componentTimeline')
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { colors } = useTheme()
@@ -40,6 +46,7 @@ const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
           <HeaderSharedCreated
             created_at={status.created_at}
             edited_at={status.edited_at}
+            highlighted={highlighted}
           />
           <HeaderSharedVisibility visibility={status.visibility} />
           <HeaderSharedMuted muted={status.muted} />

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -1,25 +1,43 @@
 import Icon from '@components/Icon'
-import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { FormattedDate, FormattedRelativeTime, FormattedTime } from 'react-intl'
 
 export interface Props {
   created_at: Mastodon.Status['created_at'] | number
   edited_at?: Mastodon.Status['edited_at']
+  highlighted: boolean
 }
 
 const HeaderSharedCreated = React.memo(
-  ({ created_at, edited_at }: Props) => {
+  ({ created_at, edited_at, highlighted }: Props) => {
     const { t } = useTranslation('componentTimeline')
     const { colors } = useTheme()
 
+    const actualTime = edited_at || created_at
+
     return (
       <>
         <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-          <RelativeTime date={edited_at || created_at} />
+          {highlighted ? (
+            <>
+              <FormattedDate
+                value={new Date(actualTime)}
+                dateStyle='medium'
+                timeStyle='short'
+              />
+            </>
+          ) : (
+            <FormattedRelativeTime
+              value={
+                -(new Date().getTime() - new Date(actualTime).getTime()) / 1000
+              }
+              updateIntervalInSeconds={1}
+            />
+          )}
         </CustomText>
         {edited_at ? (
           <Icon

src/components/Timeline/Shared/Poll.tsx

@@ -17,6 +17,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { maxBy } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { FormattedRelativeTime } from 'react-intl'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useQueryClient } from 'react-query'
 
@@ -158,7 +159,16 @@ const TimelinePoll: React.FC<Props> = ({
           <CustomText fontStyle='S' style={{ color: colors.secondary }}>
             <Trans
               i18nKey='componentTimeline:shared.poll.meta.expiration.until'
-              components={[<RelativeTime date={poll.expires_at} />]}
+              components={[
+                <FormattedRelativeTime
+                  value={
+                    (new Date(poll.expires_at).getTime() -
+                      new Date().getTime()) /
+                    1000
+                  }
+                  updateIntervalInSeconds={1}
+                />
+              ]}
             />
           </CustomText>
         )

src/i18n/de/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "her",
-    "suffixFromNow": "",
-    "seconds": "%d Sekunden",
-    "minute": "etwa eine Minute",
-    "minutes": "%d Minuten",
-    "hour": "etwa eine Stunde",
-    "hours": "etwa %d Stunden",
-    "day": "1 Tag",
-    "days": "%d Tage",
-    "month": "etwa 1 Monat",
-    "months": "%d Monate",
-    "year": "etwa 1 Jahr",
-    "years": "%d Jahre",
-    "wordSeparator": ""
-  }
-}

src/i18n/en/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "ago",
-    "suffixFromNow": "",
-    "seconds": "%d seconds",
-    "minute": "about a minute",
-    "minutes": "%d minutes",
-    "hour": "about an hour",
-    "hours": "about %d hours",
-    "day": "a day",
-    "days": "%d days",
-    "month": "about a month",
-    "months": "%d months",
-    "year": "about a year",
-    "years": "%d years",
-    "wordSeparator": " "
-  }
-}

src/i18n/ko/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "전",
-    "suffixFromNow": "",
-    "seconds": "%d초",
-    "minute": "약 1분",
-    "minutes": "%d분",
-    "hour": "약 1시간",
-    "hours": "약 %d시간",
-    "day": "하루",
-    "days": "%d일",
-    "month": "약 1달",
-    "months": "%d달",
-    "year": "약 1년",
-    "years": "%d년",
-    "wordSeparator": ""
-  }
-}

src/i18n/vi/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": " trước",
-    "suffixFromNow": "",
-    "seconds": "%d giây",
-    "minute": "một phút",
-    "minutes": "%d phút",
-    "hour": "một giờ",
-    "hours": "khoảng %d giờ",
-    "day": "một ngày",
-    "days": "%d ngày",
-    "month": "khoảng một tháng",
-    "months": "%d tháng",
-    "year": "khoảng một năm",
-    "years": "%d năm",
-    "wordSeparator": ""
-  }
-}

src/i18n/zh-Hans/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "前",
-    "suffixFromNow": "",
-    "seconds": "%d秒",
-    "minute": "1分钟",
-    "minutes": "%d分钟",
-    "hour": "1小时",
-    "hours": "%d小时",
-    "day": "1天",
-    "days": "%d天",
-    "month": "1个月",
-    "months": "%d月",
-    "year": "大约1年",
-    "years": "%d年",
-    "wordSeparator": ""
-  }
-}

src/i18n/zh-Hant/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "前",
-    "suffixFromNow": "",
-    "seconds": "%d 秒",
-    "minute": "約 1 分",
-    "minutes": "%d 分",
-    "hour": "約 1 小時",
-    "hours": "約 %d 小時",
-    "day": "1 天",
-    "days": "%d 天",
-    "month": "約 1 個月",
-    "months": "%d 個月",
-    "year": "約 1 年",
-    "years": "%d 年",
-    "wordSeparator": ""
-  }
-}

src/screens/Announcements.tsx

@@ -15,6 +15,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { FormattedRelativeTime } from 'react-intl'
 import { Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import FastImage from 'react-native-fast-image'
@@ -91,7 +92,17 @@ const ScreenAnnouncements: React.FC<
           >
             <Trans
               i18nKey='screenAnnouncements:content.published'
-              components={[<RelativeTime date={item.published_at} />]}
+              components={[
+                <FormattedRelativeTime
+                  value={
+                    -(
+                      new Date().getTime() -
+                      new Date(item.published_at).getTime()
+                    ) / 1000
+                  }
+                  updateIntervalInSeconds={1}
+                />
+              ]}
             />
           </CustomText>
           <ScrollView

src/startup/timezone.ts

@@ -0,0 +1,12 @@
+import * as Localization from 'expo-localization'
+import log from './log'
+
+const timezone = () => {
+  log('log', 'Timezone', Localization.timezone)
+  if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
+    // @ts-ignore
+    Intl.DateTimeFormat.__setDefaultTimeZone(Localization.timezone)
+  }
+}
+
+export default timezone