Use Intl.RelativeTimeFormat for "last week" and "last month" (#11511)

* Use Intl.RelativeTimeFormat for "last week" and "last month" * i18n
matrix-org · Sep 1, 2023 · fbe5a7d · fbe5a7d
1 parent a54f2ff
commit fbe5a7d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
@@ -18,6 +18,7 @@ limitations under the License.
 import React from "react";
 import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { capitalize } from "lodash";
 
 import { _t, getUserLanguage } from "../../../languageHandler";
 import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
@@ -92,6 +93,10 @@ export default class DateSeparator extends React.Component<IProps, IState> {
         });
     };
 
+    private get relativeTimeFormat(): Intl.RelativeTimeFormat {
+        return new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
+    }
+
     private getLabel(): string {
         const date = new Date(this.props.ts);
         const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
@@ -104,11 +109,10 @@ export default class DateSeparator extends React.Component<IProps, IState> {
         const days = getDaysArray("long");
         yesterday.setDate(today.getDate() - 1);
 
-        const relativeTimeFormat = new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
         if (date.toDateString() === today.toDateString()) {
-            return relativeTimeFormat.format(0, "day"); // Today
+            return this.relativeTimeFormat.format(0, "day"); // Today
         } else if (date.toDateString() === yesterday.toDateString()) {
-            return relativeTimeFormat.format(-1, "day"); // Yesterday
+            return this.relativeTimeFormat.format(-1, "day"); // Yesterday
         } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
             return days[date.getDay()]; // Sunday-Saturday
         } else {
@@ -263,19 +267,20 @@ export default class DateSeparator extends React.Component<IProps, IState> {
     private renderJumpToDateMenu(): React.ReactElement {
         let contextMenu: JSX.Element | undefined;
         if (this.state.contextMenuPosition) {
+            const relativeTimeFormat = this.relativeTimeFormat;
             contextMenu = (
                 <IconizedContextMenu
                     {...contextMenuBelow(this.state.contextMenuPosition)}
                     onFinished={this.onContextMenuCloseClick}
                 >
                     <IconizedContextMenuOptionList first>
                         <IconizedContextMenuOption
-                            label={_t("time|last_week")}
+                            label={capitalize(relativeTimeFormat.format(-1, "week"))}
                             onClick={this.onLastWeekClicked}
                             data-testid="jump-to-date-last-week"
                         />
                         <IconizedContextMenuOption
-                            label={_t("time|last_month")}
+                            label={capitalize(relativeTimeFormat.format(-1, "month"))}
                             onClick={this.onLastMonthClicked}
                             data-testid="jump-to-date-last-month"
                         />

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -218,9 +218,7 @@
         "short_seconds": "%(value)ss",
         "short_days_hours_minutes_seconds": "%(days)sd %(hours)sh %(minutes)sm %(seconds)ss",
         "short_hours_minutes_seconds": "%(hours)sh %(minutes)sm %(seconds)ss",
-        "short_minutes_seconds": "%(minutes)sm %(seconds)ss",
-        "last_week": "Last week",
-        "last_month": "Last month"
+        "short_minutes_seconds": "%(minutes)sm %(seconds)ss"
     },
     "Identity server has no terms of service": "Identity server has no terms of service",
     "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.": "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.",