robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Simplify post number formatting (#8978)
* revert number formatting change
* use formatPostStatCount in repost web
samuel.fm
+5
-4
src/components/PostControls/RepostButton.web.tsx
+5
-4
src/components/PostControls/RepostButton.web.tsx
···
4
4
import {useRequireAuth} from '#/state/session'
5
5
import {useSession} from '#/state/session'
6
6
import {EventStopper} from '#/view/com/util/EventStopper'
7
-
import {formatCount} from '#/view/com/util/numeric/format'
8
7
import {useTheme} from '#/alf'
9
8
import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
10
9
import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
···
14
13
PostControlButtonIcon,
15
14
PostControlButtonText,
16
15
} from './PostControlButton'
16
+
import {useFormatPostStatCount} from './util'
17
17
18
18
interface Props {
19
19
isReposted: boolean
···
33
33
embeddingDisabled,
34
34
}: Props) => {
35
35
const t = useTheme()
36
-
const {_, i18n} = useLingui()
36
+
const {_} = useLingui()
37
37
const {hasSession} = useSession()
38
38
const requireAuth = useRequireAuth()
39
+
const formatPostStatCount = useFormatPostStatCount()
39
40
40
41
return hasSession ? (
41
42
<EventStopper onKeyDown={false}>
···
53
54
<PostControlButtonIcon icon={Repost} />
54
55
{typeof repostCount !== 'undefined' && repostCount > 0 && (
55
56
<PostControlButtonText testID="repostCount">
56
-
{formatCount(i18n, repostCount)}
57
+
{formatPostStatCount(repostCount)}
57
58
</PostControlButtonText>
58
59
)}
59
60
</PostControlButton>
···
105
106
<PostControlButtonIcon icon={Repost} />
106
107
{typeof repostCount !== 'undefined' && repostCount > 0 && (
107
108
<PostControlButtonText testID="repostCount">
108
-
{formatCount(i18n, repostCount)}
109
+
{formatPostStatCount(repostCount)}
109
110
</PostControlButtonText>
110
111
)}
111
112
</PostControlButton>
+1
-25
src/components/PostControls/util.ts
+1
-25
src/components/PostControls/util.ts
···
1
1
import {useCallback} from 'react'
2
-
import {msg} from '@lingui/macro'
3
2
import {useLingui} from '@lingui/react'
4
3
5
4
/**
···
12
11
13
12
return useCallback(
14
13
(postStatCount: number) => {
15
-
const isOver1k = postStatCount >= 1_000
16
14
const isOver10k = postStatCount >= 10_000
17
-
const isOver1M = postStatCount >= 1_000_000
18
-
const formatted = i18n.number(postStatCount, {
15
+
return i18n.number(postStatCount, {
19
16
notation: 'compact',
20
17
maximumFractionDigits: isOver10k ? 0 : 1,
21
18
// @ts-expect-error - roundingMode not in the types
22
19
roundingMode: 'trunc',
23
20
})
24
-
const count = formatted.replace(/\D+$/g, '')
25
-
26
-
if (isOver1M) {
27
-
return i18n._(
28
-
msg({
29
-
message: `${count}M`,
30
-
comment:
31
-
'For post statistics. Indicates a number in the millions. Please use the shortest format appropriate for your language.',
32
-
}),
33
-
)
34
-
} else if (isOver1k) {
35
-
return i18n._(
36
-
msg({
37
-
message: `${count}K`,
38
-
comment:
39
-
'For post statistics. Indicates a number in the thousands. Please use the shortest format appropriate for your language.',
40
-
}),
41
-
)
42
-
} else {
43
-
return count
44
-
}
45
21
},
46
22
[i18n],
47
23
)