Fix fetchMore in CalendarOverview

aleksis/core/frontend/components/calendar/CalendarOverview.vue

@@ -249,6 +249,7 @@ export default {
       return event.color;
     },
     fetchMoreCalendarEvents({ start, end }) {
+      // Get the start and end dates of the current date range shown in the calendar
       let extendedStart = this.$refs.calendar.getStartOfWeek(start).date;
       let extendedEnd = this.$refs.calendar.getEndOfWeek(end).date;
 
@@ -256,6 +257,9 @@ export default {
       let youngerEnd = extendedEnd > this.fetchedDateRange.end;
 
       if (this.calendarFeeds.length === 0) {
+        // No calendar feeds have been fetched yet,
+        // so fetch all events in the current date range
+
         this.$apollo.queries.calendarFeeds.setVariables({
           start: extendedStart,
           end: extendedEnd,
@@ -263,35 +267,35 @@ export default {
         this.$apollo.queries.calendarFeeds.skip = false;
         this.fetchedDateRange = { start: extendedStart, end: extendedEnd };
       } else if (olderStart || youngerEnd) {
+        // Define newly fetched date range
         let newStart = olderStart ? extendedStart : this.fetchedDateRange.start;
         let newEnd = youngerEnd ? extendedEnd : this.fetchedDateRange.end;
 
+        // Define date range to fetch
+        let fetchStart = olderStart ? extendedStart : this.fetchedDateRange.end;
+        let fetchEnd = youngerEnd ? extendedEnd : this.fetchedDateRange.start;
+
         this.$apollo.queries.calendarFeeds.fetchMore({
           variables: {
-            start: olderStart ? extendedStart : this.fetchedDateRange.end,
-            end: youngerEnd ? extendedEnd : this.fetchedDateRange.start,
+            start: fetchStart,
+            end: fetchEnd,
           },
           updateQuery: (previousResult, { fetchMoreResult }) => {
             let previousCalendarFeeds = previousResult.calendarFeeds;
             let newCalendarFeeds = fetchMoreResult.calendarFeeds;
 
-            previousCalendarFeeds.forEach(
-              (cf, i, cfs) =>
-                (cfs[i].feed.events = [
-                  ...cf.feed.events,
-                  ...newCalendarFeeds
-                    .find((ncf) => ncf.name === cf.name)
-                    .feed.events.filter(
-                      (e) =>
-                        !cf.feed.events.some(
-                          (pe) =>
-                            pe.uid === e.uid ||
-                            pe.start === e.start ||
-                            pe.end === e.end
-                        )
-                    ),
-                ])
-            );
+            previousCalendarFeeds.forEach((calendarFeed, i, calendarFeeds) => {
+              // Get all events except those that are updated
+              let keepEvents = calendarFeed.feed.events.filter(
+                (event) => event.end < fetchStart || event.start > fetchEnd
+              );
+
+              /// Update the events of the calendar feed
+              calendarFeeds[i].feed.events = [
+                ...keepEvents,
+                ...newCalendarFeeds[i].feed.events,
+              ];
+            });
             return {
               calendarFeeds: previousCalendarFeeds,
             };