feat: add realtime updates of interval and reservation

src/stores/reservation.ts

@@ -8,6 +8,7 @@ import { Timestamp, parseDate, today } from '@quasar/quasar-ui-qcalendar';
 import { LoadingTypes } from 'src/utils/misc';
 import { useAuthStore } from './auth';
 import { isPast } from 'src/utils/schedule';
+import { useRealtimeStore } from './realtime';
 
 export const useReservationStore = defineStore('reservation', () => {
   const reservations = ref<Map<string, Reservation>>(new Map());
@@ -16,7 +17,28 @@ export const useReservationStore = defineStore('reservation', () => {
   // TODO: Come up with a better way of storing reservations by date & reservations for user
   const authStore = useAuthStore();
   const $q = useQuasar();
+  const realtimeStore = useRealtimeStore();
 
+  realtimeStore.register(
+    `databases.${AppwriteIds.databaseId}.collections.${AppwriteIds.collection.reservation}.documents`,
+    (response) => {
+      const payload = response.payload as Reservation;
+      if (payload.$id) {
+        if (
+          response.events.includes(
+            'databases.*.collections.*.documents.*.delete'
+          )
+        ) {
+          reservations.value.delete(payload.$id);
+          userReservations.value.delete(payload.$id);
+        } else {
+          reservations.value.set(payload.$id, payload);
+          if (payload.user === authStore.currentUser?.$id)
+            userReservations.value.set(payload.$id, payload);
+        }
+      }
+    }
+  );
   // Fetch reservations for a specific date range
   const fetchReservationsForDateRange = async (
     start: string = today(),