diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/PostControls/RepostButton.tsx | 9 | ||||
-rw-r--r-- | src/components/PostControls/index.tsx | 11 | ||||
-rw-r--r-- | src/components/PostControls/util.ts | 58 | ||||
-rw-r--r-- | src/components/StarterPack/ProfileStarterPacks.tsx | 2 | ||||
-rw-r--r-- | src/components/ageAssurance/AgeRestrictedScreen.tsx | 6 | ||||
-rw-r--r-- | src/components/dialogs/nuxs/BookmarksAnnouncement.tsx | 6 |
6 files changed, 59 insertions, 33 deletions
diff --git a/src/components/PostControls/RepostButton.tsx b/src/components/PostControls/RepostButton.tsx index 522e80dd3..d4a3960a7 100644 --- a/src/components/PostControls/RepostButton.tsx +++ b/src/components/PostControls/RepostButton.tsx @@ -10,7 +10,7 @@ import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote' import {Repost_Stroke2_Corner3_Rounded as Repost} from '#/components/icons/Repost' -import {formatPostStatCount} from '#/components/PostControls/util' +import {useFormatPostStatCount} from '#/components/PostControls/util' import {Text} from '#/components/Typography' import { PostControlButton, @@ -25,7 +25,6 @@ interface Props { onQuote: () => void big?: boolean embeddingDisabled: boolean - compactCount?: boolean } let RepostButton = ({ @@ -35,12 +34,12 @@ let RepostButton = ({ onQuote, big, embeddingDisabled, - compactCount, }: Props): React.ReactNode => { const t = useTheme() - const {_, i18n} = useLingui() + const {_} = useLingui() const requireAuth = useRequireAuth() const dialogControl = Dialog.useDialogControl() + const formatPostStatCount = useFormatPostStatCount() const onPress = () => requireAuth(() => dialogControl.open()) @@ -88,7 +87,7 @@ let RepostButton = ({ <PostControlButtonIcon icon={Repost} /> {typeof repostCount !== 'undefined' && repostCount > 0 && ( <PostControlButtonText testID="repostCount"> - {formatPostStatCount(i18n, repostCount, {compact: compactCount})} + {formatPostStatCount(repostCount)} </PostControlButtonText> )} </PostControlButton> diff --git a/src/components/PostControls/index.tsx b/src/components/PostControls/index.tsx index 834ad8e7d..f91bcd8a5 100644 --- a/src/components/PostControls/index.tsx +++ b/src/components/PostControls/index.tsx @@ -27,7 +27,7 @@ import { import * as Toast from '#/view/com/util/Toast' import {atoms as a, flatten, useBreakpoints} from '#/alf' import {Reply as Bubble} from '#/components/icons/Reply' -import {formatPostStatCount} from '#/components/PostControls/util' +import {useFormatPostStatCount} from '#/components/PostControls/util' import {BookmarkButton} from './BookmarkButton' import { PostControlButton, @@ -69,7 +69,7 @@ let PostControls = ({ viaRepost?: {uri: string; cid: string} variant?: 'compact' | 'normal' | 'large' }): React.ReactNode => { - const {_, i18n} = useLingui() + const {_} = useLingui() const {openComposer} = useOpenComposer() const {feedDescriptor} = useFeedFeedbackContext() const [queueLike, queueUnlike] = usePostLikeMutationQueue( @@ -95,6 +95,7 @@ let PostControls = ({ ) const replyDisabled = post.viewer?.replyDisabled const {gtPhone} = useBreakpoints() + const formatPostStatCount = useFormatPostStatCount() const [hasLikeIconBeenToggled, setHasLikeIconBeenToggled] = useState(false) @@ -232,9 +233,7 @@ let PostControls = ({ <PostControlButtonIcon icon={Bubble} /> {typeof post.replyCount !== 'undefined' && post.replyCount > 0 && ( <PostControlButtonText> - {formatPostStatCount(i18n, post.replyCount, { - compact: variant === 'compact', - })} + {formatPostStatCount(post.replyCount)} </PostControlButtonText> )} </PostControlButton> @@ -247,7 +246,6 @@ let PostControls = ({ onQuote={onQuote} big={big} embeddingDisabled={Boolean(post.viewer?.embeddingDisabled)} - compactCount={variant === 'compact'} /> </View> <View style={[a.flex_1, a.align_start]}> @@ -288,7 +286,6 @@ let PostControls = ({ big={big} isLiked={Boolean(post.viewer?.like)} hasBeenToggled={hasLikeIconBeenToggled} - compactCount={variant === 'compact'} /> </PostControlButton> </View> diff --git a/src/components/PostControls/util.ts b/src/components/PostControls/util.ts index 5d3ea74e4..b8050a85a 100644 --- a/src/components/PostControls/util.ts +++ b/src/components/PostControls/util.ts @@ -1,24 +1,48 @@ -import {type I18n} from '@lingui/core' +import {useCallback} from 'react' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' /** * This matches `formatCount` from `view/com/util/numeric/format.ts`, but has * additional truncation logic for large numbers. `roundingMode` should always * match the original impl, regardless of if we add more formatting here. */ -export function formatPostStatCount( - i18n: I18n, - count: number, - { - compact = false, - }: { - compact?: boolean - } = {}, -): string { - const isOver10k = count >= 10_000 - return i18n.number(count, { - notation: 'compact', - maximumFractionDigits: isOver10k || compact ? 0 : 1, - // @ts-expect-error - roundingMode not in the types - roundingMode: 'trunc', - }) +export function useFormatPostStatCount() { + const {i18n} = useLingui() + + return useCallback( + (postStatCount: number) => { + const isOver1k = postStatCount >= 1_000 + const isOver10k = postStatCount >= 10_000 + const isOver1M = postStatCount >= 1_000_000 + const formatted = i18n.number(postStatCount, { + notation: 'compact', + maximumFractionDigits: isOver10k ? 0 : 1, + // @ts-expect-error - roundingMode not in the types + roundingMode: 'trunc', + }) + const count = formatted.replace(/\D+$/g, '') + + if (isOver1M) { + return i18n._( + msg({ + message: `${count}M`, + comment: + 'For post statistics. Indicates a number in the millions. Please use the shortest format appropriate for your language.', + }), + ) + } else if (isOver1k) { + return i18n._( + msg({ + message: `${count}K`, + comment: + 'For post statistics. Indicates a number in the thousands. Please use the shortest format appropriate for your language.', + }), + ) + } else { + return count + } + }, + [i18n], + ) } diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx index 73aee28f4..bbe0bc52b 100644 --- a/src/components/StarterPack/ProfileStarterPacks.tsx +++ b/src/components/StarterPack/ProfileStarterPacks.tsx @@ -214,7 +214,7 @@ function Empty() { onError: e => { logger.error('Failed to generate starter pack', {safeMessage: e}) setIsGenerating(false) - if (e.name === 'NOT_ENOUGH_FOLLOWERS') { + if (e.message.includes('NOT_ENOUGH_FOLLOWERS')) { followersDialogControl.open() } else { errorDialogControl.open() diff --git a/src/components/ageAssurance/AgeRestrictedScreen.tsx b/src/components/ageAssurance/AgeRestrictedScreen.tsx index b47cc5b0c..1430aaaff 100644 --- a/src/components/ageAssurance/AgeRestrictedScreen.tsx +++ b/src/components/ageAssurance/AgeRestrictedScreen.tsx @@ -18,10 +18,12 @@ export function AgeRestrictedScreen({ children, screenTitle, infoText, + rightHeaderSlot, }: { children: React.ReactNode screenTitle?: string infoText?: string + rightHeaderSlot?: React.ReactNode }) { const {_} = useLingui() const copy = useAgeAssuranceCopy() @@ -46,12 +48,12 @@ export function AgeRestrictedScreen({ <Layout.Screen> <Layout.Header.Outer> <Layout.Header.BackButton /> - <Layout.Header.Content> + <Layout.Header.Content align="left"> <Layout.Header.TitleText> {screenTitle ?? <Trans>Unavailable</Trans>} </Layout.Header.TitleText> </Layout.Header.Content> - <Layout.Header.Slot /> + {rightHeaderSlot ?? <Layout.Header.Slot />} </Layout.Header.Outer> <Layout.Content> <View style={[a.p_lg]}> diff --git a/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx b/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx index c63558334..266e226a6 100644 --- a/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx +++ b/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx @@ -117,7 +117,11 @@ export function BookmarksAnnouncement() { }, ]} alt={_( - msg`A screenshot of a post with a new button next to the share button that allows you to save the post to your bookmarks. The post is from @jcsalterego.bsky.social and reads "inventing a saturday that immediately follows monday".`, + msg({ + message: `A screenshot of a post with a new button next to the share button that allows you to save the post to your bookmarks. The post is from @jcsalterego.bsky.social and reads "inventing a saturday that immediately follows monday".`, + comment: + 'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.', + }), )} /> </View> |