From fbe5a7d4b8181c050889519238dd16514dcdad42 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 1 Sep 2023 12:52:24 +0100
Subject: [PATCH] Use Intl.RelativeTimeFormat for "last week" and "last month"
 (#11511)

* Use Intl.RelativeTimeFormat for "last week" and "last month"

* i18n
---
 src/components/views/messages/DateSeparator.tsx | 15 ++++++++++-----
 src/i18n/strings/en_EN.json                     |  4 +---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index 69f85f73d6..8c8b1eefb8 100644
--- 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,6 +267,7 @@ 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)}
@@ -270,12 +275,12 @@ export default class DateSeparator extends React.Component<IProps, IState> {
                 >
                     <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
index b8737469c0..96bc6e52cd 100644
--- 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.",