feat(memberCount): format count according to user locale (#1679)

This commit is contained in:
Ryan Cao 2023-09-06 01:46:33 +08:00 committed by GitHub
parent faeb4fb585
commit aecd9d8fda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -30,6 +30,9 @@ const ChannelMemberStore = findStoreLazy("ChannelMemberStore") as FluxStore & {
getProps(guildId: string, channelId: string): { groups: { count: number; id: string; }[]; };
};
const sharedIntlNumberFormat = new Intl.NumberFormat();
const numberFormat = (value: number) => sharedIntlNumberFormat.format(value);
function MemberCount() {
const { id: channelId, guild_id: guildId } = useStateFromStores([SelectedChannelStore], () => getCurrentChannel());
const { groups } = useStateFromStores(
@ -57,7 +60,7 @@ function MemberCount() {
alignContent: "center",
gap: 0
}}>
<Tooltip text={`${online} Online in this Channel`} position="bottom">
<Tooltip text={`${numberFormat(online)} online in this channel`} position="bottom">
{props => (
<div {...props}>
<span
@ -70,11 +73,11 @@ function MemberCount() {
marginRight: "0.5em"
}}
/>
<span style={{ color: "var(--green-360)" }}>{online}</span>
<span style={{ color: "var(--green-360)" }}>{numberFormat(online)}</span>
</div>
)}
</Tooltip>
<Tooltip text={`${total} Total Server Members`} position="bottom">
<Tooltip text={`${numberFormat(total)} total server members`} position="bottom">
{props => (
<div {...props}>
<span
@ -88,7 +91,7 @@ function MemberCount() {
marginLeft: "1em"
}}
/>
<span style={{ color: "var(--primary-400)" }}>{total}</span>
<span style={{ color: "var(--primary-400)" }}>{numberFormat(total)}</span>
</div>
)}
</Tooltip>