From aecd9d8fda932cc2229a84a45937877b20625758 Mon Sep 17 00:00:00 2001
From: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Date: Wed, 6 Sep 2023 01:46:33 +0800
Subject: [PATCH] feat(memberCount): format count according to user locale
 (#1679)

---
 src/plugins/memberCount.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/plugins/memberCount.tsx b/src/plugins/memberCount.tsx
index 7f8b868e5..ecdb8afb8 100644
--- a/src/plugins/memberCount.tsx
+++ b/src/plugins/memberCount.tsx
@@ -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>