use JSX for plural to fix invalid translation output

This commit is contained in:
Samuel Newman
2026-07-24 18:26:19 +03:00
parent 98e135f489
commit d04b7208f3
3 changed files with 135 additions and 129 deletions
@@ -1,8 +1,7 @@
import {useMemo} from 'react' import {useMemo} from 'react'
import {Pressable, View} from 'react-native' import {Pressable, View} from 'react-native'
import {type AppBskyUnspeccedDefs, moderateProfile} from '@atproto/api' import {type AppBskyUnspeccedDefs, moderateProfile} from '@atproto/api'
import {plural} from '@lingui/core/macro' import {Plural, Trans, useLingui} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useTrendingSettings} from '#/state/preferences/trending' import {useTrendingSettings} from '#/state/preferences/trending'
@@ -149,6 +148,7 @@ function TrendRow({
const {t: l, i18n} = useLingui() const {t: l, i18n} = useLingui()
const actors = useModerateTrendingActors(trend.actors) const actors = useModerateTrendingActors(trend.actors)
const formattedPostCount = formatCount(i18n, trend.postCount)
return ( return (
<Link <Link
@@ -202,8 +202,12 @@ function TrendRow({
style={[a.text_sm, t.atoms.text_contrast_medium]} style={[a.text_sm, t.atoms.text_contrast_medium]}
numberOfLines={1}> numberOfLines={1}>
<Trans comment="'{postCount} {posts}', e.g., '1.2K posts'"> <Trans comment="'{postCount} {posts}', e.g., '1.2K posts'">
{formatCount(i18n, trend.postCount)}{' '} {formattedPostCount}{' '}
{plural(trend.postCount, {one: 'post', other: 'posts'})} <Plural
value={{postCount: trend.postCount}}
one="post"
other="posts"
/>
</Trans> </Trans>
</Text> </Text>
</View> </View>
File diff suppressed because one or more lines are too long
@@ -6,8 +6,7 @@ import {
moderateProfile, moderateProfile,
RichText as RichTextApi, RichText as RichTextApi,
} from '@atproto/api' } from '@atproto/api'
import {plural} from '@lingui/core/macro' import {Plural, Trans, useLingui} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useTrendingSettings} from '#/state/preferences/trending' import {useTrendingSettings} from '#/state/preferences/trending'
@@ -88,6 +87,7 @@ export function TrendRow({
const gutters = useGutters([0, 'base']) const gutters = useGutters([0, 'base'])
const actors = useModerateTrendingActors(trend.actors) const actors = useModerateTrendingActors(trend.actors)
const formattedPostCount = formatCount(i18n, trend.postCount)
const description = useMemo(() => { const description = useMemo(() => {
if (!trend.description) return if (!trend.description) return
@@ -146,8 +146,12 @@ export function TrendRow({
style={[a.text_sm, t.atoms.text_contrast_medium]} style={[a.text_sm, t.atoms.text_contrast_medium]}
numberOfLines={1}> numberOfLines={1}>
<Trans comment="'{postCount} {posts}', e.g., '1.2K posts'"> <Trans comment="'{postCount} {posts}', e.g., '1.2K posts'">
{formatCount(i18n, trend.postCount)}{' '} {formattedPostCount}{' '}
{plural(trend.postCount, {one: 'post', other: 'posts'})} <Plural
value={{postCount: trend.postCount}}
one="post"
other="posts"
/>
</Trans> </Trans>
</Text> </Text>
</View> </View>