DEV: Adds ability to see multiday events in sidebar

assets/javascripts/discourse/components/upcoming-events-list.gjs

@@ -118,13 +118,20 @@
 
  groupByMonthAndDay(data) {
  return data.reduce((result, item) => {
- const date = new Date(item.starts_at);
+ const startDate = moment(item.starts_at);
+ const endDate = moment(item.ends_at);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
-
  const monthKey = `${year}-${month}`;
 
+ if (startDate.isSameOrBefore(endDate, "day")) {
+ result[monthKey][day].push(item);
+
+ // Move to the next day
+ startDate.add(1, "day");
+ }
+
  result[monthKey] = result[monthKey] ?? {};
  result[monthKey][day] = result[monthKey][day] ?? [];
 
@@ -174,6 +181,7 @@
  <div class="upcoming-events-list__day-section">
  <div class="upcoming-events-list__formatted-day">
  {{this.formatDate month day}}
+ {{log events}}
  </div>
 
  {{#each events as |event|}}

test/javascripts/integration/components/upcoming-events-list-test.gjs

@@ -140,6 +140,35 @@
  exists(".upcoming-events-list__view-all"),
  "it displays the view-all link"
  );
+
+ test("with multi-day events, standard formats", async function (assert) {
+ pretender.get(
+ "/discourse-post-event/events",
+ multiDayEventResponseHandler
+ );
+
+ await render(<template><UpcomingEventsList /></template>);
+
+ this.appEvents.trigger("page:changed", { url: "/" });
+
+ await waitFor(".loading-container .spinner", { count: 0 });
+
+ assert.deepEqual(
+ [...queryAll(".upcoming-events-list__event-name")].map(
+ (el) => el.innerText
+ ),
+ ["Awesome Event", "Another Awesome Event"],
+ "it displays the multiday event on all scheduled dates"
+ );
+
+ assert.deepEqual(
+ [...queryAll(".upcoming-events-list__event-name")].map(
+ (el) => el.innerText
+ ),
+ ["Awesome Event", "Another Awesome Event"],
+ "it displays the multiday event that has two different months"
+ );
+ });
  });
 
  test("with events, view-all navigation", async function (assert) {
@@ -394,3 +423,37 @@
 
  return response({ events });
 }
+
+function multiDayEventResponseHandler({ queryParams }) {
+ let events = [
+ {
+ id: 67503,
+ starts_at: tomorrowAllDay,
+ ends_at: nextMonth,
+ timezone: "Asia/Calcutta",
+ post: {
+ id: 67501,
+ post_number: 1,
+ url: "/t/this-is-an-event/18451/1",
+ topic: {
+ id: 18449,
+ title: "This is a multiday event",
+ },
+ },
+ name: "Awesome MultiDay Event",
+ category_id: 1,
+ },
+ ];
+
+ if (queryParams.limit) {
+ events.splice(queryParams.limit);
+ }
+
+ if (queryParams.before) {
+ events = events.filter((event) => {
+ return moment(event.starts_at).isBefore(queryParams.before);
+ });
+ }
+
+ return response({ events });
+}