From d883ab029c10f3f97498b015029241e0a197d0e7 Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Wed, 19 Feb 2020 15:13:16 -0500 Subject: [PATCH] [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 --- package-lock.json | 2 +- .../ModerateNavigation/Navigation.tsx | 21 ++++++++++++--- .../lib/i18n/types/FluentShortNumber.ts | 26 ++++++++++--------- .../tabs/Comments/Stream/StreamContainer.tsx | 14 ++++++++-- src/locales/en-US/admin.ftl | 1 + src/locales/en-US/stream.ftl | 1 + src/types/fluent.d.ts | 8 +++++- 7 files changed, 54 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6f1c2daa9..bd3093c47 100644 --- a/package-lock.json +++ b/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 } diff --git a/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx b/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx index 6642d6915..9587b1483 100644 --- a/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx +++ b/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx @@ -72,7 +72,12 @@ const Navigation: FunctionComponent = ({ {isNumber(reportedCount) && ( - {reportedCount} + + {reportedCount} + )} @@ -83,7 +88,12 @@ const Navigation: FunctionComponent = ({ {isNumber(pendingCount) && ( - {pendingCount} + + {pendingCount} + )} @@ -94,7 +104,12 @@ const Navigation: FunctionComponent = ({ {isNumber(unmoderatedCount) && ( - {unmoderatedCount} + + {unmoderatedCount} + )} diff --git a/src/core/client/framework/lib/i18n/types/FluentShortNumber.ts b/src/core/client/framework/lib/i18n/types/FluentShortNumber.ts index ef664f431..265b61e9d 100644 --- a/src/core/client/framework/lib/i18n/types/FluentShortNumber.ts +++ b/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) { diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx index 663ed8e6a..1d3fd8bbb 100644 --- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx @@ -210,7 +210,12 @@ export const StreamContainer: FunctionComponent = props => { : "grey" } > - {featuredCommentsCount} + + {featuredCommentsCount} + @@ -234,7 +239,12 @@ export const StreamContainer: FunctionComponent = props => { local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey" } > - {allCommentsCount} + + {allCommentsCount} + diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index d35f3e66b..6c9608106 100644 --- a/src/locales/en-US/admin.ftl +++ b/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 diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index 94d22019b..f63e3fbee 100644 --- a/src/locales/en-US/stream.ftl +++ b/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. diff --git a/src/types/fluent.d.ts b/src/types/fluent.d.ts index 169802ccf..ce85547a4 100644 --- a/src/types/fluent.d.ts +++ b/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 {}