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:
Penar Musaraj
2025-08-26 11:56:21 -04:00
committed by GitHub
parent f34a476c20
commit 7514546a78
2 changed files with 26 additions and 10 deletions
@@ -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>
@@ -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: {