Improve intersect handler

The state is now in the handler

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

@@ -17,16 +17,13 @@
     </template>
     <template #default="{ items }">
       <v-list-item
-        v-for="{ date, docs, first, last } in groupDocsByDay(items)"
+        v-for="{ date, docs, idx, lastIdx } in groupDocsByDay(items)"
         v-intersect="{
-            handler: onIntersect,
+            handler: intersectHandler(date, idx, lastIdx),
             options: {
-              threshold: [0, 1]
-            }
+              threshold: [0, 1],
+            },
           }"
-        :data-date="date.toISODate()"
-        :data-first="first"
-        :data-last="last"
         two-line
         :key="'day-' + date"
         :id="'documentation_' + date.toISODate()"
@@ -191,27 +188,24 @@ export default {
       this.dateEnd = date.plus({ days: 4 }).toISODate();
     },
     groupDocsByDay(docs) {
-      // => {dt: [dt doc ...] ...}
+      // => {dt: {date: dt, docs: doc ...} ...}
       const docsByDay = docs.reduce((byDay, doc) => {
         // This works with dummy. Does actual doc have dateStart instead?
         const day = DateTime.fromISO(doc.datetimeStart).startOf("day");
-        byDay[day] ??= {date: day, docs: [], first: false, last: false};
-        byDay[day]['docs'].push(doc);
+        byDay[day] ??= {date: day, docs: []};
+        byDay[day].docs.push(doc);
         return byDay;
       }, {});
-      // => [[dt doc ...] ...]
+      // => [{date: dt, docs: doc ..., idx: idx, lastIdx: last-idx} ...]
+      // sorting is necessary since backend can send docs unordered
       return Object.keys(docsByDay)
         .sort()
-        .map((key, i, {length}) => {
+        .map((key, idx, {length}) => {
           const day = docsByDay[key];
-          if (i === 0) {
-            day['first'] = true;
-          } else if (i === length - 1) {
-            day['last'] = true;
-          }
+          day.idx = idx;
+          day.lastIdx = length - 1;
           return day;
         });
-      // sorting is necessary since backend can send docs unordered
     },
     // docsByDay: {dt: [dt doc ...] ...}
     fetchMore(from, to) {
@@ -232,31 +226,31 @@ export default {
     setDate(date) {
       this.$router.replace({ hash: date })
     },
-    onIntersect(entries, observer) {
-      const entry = entries[0];
-      if (entry.isIntersecting) {
+   intersectHandler(date, idx, lastIdx) {
+     let waiting = true;
+     return (entries) => {
+       const entry = entries[0];
+       if (entry.isIntersecting) {
 
-        if (entry.boundingClientRect.top <= 0) {
-          console.log('@', entry.target.dataset.date);
-          this.setDate(entry.target.dataset.date);
-        }
+         if (entry.boundingClientRect.top <= 0) {
+           console.log('@', date.toISODate());
+           this.setDate(date.toISODate());
+         }
 
-        // 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());
-        }
-      }
-    },
+         if (waiting && idx === 0) {
+           console.log('load up', date.toISODate());
+           this.fetchMore(date.minus({ days: 4 }).toISODate(),
+                          date.minus({ days: 1 }).toISODate());
+           waiting = false;
+         } else if (waiting && idx === lastIdx) {
+           console.log('load down', date.toISODate());
+           this.fetchMore(date.plus({ days: 1 }).toISODate(),
+                          date.plus({ days: 5 }).toISODate());
+           waiting = false;
+         }
+       }
+     };
+   },
   },
   created() {
     this.resetDate();