[CORL-920] use SHORT_NUMBER fluent function to format comment counts (#2846)

* use SHORT_NUMBER fluent function to format comment counts

* fix: short number algo

* chore: remove whitespace

* chore: rename var

Co-authored-by: Vinh <vinh@vinh.tech>

package-lock.json

@@ -26560,7 +26560,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         }

src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx

@@ -72,7 +72,12 @@ const Navigation: FunctionComponent<Props> = ({
         </Localized>
         {isNumber(reportedCount) && (
           <Counter data-testid="moderate-navigation-reported-count">
-            {reportedCount}
+            <Localized
+              id="moderate-navigation-comment-count"
+              $count={reportedCount}
+            >
+              {reportedCount}
+            </Localized>
           </Counter>
         )}
       </NavigationLink>
@@ -83,7 +88,12 @@ const Navigation: FunctionComponent<Props> = ({
         </Localized>
         {isNumber(pendingCount) && (
           <Counter data-testid="moderate-navigation-pending-count">
-            {pendingCount}
+            <Localized
+              id="moderate-navigation-comment-count"
+              $count={pendingCount}
+            >
+              {pendingCount}
+            </Localized>
           </Counter>
         )}
       </NavigationLink>
@@ -94,7 +104,12 @@ const Navigation: FunctionComponent<Props> = ({
         </Localized>
         {isNumber(unmoderatedCount) && (
           <Counter data-testid="moderate-navigation-unmoderated-count">
-            {unmoderatedCount}
+            <Localized
+              id="moderate-navigation-comment-count"
+              $count={unmoderatedCount}
+            >
+              {unmoderatedCount}
+            </Localized>
           </Counter>
         )}
       </NavigationLink>

src/core/client/framework/lib/i18n/types/FluentShortNumber.ts

@@ -1,6 +1,7 @@
 import {
   FluentBundle,
   FluentNumber,
+  FluentScope,
   FluentType,
   Pattern,
 } from "@fluent/bundle/compat";
@@ -20,20 +21,21 @@ export function getShortNumberCode(n: number) {
   return code;
 }
 
-function formatShortNumber(n: number, format: Pattern, bundle: FluentBundle) {
+function formatShortNumber(n: number, format: Pattern, scope: FluentScope) {
   const lastIndexOf0 = format.lastIndexOf("0");
   const unit = format.substr(lastIndexOf0 + 1);
   const rest = format.substr(0, lastIndexOf0 + 1);
   const splitted = rest.split(".");
   const digits = splitted[0].length;
-  const fractalDigits = (splitted.length > 1 && splitted[1].length) || 0;
+  const fractionDigits = (splitted.length > 1 && splitted[1].length) || 0;
   const threshold = Math.pow(10, digits);
-  while (n > threshold) {
+
+  while (n >= threshold) {
     n /= 10;
   }
   const formattedNumber = new FluentNumber(n, {
-    maximumFractionDigits: fractalDigits,
-  }).toString(bundle);
+    maximumFractionDigits: fractionDigits,
+  }).toString(scope);
   return `${formattedNumber}${unit}`;
 }
 
@@ -42,23 +44,23 @@ export default class FluentShortNumber extends FluentNumber {
     super(value, opts);
   }
 
-  public toString(bundle: FluentBundle) {
+  public toString(scope: FluentScope) {
     if (this.value < 1000) {
-      return super.toString(bundle);
+      return super.toString(scope);
     }
     const key = `framework-shortNumber-${getShortNumberCode(this.value)}`;
-    const fmt = bundle.getMessage(key);
+    const fmt = scope.bundle.getMessage(key);
 
     // Handle message not found.
     if (!fmt) {
-      const message = `Missing translation key for ${key} for languages ${bundle.locales.toString()}`;
+      const message = `Missing translation key for ${key} for languages ${scope.bundle.locales.toString()}`;
       if (process.env.NODE_ENV === "production") {
         // eslint-disable-next-line no-console
         console.warn(message);
       } else {
         throw new Error(message);
       }
-      return super.toString(bundle);
+      return super.toString(scope);
     }
 
     // Check for invalid message.
@@ -70,10 +72,10 @@ export default class FluentShortNumber extends FluentNumber {
       } else {
         throw new Error(message);
       }
-      return super.toString(bundle);
+      return super.toString(scope);
     }
 
-    return formatShortNumber(this.value, fmt.value, bundle);
+    return formatShortNumber(this.value, fmt.value, scope);
   }
 
   public match(bundle: FluentBundle, other: FluentType) {

src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx

@@ -210,7 +210,12 @@ export const StreamContainer: FunctionComponent<Props> = props => {
                           : "grey"
                       }
                     >
-                      {featuredCommentsCount}
+                      <Localized
+                        id="comments-counter-shortNum"
+                        $count={featuredCommentsCount}
+                      >
+                        {featuredCommentsCount}
+                      </Localized>
                     </Counter>
                   </Flex>
                 </TabWithFeaturedTooltip>
@@ -234,7 +239,12 @@ export const StreamContainer: FunctionComponent<Props> = props => {
                       local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
                     }
                   >
-                    {allCommentsCount}
+                    <Localized
+                      id="comments-counter-shortNum"
+                      $count={allCommentsCount}
+                    >
+                      {allCommentsCount}
+                    </Localized>
                   </Counter>
                 </Flex>
               </Tab>

src/locales/en-US/admin.ftl

@@ -560,6 +560,7 @@ moderate-navigation-reported = reported
 moderate-navigation-pending = Pending
 moderate-navigation-unmoderated = unmoderated
 moderate-navigation-rejected = rejected
+moderate-navigation-comment-count = { SHORT_NUMBER($count) }
 
 moderate-marker-preMod = Pre-mod
 moderate-marker-link = Link

src/locales/en-US/stream.ftl

@@ -28,6 +28,7 @@ comment-count-text =
 
 comments-allCommentsTab = All Comments
 comments-featuredTab = Featured
+comments-counter-shortNum = { SHORT_NUMBER($count) }
 comments-featuredCommentTooltip-how = How is a comment featured?
 comments-featuredCommentTooltip-handSelectedComments =
   Comments are chosen by our team as worth reading.

src/types/fluent.d.ts

@@ -76,12 +76,18 @@ declare module "@fluent/bundle/compat" {
     ): string;
   }
 
+  export interface FluentScope {
+    bundle: FluentBundle;
+    errors?: Error[];
+    args?: object;
+  }
+
   export class FluentType {
     protected value: any;
     protected opts: any;
     constructor(value: any, opts?: any);
     public valueOf(): any;
-    public toString(bundle: FluentBundle): string;
+    public toString(scope: FluentScope): string;
   }
 
   export class FluentNumber extends FluentType {}