fix: Improve reactivity in intervals

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');
     }
   }