diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/ProfileHoverCard/index.web.tsx | 6 | ||||
-rw-r--r-- | src/components/dialogs/Embed.tsx | 6 | ||||
-rw-r--r-- | src/components/dms/MessageItem.tsx | 11 | ||||
-rw-r--r-- | src/components/forms/DateField/index.shared.tsx | 5 | ||||
-rw-r--r-- | src/components/forms/DateField/utils.ts | 11 |
5 files changed, 15 insertions, 24 deletions
diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx index 928000988..3890790db 100644 --- a/src/components/ProfileHoverCard/index.web.tsx +++ b/src/components/ProfileHoverCard/index.web.tsx @@ -377,7 +377,7 @@ function Inner({ hide: () => void }) { const t = useTheme() - const {_} = useLingui() + const {_, i18n} = useLingui() const {currentAccount} = useSession() const moderation = React.useMemo( () => moderateProfile(profile, moderationOpts), @@ -393,8 +393,8 @@ function Inner({ profile.viewer?.blocking || profile.viewer?.blockedBy || profile.viewer?.blockingByList - const following = formatCount(profile.followsCount || 0) - const followers = formatCount(profile.followersCount || 0) + const following = formatCount(i18n, profile.followsCount || 0) + const followers = formatCount(i18n, profile.followersCount || 0) const pluralizedFollowers = plural(profile.followersCount || 0, { one: 'follower', other: 'followers', diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx index 7d858cae4..f43c3c6fe 100644 --- a/src/components/dialogs/Embed.tsx +++ b/src/components/dialogs/Embed.tsx @@ -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}]}> diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 573c24f77..c5c472cf0 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -11,6 +11,7 @@ import { ChatBskyConvoDefs, RichText as RichTextAPI, } from '@atproto/api' +import {I18n} from '@lingui/core' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -153,14 +154,14 @@ let MessageItemMetadata = ({ ) const relativeTimestamp = useCallback( - (timestamp: string) => { + (i18n: I18n, timestamp: string) => { const date = new Date(timestamp) const now = new Date() - const time = new Intl.DateTimeFormat(undefined, { + const time = i18n.date(date, { hour: 'numeric', minute: 'numeric', - }).format(date) + }) const diff = now.getTime() - date.getTime() @@ -182,13 +183,13 @@ let MessageItemMetadata = ({ return _(msg`Yesterday, ${time}`) } - return new Intl.DateTimeFormat(undefined, { + return i18n.date(date, { hour: 'numeric', minute: 'numeric', day: 'numeric', month: 'numeric', year: 'numeric', - }).format(date) + }) }, [_], ) 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) -} |