Simplify post number formatting (#8978)
* revert number formatting change * use formatPostStatCount in repost web
This commit is contained in:
@@ -4,7 +4,6 @@ import {useLingui} from '@lingui/react'
|
|||||||
import {useRequireAuth} from '#/state/session'
|
import {useRequireAuth} from '#/state/session'
|
||||||
import {useSession} from '#/state/session'
|
import {useSession} from '#/state/session'
|
||||||
import {EventStopper} from '#/view/com/util/EventStopper'
|
import {EventStopper} from '#/view/com/util/EventStopper'
|
||||||
import {formatCount} from '#/view/com/util/numeric/format'
|
|
||||||
import {useTheme} from '#/alf'
|
import {useTheme} from '#/alf'
|
||||||
import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
|
import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
|
||||||
import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
|
import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
|
||||||
@@ -14,6 +13,7 @@ import {
|
|||||||
PostControlButtonIcon,
|
PostControlButtonIcon,
|
||||||
PostControlButtonText,
|
PostControlButtonText,
|
||||||
} from './PostControlButton'
|
} from './PostControlButton'
|
||||||
|
import {useFormatPostStatCount} from './util'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isReposted: boolean
|
isReposted: boolean
|
||||||
@@ -33,9 +33,10 @@ export const RepostButton = ({
|
|||||||
embeddingDisabled,
|
embeddingDisabled,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {_, i18n} = useLingui()
|
const {_} = useLingui()
|
||||||
const {hasSession} = useSession()
|
const {hasSession} = useSession()
|
||||||
const requireAuth = useRequireAuth()
|
const requireAuth = useRequireAuth()
|
||||||
|
const formatPostStatCount = useFormatPostStatCount()
|
||||||
|
|
||||||
return hasSession ? (
|
return hasSession ? (
|
||||||
<EventStopper onKeyDown={false}>
|
<EventStopper onKeyDown={false}>
|
||||||
@@ -53,7 +54,7 @@ export const RepostButton = ({
|
|||||||
<PostControlButtonIcon icon={Repost} />
|
<PostControlButtonIcon icon={Repost} />
|
||||||
{typeof repostCount !== 'undefined' && repostCount > 0 && (
|
{typeof repostCount !== 'undefined' && repostCount > 0 && (
|
||||||
<PostControlButtonText testID="repostCount">
|
<PostControlButtonText testID="repostCount">
|
||||||
{formatCount(i18n, repostCount)}
|
{formatPostStatCount(repostCount)}
|
||||||
</PostControlButtonText>
|
</PostControlButtonText>
|
||||||
)}
|
)}
|
||||||
</PostControlButton>
|
</PostControlButton>
|
||||||
@@ -105,7 +106,7 @@ export const RepostButton = ({
|
|||||||
<PostControlButtonIcon icon={Repost} />
|
<PostControlButtonIcon icon={Repost} />
|
||||||
{typeof repostCount !== 'undefined' && repostCount > 0 && (
|
{typeof repostCount !== 'undefined' && repostCount > 0 && (
|
||||||
<PostControlButtonText testID="repostCount">
|
<PostControlButtonText testID="repostCount">
|
||||||
{formatCount(i18n, repostCount)}
|
{formatPostStatCount(repostCount)}
|
||||||
</PostControlButtonText>
|
</PostControlButtonText>
|
||||||
)}
|
)}
|
||||||
</PostControlButton>
|
</PostControlButton>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import {useCallback} from 'react'
|
import {useCallback} from 'react'
|
||||||
import {msg} from '@lingui/macro'
|
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -12,36 +11,13 @@ export function useFormatPostStatCount() {
|
|||||||
|
|
||||||
return useCallback(
|
return useCallback(
|
||||||
(postStatCount: number) => {
|
(postStatCount: number) => {
|
||||||
const isOver1k = postStatCount >= 1_000
|
|
||||||
const isOver10k = postStatCount >= 10_000
|
const isOver10k = postStatCount >= 10_000
|
||||||
const isOver1M = postStatCount >= 1_000_000
|
return i18n.number(postStatCount, {
|
||||||
const formatted = i18n.number(postStatCount, {
|
|
||||||
notation: 'compact',
|
notation: 'compact',
|
||||||
maximumFractionDigits: isOver10k ? 0 : 1,
|
maximumFractionDigits: isOver10k ? 0 : 1,
|
||||||
// @ts-expect-error - roundingMode not in the types
|
// @ts-expect-error - roundingMode not in the types
|
||||||
roundingMode: 'trunc',
|
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],
|
[i18n],
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user