1
0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-09 08:42:50 +03:00

Use Intl to localise dates and times (#11422)

* Use Intl to generate better internationalised date formats

* Get `Yesterday` and `Today` from Intl also

* Correct capitalisation blunder

* Fix formatTime include weekday

* Iterate

* Fix tests

* use jest setSystemTime

* Discard changes to cypress/e2e/settings/general-user-settings-tab.spec.ts

* Discard changes to res/css/_components.pcss

* Discard changes to res/css/views/elements/_LanguageDropdown.pcss

* Discard changes to src/components/views/elements/LanguageDropdown.tsx

* Add docs & tests for getDaysArray & getMonthsArray

* Discard changes to test/components/structures/__snapshots__/MatrixChat-test.tsx.snap

* Consolidate consts

* Improve testing & documentation

* Update snapshot

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Iterate

* Clarify comments

* Update src/DateUtils.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Specify hourCycle

* Discard changes to test/components/views/settings/devices/DeviceDetails-test.tsx

* Update comments

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Michael Telatynski
2023-08-21 20:38:59 +01:00
committed by GitHub
parent d4571aef68
commit 3c52ba0c92
21 changed files with 446 additions and 193 deletions

View File

@@ -96,6 +96,7 @@ const mockEvents = (room: Room, count = 2): MatrixEvent[] => {
type: EventType.RoomMessage,
sender: "userId",
content: createMessageEventContent("`Event${index}`"),
origin_server_ts: index,
}),
);
}
@@ -447,7 +448,7 @@ describe("TimelinePanel", () => {
render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline });
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: otherTimeline, liveEvent: true };
client.emit(RoomEvent.Timeline, event, room, false, false, data);
@@ -463,7 +464,7 @@ describe("TimelinePanel", () => {
render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline });
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
client.emit(RoomEvent.Timeline, event, room, false, false, data);
@@ -479,7 +480,7 @@ describe("TimelinePanel", () => {
render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline });
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
const toStartOfTimeline = true;
client.emit(RoomEvent.Timeline, event, room, toStartOfTimeline, false, data);
@@ -496,7 +497,7 @@ describe("TimelinePanel", () => {
render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline });
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
client.emit(RoomEvent.Timeline, event, room, false, false, data);
@@ -521,7 +522,7 @@ describe("TimelinePanel", () => {
await flushPromises();
const event = new MatrixEvent({ type: RoomEvent.Timeline });
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
client.emit(RoomEvent.Timeline, event, room, false, false, data);
@@ -539,11 +540,13 @@ describe("TimelinePanel", () => {
type: "m.call.invite",
room_id: virtualRoom.roomId,
event_id: `virtualCallEvent1`,
origin_server_ts: 0,
});
const virtualCallMetaEvent = new MatrixEvent({
type: "org.matrix.call.sdp_stream_metadata_changed",
room_id: virtualRoom.roomId,
event_id: `virtualCallEvent2`,
origin_server_ts: 0,
});
const virtualEvents = [virtualCallInvite, ...mockEvents(virtualRoom), virtualCallMetaEvent];
const { timelineSet: overlayTimelineSet } = getProps(virtualRoom, virtualEvents);
@@ -819,6 +822,7 @@ describe("TimelinePanel", () => {
type: EventType.RoomMessage,
sender: "userId",
content: createMessageEventContent("ReplyEvent1"),
origin_server_ts: 0,
});
reply2 = new MatrixEvent({
@@ -827,6 +831,7 @@ describe("TimelinePanel", () => {
type: EventType.RoomMessage,
sender: "userId",
content: createMessageEventContent("ReplyEvent2"),
origin_server_ts: 0,
});
root = new MatrixEvent({
@@ -835,6 +840,7 @@ describe("TimelinePanel", () => {
type: EventType.RoomMessage,
sender: "userId",
content: createMessageEventContent("RootEvent"),
origin_server_ts: 0,
});
const eventMap: { [key: string]: MatrixEvent } = {

View File

@@ -39,7 +39,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
data-testid="__testid__"
>
<div
aria-label="Thu, Jan 1 1970"
aria-label="Thu, Jan 1, 1970"
class="mx_DateSeparator"
role="separator"
>
@@ -53,7 +53,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
aria-hidden="true"
class="mx_DateSeparator_dateHeading"
>
Thu, Jan 1 1970
Thu, Jan 1, 1970
</h2>
</div>
<hr

View File

@@ -51,7 +51,7 @@ describe("<MessageEditHistory />", () => {
new MatrixEvent({
type: EventType.RoomMessage,
room_id: roomId,
origin_server_ts: e.ts,
origin_server_ts: e.ts ?? 0,
content: {
body: e.msg,
},

View File

@@ -45,7 +45,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
>
<li>
<div
aria-label="Thu, Jan 1 1970"
aria-label="Thu, Jan 1, 1970"
class="mx_DateSeparator"
role="separator"
>
@@ -59,7 +59,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
aria-hidden="true"
class="mx_DateSeparator_dateHeading"
>
Thu, Jan 1 1970
Thu, Jan 1, 1970
</h2>
</div>
<hr
@@ -161,7 +161,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
>
<li>
<div
aria-label=", NaN NaN"
aria-label="Thu, Jan 1, 1970"
class="mx_DateSeparator"
role="separator"
>
@@ -175,7 +175,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
aria-hidden="true"
class="mx_DateSeparator_dateHeading"
>
, NaN NaN
Thu, Jan 1, 1970
</h2>
</div>
<hr
@@ -193,7 +193,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<span
class="mx_MessageTimestamp"
>
NaN:NaN
00:00
</span>
<div
class="mx_EventTile_content"
@@ -236,7 +236,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<span
class="mx_MessageTimestamp"
>
NaN:NaN
00:00
</span>
<div
class="mx_EventTile_content"
@@ -290,7 +290,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<span
class="mx_MessageTimestamp"
>
NaN:NaN
00:00
</span>
<div
class="mx_EventTile_content"

View File

@@ -60,11 +60,11 @@ describe("DateSeparator", () => {
type TestCase = [string, number, string];
const testCases: TestCase[] = [
["the exact same moment", nowDate.getTime(), "Today"],
["same day as current day", nowDate.getTime() - HOUR_MS, "Today"],
["day before the current day", nowDate.getTime() - HOUR_MS * 12, "Yesterday"],
["the exact same moment", nowDate.getTime(), "today"],
["same day as current day", nowDate.getTime() - HOUR_MS, "today"],
["day before the current day", nowDate.getTime() - HOUR_MS * 12, "yesterday"],
["2 days ago", nowDate.getTime() - DAY_MS * 2, "Wednesday"],
["144 hours ago", nowDate.getTime() - HOUR_MS * 144, "Sat, Dec 11 2021"],
["144 hours ago", nowDate.getTime() - HOUR_MS * 144, "Sat, Dec 11, 2021"],
[
"6 days ago, but less than 144h",
new Date("Saturday Dec 11 2021 23:59:00 GMT+0100 (Central European Standard Time)").getTime(),

View File

@@ -3,7 +3,7 @@
exports[`DateSeparator renders the date separator correctly 1`] = `
<DocumentFragment>
<div
aria-label="Today"
aria-label="today"
class="mx_DateSeparator"
role="separator"
>
@@ -17,7 +17,7 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
aria-hidden="true"
class="mx_DateSeparator_dateHeading"
>
Today
today
</h2>
</div>
<hr
@@ -30,7 +30,7 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
<DocumentFragment>
<div
aria-label="Fri, Dec 17 2021"
aria-label="Fri, Dec 17, 2021"
class="mx_DateSeparator"
role="separator"
>
@@ -50,7 +50,7 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
aria-hidden="true"
class="mx_DateSeparator_dateHeading"
>
Fri, Dec 17 2021
Fri, Dec 17, 2021
</h2>
<div
class="mx_DateSeparator_chevron"

View File

@@ -93,7 +93,7 @@ describe("SearchResultTile", () => {
room_id: ROOM_ID,
content: { body: `Message #${i}` },
event_id: `$${i}:server`,
origin_server_ts: undefined,
origin_server_ts: i,
}),
),
});

View File

@@ -51,7 +51,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
<span
class="mx_MessageTimestamp mx_PinnedEventTile_timestamp"
>
Thu, Jan 1 1970 00:00:00
Thu, Jan 1, 1970, 00:00
</span>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"