UX: add upcoming events from recurrence to the category calendar (#616)

Bringing parity to the same behavior from the /upcoming-events calendar.

assets/javascripts/discourse/components/upcoming-events-calendar.js

@@ -5,6 +5,7 @@ import loadScript from "discourse/lib/load-script";
 import Category from "discourse/models/category";
 import getURL from "discourse-common/lib/get-url";
 import { formatEventName } from "../helpers/format-event-name";
+import addRecurrentEvents from "../lib/add-recurrent-events";
 import fullCalendarDefaultOptions from "../lib/full-calendar-default-options";
 import { isNotFullDayEvent } from "../lib/guess-best-date-format";
 
@@ -31,22 +32,6 @@ export default Component.extend({
     this._renderCalendar();
   },
 
-  addRecurrentEvents(events) {
-    events.forEach((event) => {
-      event.upcoming_dates?.forEach((upcomingDate) => {
-        events.push(
-          Object.assign({}, event, {
-            starts_at: upcomingDate.starts_at,
-            ends_at: upcomingDate.ends_at,
-            upcoming_dates: [],
-          })
-        );
-      });
-    });
-
-    return events;
-  },
-
   _renderCalendar() {
     const siteSettings = this.site.siteSettings;
 
@@ -90,7 +75,7 @@ export default Component.extend({
 
       const tagsColorsMap = JSON.parse(siteSettings.map_events_to_color);
 
-      const originalEventAndRecurrents = this.addRecurrentEvents(
+      const originalEventAndRecurrents = addRecurrentEvents(
         this.events.content
       );
 

assets/javascripts/discourse/initializers/discourse-calendar.js

@@ -13,6 +13,7 @@ import getURL from "discourse-common/lib/get-url";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
 import { formatEventName } from "../helpers/format-event-name";
+import addRecurrentEvents from "../lib/add-recurrent-events";
 import { colorToHex, contrastColor, stringToColor } from "../lib/colors";
 import fullCalendarDefaultOptions from "../lib/full-calendar-default-options";
 import { isNotFullDayEvent } from "../lib/guess-best-date-format";
@@ -173,12 +174,12 @@ function initializeDiscourseCalendar(api) {
             data: params,
           });
 
+          const tagsColorsMap = JSON.parse(siteSettings.map_events_to_color);
+
           Promise.all([loadEvents]).then((results) => {
-            const events = results[0];
+            const [{ events }] = results;
 
-            const tagsColorsMap = JSON.parse(siteSettings.map_events_to_color);
-
-            events[Object.keys(events)[0]].forEach((event) => {
+            addRecurrentEvents(events).forEach((event) => {
               const { starts_at, ends_at, post, category_id } = event;
 
               let backgroundColor;

assets/javascripts/discourse/lib/add-recurrent-events.js

@@ -0,0 +1,13 @@
+export default function addRecurrentEvents(events) {
+  return events.flatMap((event) => {
+    const upcomingEvents =
+      event.upcoming_dates?.map((upcomingDate) => ({
+        ...event,
+        starts_at: upcomingDate.starts_at,
+        ends_at: upcomingDate.ends_at,
+        upcoming_dates: [],
+      })) || [];
+
+    return [event, ...upcomingEvents];
+  });
+}

test/javascripts/acceptance/category-events-calendar-test.js

@@ -50,6 +50,18 @@ acceptance("Discourse Calendar - Category Events Calendar", function (needs) {
               },
             },
             name: "Awesome Event",
+            upcoming_dates: [
+              {
+                starts_at: moment()
+                  .tz("Asia/Calcutta")
+                  .add(2, "days")
+                  .format("YYYY-MM-DDT15:14:00.000Z"),
+                ends_at: moment()
+                  .tz("Asia/Calcutta")
+                  .add(2, "days")
+                  .format("YYYY-MM-DDT16:14:00.000Z"),
+              },
+            ],
           },
           {
             id: 67502,
@@ -118,7 +130,7 @@ acceptance("Discourse Calendar - Category Events Calendar", function (needs) {
 
     assert
       .dom(".fc-event")
-      .exists({ count: 3 }, "One event is displayed on the calendar");
+      .exists({ count: 4 }, "Events are displayed on the calendar");
 
     assert.dom(".fc-event[href='/t/-/18449/1']").hasStyle({
       "background-color": "rgb(231, 76, 60)",
@@ -151,4 +163,22 @@ acceptance("Discourse Calendar - Category Events Calendar", function (needs) {
 
     I18n.locale = "en";
   });
+
+  test("event calendar shows recurrent events", async (assert) => {
+    await visit("/c/bug/1");
+
+    const [first, second] = queryAll(".fc-event .fc-title");
+
+    assert.equal(first.textContent, "Awesome Event");
+    assert.equal(second.textContent, "Awesome Event");
+
+    const firstCell = first.closest("td");
+    const secondCell = second.closest("td");
+
+    assert.notEqual(
+      firstCell,
+      secondCell,
+      "events should be in different days"
+    );
+  });
 });