Introduce knownDates and dateRanges

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -145,13 +145,12 @@ export default {
   data() {
     return {
       gqlQuery: documentationsForCoursebook,
+      knownDates: {},
       docsByDay: {},
       lastQuery: null,
       // Placeholder values while query isn't completed yet
       groups: [],
       courses: [],
-      dateStart: null,
-      dateEnd: null,
       incomplete: false,
     };
   },
@@ -164,18 +163,17 @@ export default {
     },
   },
   computed: {
-    // TODO: Query should wait until dateStart is set!
-    //       = wait for mounted
+    // Assertion: Should only fire on page load or selection change.
+    //            Resets date range.
     gqlQueryArgs() {
       console.log('computing gqlQueryArgs');
+      const dateRange = this.resetDate();
       return {
         own: this.filterType === "all" ? false : true,
         objId: this.objId ? Number(this.objId) : undefined,
         objType: this.objType?.toUpperCase(),
-        dateStart: this.dateStart ?? this.date,
-        dateEnd:
-          this.dateEnd ??
-          DateTime.fromISO(this.date).plus({ weeks: 1 }).toISODate(),
+        dateStart: dateRange[0].toISODate(),
+        dateEnd: dateRange[1].toISODate(),
         incomplete: !!this.incomplete,
       };
     },
@@ -200,6 +198,21 @@ export default {
     },
   },
   methods: {
+    resetDate() {
+      // Assure current date
+      console.log('Resetting date range', this.$route.hash);
+      if (!this.$route.hash) {
+        console.log('Set default date');
+        this.$router.replace({ hash: DateTime.now().toISODate() })
+      }
+      // Resetting known dates to dateRange around current date
+      this.knownDates = {};
+      const dateRange = this.dateRange(DateTime.fromISO(this.$route.hash.substring(1)))
+      dateRange.forEach((ts) => this.knownDates[ts] = true);
+      const lastIdx = dateRange.length - 1;
+      // Returning a dateRange each around first & last date for the initial query
+      return [this.dateRange(dateRange[0])[0], this.dateRange(dateRange[lastIdx])[lastIdx]];
+    },
     changeSelection(selection) {
       this.$router.push({
         name: "alsijil.coursebook",
@@ -328,10 +341,9 @@ export default {
         .splitBy({ days: 1 })
         .map((ts) => ts.start);
     },
-    // TODO: Improve Add empty but already queried days to docsByDay -> do not query them again
     // docsByDay: {dt: [dt doc ...] ...}
     assureDate(date) {
-      if (!this.knownDate[date]) {
+      if (!this.knownDates[date]) {
         // find missing & fetch missing range
         // date +- 5 days ?
         const dateRange = Interval
@@ -360,14 +372,6 @@ export default {
     },
   },
   mounted() {
-    // assure date hash
-    console.log('mounted with hash', this.$route.hash);
-    if (!this.$route.hash) {
-      console.log('initialized hash');
-      this.$router.replace({ hash: DateTime.now().toISODate() })
-    }
-    this.dateStart = this.$route.hash.substring(1);
-    this.dateEnd = DateTime.fromISO(this.dateStart).plus({ weeks: 1 }).toISODate()
     window.addEventListener('scroll', this.debounce(this.setCurrentDay, 300));
   },
 };