Added sockets for notifications

resources/js/Components/FlightsGoneBy/ToastNotifications.vue

@@ -1,54 +1,14 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { router } from "@inertiajs/vue3";
-import { Notification } from "@/Types/types";
-import axios from "axios";
+import { useNotificationStore } from '@/stores/notificationStore';
 
-const activeToasts = ref<Notification[]>([])
-const seenNotificationIds = ref<Set<number>>(new Set())
-const achievementSound = new Audio('/sounds/seatBelt.wav')
-
-function handleNewNotifications(notifications: Notification[]) {
-    if (!notifications?.length) return
-
-    const newToasts: Notification[] = []
-    for (const n of notifications) {
-        if (!seenNotificationIds.value.has(n.id)) {
-            seenNotificationIds.value.add(n.id)
-            newToasts.push(n)
-        }
-    }
-
-    if (!newToasts.length) return
-    activeToasts.value.push(...newToasts)
-    achievementSound.play().catch(() => {})
-}
-
-async function dismissToast(notification: Notification) {
-    activeToasts.value = activeToasts.value.filter(n => n.id !== notification.id)
-    await axios.patch(`/notifications/${notification.id}/read`)
-}
-
-router.on('success', (event) => {
-    handleNewNotifications(event.detail.page.props.achievement_notifications as Notification[] ?? [])
-})
-
-// Handle initial page load notifications
-import { usePage } from "@inertiajs/vue3";
-import { SharedProps } from "@/Types/types";
-const page = usePage<SharedProps>().props;
-watch(
-    () => page.achievement_notifications,
-    handleNewNotifications,
-    { immediate: true }
-)
+const store = useNotificationStore();
 </script>
 
 <template>
     <div class="toast-stack">
         <TransitionGroup name="toast">
             <v-card
-                v-for="notification in activeToasts"
+                v-for="notification in store.toasts"
                 :key="notification.id"
                 class="toast-card glass"
                 rounded="lg"
@@ -66,7 +26,7 @@ watch(
                         variant="text"
                         size="small"
                         class="ml-auto"
-                        @click="dismissToast(notification)"
+                        @click="store.dismiss(notification)"
                     />
                 </v-card-text>
             </v-card>