acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

refactor: localized date time

Browse Source
This commit is contained in:
Mary
2024-05-30 11:19:47 +07:00
committed by Eric Bailey
parent 6f0764de1d
commit bf924a9a43
10 changed files with 84 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__tests__/lib/string.test.ts
+4 -1
View File
@@ -1,4 +1,5 @@
import {RichText} from '@atproto/api'
import {I18n} from '@lingui/core'
import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
import {cleanError} from '../../src/lib/strings/errors'
@@ -207,8 +208,10 @@ describe('ago', () => {
]
it('correctly calculates how much time passed, in a string', () => {
const i18n = new I18n({locale: 'en'})
for (let i = 0; i < inputs.length; i++) {
const result = ago(inputs[i])
const result = ago(i18n, inputs[i])
expect(result).toEqual(outputs[i])
}
})
src/components/dialogs/Embed.tsx
+3 -3
View File
@@ -43,7 +43,7 @@ function EmbedDialogInner({
timestamp,
}: Omit<EmbedDialogProps, 'control'>) {
const t = useTheme()
const {_} = useLingui()
const {_, i18n} = useLingui()
const ref = useRef<TextInput>(null)
const [copied, setCopied] = useState(false)
@@ -86,9 +86,9 @@ function EmbedDialogInner({
)} (<a href="${escapeHtml(profileHref)}">@${escapeHtml(
postAuthor.handle,
)}</a>) <a href="${escapeHtml(href)}">${escapeHtml(
niceDate(timestamp),
niceDate(i18n, timestamp),
)}</a></blockquote><script async src="${EMBED_SCRIPT}" charset="utf-8"></script>`
}, [postUri, postCid, record, timestamp, postAuthor])
}, [i18n, postUri, postCid, record, timestamp, postAuthor])
return (
<Dialog.Inner label="Embed post" style={[a.gap_md, {maxWidth: 500}]}>
src/components/dms/MessageItem.tsx
+4 -3
View File
@@ -7,6 +7,7 @@ import {
View,
} from 'react-native'
import {ChatBskyConvoDefs, RichText as RichTextAPI} from '@atproto/api'
import {I18n} from '@lingui/core'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -130,7 +131,7 @@ let MessageItemMetadata = ({
style: StyleProp<TextStyle>
}): React.ReactNode => {
const t = useTheme()
const {_, i18n} = useLingui()
const {_} = useLingui()
const {message} = item
const handleRetry = useCallback(
@@ -145,7 +146,7 @@ let MessageItemMetadata = ({
)
const relativeTimestamp = useCallback(
(timestamp: string) => {
(i18n: I18n, timestamp: string) => {
const date = new Date(timestamp)
const now = new Date()
@@ -182,7 +183,7 @@ let MessageItemMetadata = ({
year: 'numeric',
})
},
[_, i18n],
[_],
)
return (
src/lib/strings/time.ts
+41 -17
View File
@@ -1,10 +1,15 @@
import {I18n} from '@lingui/core'
import {msg} from '@lingui/macro'
import {MONTH_FALLBACK_LOCALES} from '#/locale/constants'
const NOW = 5
const MINUTE = 60
const HOUR = MINUTE * 60
const DAY = HOUR * 24
const MONTH_30 = DAY * 30
const MONTH = DAY * 30.41675 // This results in 365.001 days in a year, which is close enough for nearly all cases
export function ago(date: number | string | Date): string {
export function ago(i18n: I18n, date: number | string | Date): string {
let ts: number
if (typeof date === 'string') {
ts = Number(new Date(date))
@@ -15,15 +20,31 @@ export function ago(date: number | string | Date): string {
}
const diffSeconds = Math.floor((Date.now() - ts) / 1e3)
if (diffSeconds < NOW) {
return `now`
return i18n._(msg`now`)
} else if (diffSeconds < MINUTE) {
return `${diffSeconds}s`
return i18n.number(diffSeconds, {
style: 'unit',
unitDisplay: 'narrow',
unit: 'second',
})
} else if (diffSeconds < HOUR) {
return `${Math.floor(diffSeconds / MINUTE)}m`
return i18n.number(Math.floor(diffSeconds / MINUTE), {
style: 'unit',
unitDisplay: 'narrow',
unit: 'minute',
})
} else if (diffSeconds < DAY) {
return `${Math.floor(diffSeconds / HOUR)}h`
return i18n.number(Math.floor(diffSeconds / HOUR), {
style: 'unit',
unitDisplay: 'narrow',
unit: 'hour',
})
} else if (diffSeconds < MONTH_30) {
return `${Math.round(diffSeconds / DAY)}d`
return i18n.number(Math.round(diffSeconds / DAY), {
style: 'unit',
unitDisplay: 'narrow',
unit: 'day',
})
} else {
let months = diffSeconds / MONTH
if (months % 1 >= 0.9) {
@@ -33,23 +54,26 @@ export function ago(date: number | string | Date): string {
}
if (months < 12) {
return `${months}mo`
if (MONTH_FALLBACK_LOCALES.includes(i18n.locale)) return `${months}mo`
return i18n.number(months, {
style: 'unit',
unitDisplay: 'narrow',
unit: 'month',
})
} else {
return new Date(ts).toLocaleDateString()
return i18n.date(new Date(ts))
}
}
}
export function niceDate(date: number | string | Date) {
export function niceDate(i18n: I18n, date: number | string | Date) {
const d = new Date(date)
return `${d.toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})} at ${d.toLocaleTimeString(undefined, {
hour: 'numeric',
minute: '2-digit',
})}`
return i18n.date(d, {
dateStyle: 'long',
timeStyle: 'short',
})
}
export function getAge(birthDate: Date): number {
src/locale/constants.ts
+4
View File
@@ -0,0 +1,4 @@
// The narrow unit display for `month` in English is `m`, which conflicts with
// the one for `minute` (also `m`), this also goes for any locale that currently
// falls back to English for narrow-unit display (missing localization?)
export const MONTH_FALLBACK_LOCALES = ['en', 'ja', 'es', 'fr', 'tr']
src/view/com/notifications/FeedItem.tsx
+1 -1
View File
@@ -249,7 +249,7 @@ let FeedItem = ({
{({timeElapsed}) => (
<Text
style={[pal.textLight, styles.pointer]}
title={niceDate(item.notification.indexedAt)}>
title={niceDate(i18n, item.notification.indexedAt)}>
{' ' + timeElapsed}
</Text>
)}
src/view/com/post-thread/PostThreadItem.tsx
+2 -2
View File
@@ -636,7 +636,7 @@ function ExpandedPostDetails({
translatorUrl: string
}) {
const pal = usePalette('default')
const {_} = useLingui()
const {_, i18n} = useLingui()
const openLink = useOpenLink()
const text = record?.text || ''
@@ -654,7 +654,7 @@ function ExpandedPostDetails({
return (
<View style={[s.flexRow, s.mt2, s.mb10]}>
<Text style={pal.textLight}>{niceDate(post.indexedAt)}</Text>
<Text style={pal.textLight}>{niceDate(i18n, post.indexedAt)}</Text>
{needsTranslation && (
<>
<Text style={pal.textLight}> &middot; </Text>
src/view/com/util/PostMeta.tsx
+5 -2
View File
@@ -1,6 +1,7 @@
import React, {memo, useCallback} from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {AppBskyActorDefs, ModerationDecision, ModerationUI} from '@atproto/api'
import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
import {precacheProfile, usePrefetchProfileQuery} from '#/state/queries/profile'
@@ -33,6 +34,8 @@ interface PostMetaOpts {
}
let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
const {i18n} = useLingui()
const pal = usePalette('default')
const displayName = opts.author.displayName || opts.author.handle
const handle = opts.author.handle
@@ -114,8 +117,8 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
style={pal.textLight}
lineHeight={1.2}
text={timeElapsed}
accessibilityLabel={niceDate(opts.timestamp)}
title={niceDate(opts.timestamp)}
accessibilityLabel={niceDate(i18n, opts.timestamp)}
title={niceDate(i18n, opts.timestamp)}
accessibilityHint=""
href={opts.postHref}
onBeforePress={onBeforePressPost}
src/view/com/util/TimeElapsed.tsx
+7 -3
View File
@@ -1,4 +1,6 @@
import React from 'react'
import {I18n} from '@lingui/core'
import {useLingui} from '@lingui/react'
import {useTickEveryMinute} from '#/state/shell'
import {ago} from 'lib/strings/time'
@@ -10,17 +12,19 @@ export function TimeElapsed({
}: {
timestamp: string
children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element
timeToString?: (timeElapsed: string) => string
timeToString?: (i18n: I18n, timeElapsed: string) => string
}) {
const {i18n} = useLingui()
const tick = useTickEveryMinute()
const [timeElapsed, setTimeAgo] = React.useState(() =>
timeToString(timestamp),
timeToString(i18n, timestamp),
)
const [prevTick, setPrevTick] = React.useState(tick)
if (prevTick !== tick) {
setPrevTick(tick)
setTimeAgo(timeToString(timestamp))
setTimeAgo(timeToString(i18n, timestamp))
}
return children({timeElapsed})
src/view/screens/Log.tsx
+13 -12
View File
@@ -1,25 +1,26 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ScrollView} from '../com/util/Views'
import {s} from 'lib/styles'
import {ViewHeader} from '../com/util/ViewHeader'
import {Text} from '../com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {getEntries} from '#/logger/logDump'
import {ago} from 'lib/strings/time'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useFocusEffect} from '@react-navigation/native'
import {getEntries} from '#/logger/logDump'
import {useSetMinimalShellMode} from '#/state/shell'
import {usePalette} from 'lib/hooks/usePalette'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {ago} from 'lib/strings/time'
import {s} from 'lib/styles'
import {Text} from '../com/util/text/Text'
import {ViewHeader} from '../com/util/ViewHeader'
import {ScrollView} from '../com/util/Views'
export function LogScreen({}: NativeStackScreenProps<
CommonNavigatorParams,
'Log'
>) {
const pal = usePalette('default')
const {_} = useLingui()
const {_, i18n} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const [expanded, setExpanded] = React.useState<string[]>([])
@@ -70,7 +71,7 @@ export function LogScreen({}: NativeStackScreenProps<
/>
) : undefined}
<Text type="sm" style={[styles.ts, pal.textLight]}>
{ago(entry.timestamp)}
{ago(i18n, entry.timestamp)}
</Text>
</TouchableOpacity>
{expanded.includes(entry.id) ? (