Integrate fetchMore

The first working endless scroll.
But update of visible is broken now.

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

@@ -254,35 +254,20 @@ export default {
       // sorting is necessary since backend can send docs unordered
     },
     // docsByDay: {dt: [dt doc ...] ...}
-    assureDate(date) {
-      if (!this.knownDates[date]) {
-        console.log(this.lastQuery);
-        console.log('unknown date', date.toISODate());
-        console.log(this.knownDates);
-        // find missing & fetch missing range
-        const missing = this.dateRange(date)
-              .filter((ts) => !this.knownDates[ts]);
-        // ask for first to last
-        this.lastQuery.fetchMore({
-          variables: {
-            dateStart: missing[0].toISODate(),
-            dateEnd: missing[missing.length - 1].toISODate(),
-          },
-          // Transform the previous result with new data
-          updateQuery: (previousResult, { fetchMoreResult }) => {
-            console.log('previousResult', previousResult);
-            console.log('fetchMoreResult', fetchMoreResult);
-            return {
-              items: [...previousResult.items,
-                      ...fetchMoreResult.items.filter((doc) => {
-                        return previousResult.items.find((prev) => prev.id === doc.id)
-                      }),
-                     ],
-            };
-          }
-        })
-        // integrate into docsByDay
-      }
+    fetchMore(from, to) {
+      console.log('fetching', from, to);
+      this.lastQuery.fetchMore({
+        variables: {
+          dateStart: from,
+          dateEnd: to,
+        },
+        // Transform the previous result with new data
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          console.log('previousResult', previousResult);
+          console.log('fetchMoreResult', fetchMoreResult);
+          return { items: previousResult.items.concat(fetchMoreResult.items) };
+        }
+        });
     },
     setDate(date) {
       this.$router.replace({ hash: date })
@@ -306,8 +291,16 @@ export default {
         // load more
         if (entry.target.dataset.first) {
           console.log('load up');
+          entry.target.dataset.first = false;
+          const date = DateTime.fromISO(entry.target.dataset.date);
+          this.fetchMore(date.minus({ days: 4 }).toISODate(),
+                         date.minus({ days: 1 }).toISODate());
         } else if (entry.target.dataset.last) {
           console.log('load down');
+          entry.target.dataset.last = false;
+          const date = DateTime.fromISO(entry.target.dataset.date);
+          this.fetchMore(date.plus({ days: 1 }).toISODate(),
+                         date.plus({ days: 5 }).toISODate());
         }
       } else if (this.visible[0] === entry.target.dataset.date) {
         // first (top) visible date is going