Many improvements. Still no reactivity on List

src/stores/reservation.ts

@@ -3,7 +3,7 @@ import type { Reservation } from './schedule.types';
 import { computed, ref } from 'vue';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Query } from 'appwrite';
-import { date } from 'quasar';
+import { date, useQuasar } from 'quasar';
 import { Timestamp, parseDate, today } from '@quasar/quasar-ui-qcalendar';
 import { LoadingTypes } from 'src/utils/misc';
 import { useAuthStore } from './auth';
@@ -15,6 +15,7 @@ export const useReservationStore = defineStore('reservation', () => {
   const userReservations = ref<Map<string, Reservation>>(new Map());
   // TODO: Come up with a better way of storing reservations by date & reservations for user
   const authStore = useAuthStore();
+  const $q = useQuasar();
 
   // Fetch reservations for a specific date range
   const fetchReservationsForDateRange = async (
@@ -60,7 +61,9 @@ export const useReservationStore = defineStore('reservation', () => {
     }
   };
 
-  const createReservation = async (reservation: Reservation) => {
+  const createReservation = async (
+    reservation: Reservation
+  ): Promise<Reservation> => {
     try {
       const response = await databases.createDocument(
         AppwriteIds.databaseId,
@@ -70,8 +73,10 @@ export const useReservationStore = defineStore('reservation', () => {
       );
       reservations.value.set(response.$id, response as Reservation);
       console.info('Reservation booked: ', response);
+      return response as Reservation;
     } catch (e) {
       console.error('Error creating Reservation: ' + e);
+      throw e;
     }
   };
 
@@ -88,6 +93,16 @@ export const useReservationStore = defineStore('reservation', () => {
       return false;
     }
 
+    const status = $q.notify({
+      color: 'secondary',
+      textColor: 'white',
+      message: 'Deleting Reservation',
+      spinner: true,
+      closeBtn: 'Dismiss',
+      position: 'top',
+      timeout: 0,
+      group: false,
+    });
     try {
       await databases.deleteDocument(
         AppwriteIds.databaseId,
@@ -97,8 +112,21 @@ export const useReservationStore = defineStore('reservation', () => {
       reservations.value.delete(id);
       userReservations.value.delete(id);
       console.info(`Deleted reservation: ${id}`);
+      status({
+        color: 'warning',
+        message: 'Reservation Deleted',
+        spinner: false,
+        icon: 'delete',
+        timeout: 4000,
+      });
     } catch (e) {
       console.error('Error deleting reservation: ' + e);
+      status({
+        color: 'negative',
+        message: 'Failed to Delete Reservation',
+        spinner: false,
+        icon: 'error',
+      });
     }
   };
 
@@ -197,7 +225,7 @@ export const useReservationStore = defineStore('reservation', () => {
     }
   };
 
-  const sortedUserReservations = computed(() =>
+  const sortedUserReservations = computed((): Reservation[] =>
     [...userReservations.value?.values()].sort(
       (a, b) => new Date(b.start).getTime() - new Date(a.start).getTime()
     )