Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 2 commits into from
Sep 1, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fa2e83
Use Intl.RelativeTimeFormat for "last week" and "last month"
t3chguy Sep 1, 2023
23b5d1a
i18n
t3chguy Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/components/views/messages/DateSeparator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -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"
/>
Expand Down
4 changes: 1 addition & 3 deletions src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,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.",
Expand Down
Loading