From e97949cab31dcdb5957f82bde112a7bb96c4d102 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Thu, 20 Jun 2024 21:52:00 -0400
Subject: [PATCH] fix: Improve reactivity in intervals

---
 .../boat/BoatScheduleTableComponent.vue       |  2 +-
 src/pages/schedule/BoatScheduleView.vue       |  2 +-
 src/pages/schedule/ManageCalendar.vue         | 20 +++++-----
 src/stores/interval.ts                        | 38 +++++++++----------
 src/stores/schedule.types.ts                  |  5 ---
 5 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/components/scheduling/boat/BoatScheduleTableComponent.vue b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
index 6fd82f0..6e10187 100644
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -38,7 +38,7 @@
               v-for="block in getAvailableIntervals(
                 scope.timestamp,
                 boats[scope.columnIndex]
-              )"
+              ).value"
               :key="block.$id">
               <div
                 class="timeblock"
diff --git a/src/pages/schedule/BoatScheduleView.vue b/src/pages/schedule/BoatScheduleView.vue
index b0aec30..aae61d0 100644
--- a/src/pages/schedule/BoatScheduleView.vue
+++ b/src/pages/schedule/BoatScheduleView.vue
@@ -92,7 +92,7 @@ const currentUser = useAuthStore().currentUser;
 
 const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
   return getAvailableIntervals(timestamp, boat)
-    .concat(boatReservationEvents(timestamp, boat))
+    .value.concat(boatReservationEvents(timestamp, boat))
     .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
 };
 // Method declarations
diff --git a/src/pages/schedule/ManageCalendar.vue b/src/pages/schedule/ManageCalendar.vue
index cbeba4f..f1cf81d 100644
--- a/src/pages/schedule/ManageCalendar.vue
+++ b/src/pages/schedule/ManageCalendar.vue
@@ -26,7 +26,9 @@
           cell-width="150px">
           <template #day="{ scope }">
             <div
-              v-if="filteredIntervals(scope.timestamp, scope.resource).length"
+              v-if="
+                filteredIntervals(scope.timestamp, scope.resource).value.length
+              "
               style="
                 display: flex;
                 flex-wrap: wrap;
@@ -35,10 +37,8 @@
                 font-size: 12px;
               ">
               <template
-                v-for="block in sortedIntervals(
-                  scope.timestamp,
-                  scope.resource
-                )"
+                v-for="block in sortedIntervals(scope.timestamp, scope.resource)
+                  .value"
                 :key="block.id">
                 <q-chip class="cursor-pointer">
                   {{ date.formatDate(block.start, 'HH:mm') }} -
@@ -163,7 +163,7 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { useIntervalStore } from 'src/stores/interval';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import type {
   Interval,
   IntervalTemplate,
@@ -208,8 +208,10 @@ const filteredIntervals = (date: Timestamp, boat: Boat) => {
 };
 
 const sortedIntervals = (date: Timestamp, boat: Boat) => {
-  return filteredIntervals(date, boat).sort(
-    (a, b) => Date.parse(a.start) - Date.parse(b.start)
+  return computed(() =>
+    filteredIntervals(date, boat).value.sort(
+      (a, b) => Date.parse(a.start) - Date.parse(b.start)
+    )
   );
 };
 
@@ -293,7 +295,7 @@ function onDrop(
     overlapped.value = boatsToApply
       .map((boat) =>
         intervalsOverlapped(
-          existingIntervals.concat(
+          existingIntervals.value.concat(
             intervalsFromTemplate(boat, templateId, date)
           )
         )
diff --git a/src/stores/interval.ts b/src/stores/interval.ts
index bdc777a..2bd6f1f 100644
--- a/src/stores/interval.ts
+++ b/src/stores/interval.ts
@@ -2,25 +2,26 @@ import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { Boat } from './boat';
 import { Timestamp, today } from '@quasar/quasar-ui-qcalendar';
-
-import { Interval, IntervalRecord } from './schedule.types';
+import { Interval } from './schedule.types';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Query } from 'appwrite';
 import { useReservationStore } from './reservation';
+import { LoadingTypes } from 'src/utils/misc';
 
 export const useIntervalStore = defineStore('interval', () => {
-  // TODO: Implement functions to dynamically pull this data.
-  const intervals = ref<Map<string, Interval>>(new Map());
-  const intervalDates = ref<IntervalRecord>({});
-  const reservationStore = useReservationStore();
+  const intervals = ref(new Map<string, Interval>()); // Intervals by DocID
+  const dateStatus = ref(new Map<string, LoadingTypes>()); // State of load by date
+
   const selectedDate = ref<string>(today());
 
-  const getIntervals = (date: Timestamp | string, boat?: Boat): Interval[] => {
+  const reservationStore = useReservationStore();
+
+  const getIntervals = (date: Timestamp | string, boat?: Boat) => {
     const searchDate = typeof date === 'string' ? date : date.date;
     const dayStart = new Date(searchDate + 'T00:00');
     const dayEnd = new Date(searchDate + 'T23:59');
-    if (!intervalDates.value[searchDate]) {
-      intervalDates.value[searchDate] = 'pending';
+    if (dateStatus.value.get(searchDate) === undefined) {
+      dateStatus.value.set(searchDate, 'pending');
       fetchIntervals(searchDate);
     }
     return computed(() => {
@@ -32,22 +33,19 @@ export const useIntervalStore = defineStore('interval', () => {
         const matchesBoat = boat ? boat.$id === interval.resource : true;
         return isWithinDay && matchesBoat;
       });
-    }).value;
+    });
   };
 
-  const getAvailableIntervals = (
-    date: Timestamp | string,
-    boat?: Boat
-  ): Interval[] => {
-    return computed(() => {
-      return getIntervals(date, boat).filter((interval) => {
+  const getAvailableIntervals = (date: Timestamp | string, boat?: Boat) => {
+    return computed(() =>
+      getIntervals(date, boat).value.filter((interval) => {
         return !reservationStore.isResourceTimeOverlapped(
           interval.resource,
           new Date(interval.start),
           new Date(interval.end)
         );
-      });
-    }).value;
+      })
+    );
   };
 
   async function fetchInterval(id: string): Promise<Interval> {
@@ -78,11 +76,11 @@ export const useIntervalStore = defineStore('interval', () => {
       response.documents.forEach((d) =>
         intervals.value.set(d.$id, d as Interval)
       );
-      intervalDates.value[dateString] = 'loaded';
+      dateStatus.value.set(dateString, 'loaded');
       console.info(`Loaded ${response.documents.length} intervals from server`);
     } catch (error) {
       console.error('Failed to fetch intervals', error);
-      intervalDates.value[dateString] = 'error';
+      dateStatus.value.set(dateString, 'error');
     }
   }
 
diff --git a/src/stores/schedule.types.ts b/src/stores/schedule.types.ts
index f46476c..e02d662 100644
--- a/src/stores/schedule.types.ts
+++ b/src/stores/schedule.types.ts
@@ -1,5 +1,4 @@
 import { Models } from 'appwrite';
-import { LoadingTypes } from 'src/utils/misc';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
 export type Reservation = Interval & {
@@ -29,7 +28,3 @@ export type IntervalTemplate = Partial<Models.Document> & {
   name: string;
   timeTuples: TimeTuple[];
 };
-
-export interface IntervalRecord {
-  [key: string]: LoadingTypes;
-}