Many changes to try to improve reliability

src/stores/reservation.ts

@@ -2,17 +2,20 @@ import { defineStore } from 'pinia';
 import type { Reservation } from './schedule.types';
 import { ref } from 'vue';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { Timestamp, parsed } from '@quasar/quasar-ui-qcalendar';
+import { Query } from 'appwrite';
+import { date } from 'quasar';
+import { Timestamp, parseDate } from '@quasar/quasar-ui-qcalendar';
 
 export const useReservationStore = defineStore('reservation', () => {
-  const reservations = ref<Reservation[]>([]);
+  const reservations = ref<Map<string, Reservation>>(new Map());
+  const datesLoaded = ref<Record<string, boolean>>({});
 
   const getConflictingReservations = (
     resource: string,
     start: Date,
     end: Date
   ): Reservation[] => {
-    const overlapped = reservations.value.filter(
+    const overlapped = Array.from(reservations.value.values()).filter(
       (entry: Reservation) =>
         entry.resource == resource &&
         new Date(entry.start) < end &&
@@ -37,46 +40,75 @@ export const useReservationStore = defineStore('reservation', () => {
     );
   };
 
-  const addOrCreateReservation = (reservation: Reservation) => {
-    const index = reservations.value.findIndex(
-      (res) => res.id == reservation.id
-    );
-    index != -1
-      ? (reservations.value[index] = reservation)
-      : reservations.value.push(reservation);
-  };
-  async function fetchReservations() {
+  function setDateLoaded(start: Date, end: Date, state: boolean) {
+    let curDate = start;
+    while (curDate < end) {
+      datesLoaded.value[(parseDate(curDate) as Timestamp).date] = state;
+      curDate = date.addToDate(curDate, { days: 1 });
+    }
+  }
+  async function fetchReservationsForDateRange(start: string, end?: string) {
+    const startDate = new Date(start + 'T00:00');
+    const endDate = new Date(end || start + 'T23:59');
+
+    datesLoaded.value[start] = false;
+
+    if (end) {
+      setDateLoaded(startDate, endDate, false);
+    }
+
     try {
-      const response = await databases.listDocuments(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.reservation
-      );
-      reservations.value = response.documents as Reservation[];
+      databases
+        .listDocuments(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          [
+            Query.and([
+              Query.greaterThanEqual('end', startDate.toISOString()),
+              Query.lessThanEqual('start', endDate.toISOString()),
+            ]),
+          ]
+        )
+        .then((response) => {
+          response.documents.forEach((d) =>
+            reservations.value.set(d.$id, d as Reservation)
+          );
+          setDateLoaded(startDate, endDate, true);
+        });
     } catch (error) {
-      console.error('Failed to fetch timeblocks', error);
+      console.error('Failed to fetch reservations', error);
     }
   }
 
-  const getBoatReservations = (
-    searchDate: Timestamp,
+  async function fetchReservations() {
+    return;
+    // fetchReservationsForDateRange(
+    //   today(),
+    //   date.addToDate(today(), { days: 7 }).toLocaleDateString()
+    // );
+  }
+
+  const getReservationsByDate = (
+    searchDate: string,
     boat?: string
   ): Reservation[] => {
-    const result = reservations.value.filter((x) => {
-      return (
-        ((parsed(x.start)?.date == searchDate.date ||
-          parsed(x.end)?.date == searchDate.date) && // Part of reservation falls on day
-          x.resource != undefined && // A boat is defined
-          !boat) ||
-        x.resource == boat // A specific boat has been passed, and matches
-      );
+    if (!datesLoaded.value[searchDate]) {
+      fetchReservationsForDateRange(searchDate);
+    }
+    const result = Array.from(reservations.value.values()).filter((x) => {
+      return new Date(x.start) < new Date(searchDate + 'T' + '23:59') &&
+        new Date(x.end) > new Date(searchDate + 'T' + '00:00') && // Part of reservation falls on day
+        boat
+        ? boat === x.boat
+        : true; // A specific boat has been passed, and matches
     });
+    console.log(result);
     return result;
   };
 
   return {
-    getBoatReservations,
+    getReservationsByDate,
     fetchReservations,
-    addOrCreateReservation,
     isReservationOverlapped,
     isResourceTimeOverlapped,
     getConflictingReservations,