Tracked down a date bug. Also tried to optimize, but not sure it's necessary.

src/stores/reservation.ts

@@ -1,29 +1,109 @@
 import { defineStore } from 'pinia';
 import type { Reservation } from './schedule.types';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { Query } from 'appwrite';
 import { date } from 'quasar';
-import { Timestamp, parseDate } from '@quasar/quasar-ui-qcalendar';
+import { Timestamp, parseDate, today } from '@quasar/quasar-ui-qcalendar';
 
 export const useReservationStore = defineStore('reservation', () => {
+  type LoadingTypes = 'loaded' | 'pending' | undefined;
   const reservations = ref<Map<string, Reservation>>(new Map());
-  const datesLoaded = ref<Record<string, boolean>>({});
+  const datesLoaded = ref<Record<string, LoadingTypes>>({});
 
+  // Fetch reservations for a specific date range
+  const fetchReservationsForDateRange = async (
+    start: string = today(),
+    end: string = start
+  ) => {
+    const startDate = new Date(start + 'T00:00');
+    const endDate = new Date(end + 'T23:59');
+    if (getUnloadedDates(startDate, endDate).length === 0) return;
+
+    setDateLoaded(startDate, endDate, 'pending');
+
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation,
+        [
+          Query.greaterThanEqual('end', startDate.toISOString()),
+          Query.lessThanEqual('start', endDate.toISOString()),
+        ]
+      );
+
+      response.documents.forEach((d) =>
+        reservations.value.set(d.$id, d as Reservation)
+      );
+      setDateLoaded(startDate, endDate, 'loaded');
+    } catch (error) {
+      console.error('Failed to fetch reservations', error);
+      setDateLoaded(startDate, endDate, undefined);
+    }
+  };
+
+  // Set the loading state for dates
+  const setDateLoaded = (start: Date, end: Date, state: LoadingTypes) => {
+    if (start > end) return [];
+    let curDate = start;
+    while (curDate < end) {
+      datesLoaded.value[(parseDate(curDate) as Timestamp).date] = state;
+      curDate = date.addToDate(curDate, { days: 1 });
+    }
+  };
+
+  const getUnloadedDates = (start: Date, end: Date): string[] => {
+    if (start > end) return [];
+    let curDate = start;
+    const unloaded = [];
+    while (curDate < end) {
+      const parsedDate = (parseDate(curDate) as Timestamp).date;
+      if (datesLoaded.value[parsedDate] === undefined)
+        unloaded.push(parsedDate);
+      curDate = date.addToDate(curDate, { days: 1 });
+    }
+    return unloaded;
+  };
+
+  // Get reservations by date and optionally filter by boat
+  const getReservationsByDate = (
+    searchDate: string,
+    boat?: string
+  ): Reservation[] => {
+    if (!datesLoaded.value[searchDate]) {
+      fetchReservationsForDateRange(searchDate);
+    }
+    const dayStart = new Date(searchDate + 'T00:00');
+    const dayEnd = new Date(searchDate + 'T23:59');
+
+    return computed(() => {
+      return Array.from(reservations.value.values()).filter((reservation) => {
+        const reservationStart = new Date(reservation.start);
+        const reservationEnd = new Date(reservation.end);
+
+        const isWithinDay =
+          reservationStart < dayEnd && reservationEnd > dayStart;
+        const matchesBoat = boat ? boat === reservation.resource : true;
+        return isWithinDay && matchesBoat;
+      });
+    }).value;
+  };
+
+  // Get conflicting reservations for a resource within a time range
   const getConflictingReservations = (
     resource: string,
     start: Date,
     end: Date
   ): Reservation[] => {
-    const overlapped = Array.from(reservations.value.values()).filter(
-      (entry: Reservation) =>
-        entry.resource == resource &&
+    return Array.from(reservations.value.values()).filter(
+      (entry) =>
+        entry.resource === resource &&
         new Date(entry.start) < end &&
         new Date(entry.end) > start
     );
-    return overlapped;
   };
 
+  // Check if a resource has time overlap
   const isResourceTimeOverlapped = (
     resource: string,
     start: Date,
@@ -32,6 +112,7 @@ export const useReservationStore = defineStore('reservation', () => {
     return getConflictingReservations(resource, start, end).length > 0;
   };
 
+  // Check if a reservation overlaps with existing reservations
   const isReservationOverlapped = (res: Reservation): boolean => {
     return isResourceTimeOverlapped(
       res.resource,
@@ -40,75 +121,9 @@ export const useReservationStore = defineStore('reservation', () => {
     );
   };
 
-  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 {
-      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 reservations', error);
-    }
-  }
-
-  async function fetchReservations() {
-    return;
-    // fetchReservationsForDateRange(
-    //   today(),
-    //   date.addToDate(today(), { days: 7 }).toLocaleDateString()
-    // );
-  }
-
-  const getReservationsByDate = (
-    searchDate: string,
-    boat?: string
-  ): Reservation[] => {
-    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 {
     getReservationsByDate,
-    fetchReservations,
+    fetchReservationsForDateRange,
     isReservationOverlapped,
     isResourceTimeOverlapped,
     getConflictingReservations,