mirror of
https://github.com/discourse/discourse.git
synced 2026-08-09 12:38:21 -05:00
FIX: Correctly order events in upcoming events list (#34526)
Previously, the dates within a month could go out of order. We were using plain javascript objects here with the date (DD) as the key, but these are unordered, so `12` would often be listed after `03`. Switching to a map allows us to sort properly.
This commit is contained in:
+19
-3
@@ -31,7 +31,7 @@ export default class UpcomingEventsList extends Component {
|
||||
|
||||
@tracked isLoading = true;
|
||||
@tracked hasError = false;
|
||||
@tracked eventsByMonth = {};
|
||||
@tracked eventsByMonth = new Map();
|
||||
|
||||
timeFormat = this.args.params?.timeFormat ?? DEFAULT_TIME_FORMAT;
|
||||
count = this.args.params?.count ?? DEFAULT_COUNT;
|
||||
@@ -60,7 +60,7 @@ export default class UpcomingEventsList extends Component {
|
||||
return (
|
||||
!this.isLoading &&
|
||||
!this.hasError &&
|
||||
Object.keys(this.eventsByMonth).length === 0
|
||||
Array.from(this.eventsByMonth.values()).length === 0
|
||||
);
|
||||
}
|
||||
|
||||
@@ -132,7 +132,7 @@ export default class UpcomingEventsList extends Component {
|
||||
}
|
||||
|
||||
groupByMonthAndDay(data) {
|
||||
return data.reduce((result, item) => {
|
||||
let events = data.reduce((result, item) => {
|
||||
const startDate = moment(item.starts_at);
|
||||
const endDate = item.ends_at ? moment(item.ends_at) : null;
|
||||
const today = moment();
|
||||
@@ -152,6 +152,22 @@ export default class UpcomingEventsList extends Component {
|
||||
|
||||
return result;
|
||||
}, {});
|
||||
|
||||
const sortedMonths = new Map(
|
||||
Object.entries(events).sort(([a], [b]) => a.localeCompare(b))
|
||||
);
|
||||
|
||||
const fullySorted = new Map();
|
||||
for (const [month, days] of sortedMonths) {
|
||||
const sortedDays = new Map(
|
||||
Object.entries(days).sort(
|
||||
([a], [b]) => parseInt(a, 10) - parseInt(b, 10)
|
||||
)
|
||||
);
|
||||
fullySorted.set(month, sortedDays);
|
||||
}
|
||||
|
||||
return fullySorted;
|
||||
}
|
||||
|
||||
<template>
|
||||
|
||||
+7
-7
@@ -11,7 +11,7 @@ import UpcomingEventsList, {
|
||||
|
||||
const today = "2100-02-01T08:00:00";
|
||||
const tomorrowAllDay = "2100-02-02T00:00:00";
|
||||
const nextMonth = "2100-03-02T08:00:00";
|
||||
const laterThisMonth = "2100-02-22T08:00:00";
|
||||
const nextWeek = "2100-02-09T08:00:00";
|
||||
|
||||
module("Integration | Component | upcoming-events-list", function (hooks) {
|
||||
@@ -77,7 +77,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
|
||||
),
|
||||
[
|
||||
moment(tomorrowAllDay).format("MMM").toUpperCase(),
|
||||
moment(nextMonth).format("MMM").toUpperCase(),
|
||||
moment(laterThisMonth).format("MMM").toUpperCase(),
|
||||
],
|
||||
"displays the correct month"
|
||||
);
|
||||
@@ -86,7 +86,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
|
||||
[...queryAll(".upcoming-events-list__event-date .day")].map(
|
||||
(el) => el.innerText
|
||||
),
|
||||
[moment(tomorrowAllDay).format("D"), moment(nextMonth).format("D")],
|
||||
[moment(tomorrowAllDay).format("D"), moment(laterThisMonth).format("D")],
|
||||
"displays the correct day"
|
||||
);
|
||||
|
||||
@@ -96,7 +96,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
|
||||
),
|
||||
[
|
||||
i18n("discourse_post_event.upcoming_events_list.all_day"),
|
||||
moment(nextMonth).format(DEFAULT_TIME_FORMAT),
|
||||
moment(laterThisMonth).format(DEFAULT_TIME_FORMAT),
|
||||
],
|
||||
"displays the formatted time"
|
||||
);
|
||||
@@ -106,7 +106,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
|
||||
(el) => el.innerText
|
||||
),
|
||||
["Awesome Event", "Another Awesome Event"],
|
||||
"displays the event name"
|
||||
"displays the event name in the correct order"
|
||||
);
|
||||
|
||||
assert
|
||||
@@ -230,7 +230,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
|
||||
),
|
||||
[
|
||||
i18n("discourse_post_event.upcoming_events_list.all_day"),
|
||||
moment(nextMonth).format("LLL"),
|
||||
moment(laterThisMonth).format("LLL"),
|
||||
],
|
||||
"displays the formatted time"
|
||||
);
|
||||
@@ -354,7 +354,7 @@ function twoEventsResponseHandler({ queryParams }) {
|
||||
},
|
||||
{
|
||||
id: 67502,
|
||||
starts_at: nextMonth,
|
||||
starts_at: laterThisMonth,
|
||||
ends_at: null,
|
||||
timezone: "Asia/Calcutta",
|
||||
post: {
|
||||
|
||||
Reference in New Issue
Block a user