Format large numbers (#556)

zio/stable
Ollie H 2023-05-01 11:31:00 -07:00 committed by GitHub
parent 7171d0404e
commit 0ec98c77ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 4 deletions

View File

@ -33,6 +33,7 @@ import {NavigationProp} from 'lib/routes/types'
import {isDesktopWeb} from 'platform/detection'
import {FollowState} from 'state/models/cache/my-follows'
import {shareUrl} from 'lib/sharing'
import {formatCount} from '../util/numeric/format'
const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
@ -364,7 +365,7 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{view.followersCount}
{formatCount(view.followersCount)}
</Text>
<Text type="md" style={[pal.textLight]}>
{pluralize(view.followersCount, 'follower')}
@ -375,7 +376,7 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{view.followsCount}
{formatCount(view.followsCount)}
</Text>
<Text type="md" style={[pal.textLight]}>
following

View File

@ -0,0 +1,5 @@
export const formatCount = (num: number) =>
Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(num)

View File

@ -39,6 +39,7 @@ import {getTabState, TabState} from 'lib/routes/helpers'
import {NavigationProp} from 'lib/routes/types'
import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
import {isWeb} from 'platform/detection'
import {formatCount} from 'view/com/util/numeric/format'
export const DrawerContent = observer(() => {
const theme = useTheme()
@ -133,11 +134,11 @@ export const DrawerContent = observer(() => {
type="xl"
style={[pal.textLight, styles.profileCardFollowers]}>
<Text type="xl-medium" style={pal.text}>
{store.me.followersCount || 0}
{formatCount(store.me.followersCount ?? 0)}
</Text>{' '}
{pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
<Text type="xl-medium" style={pal.text}>
{store.me.followsCount || 0}
{formatCount(store.me.followsCount ?? 0)}
</Text>{' '}
following
</Text>