Added sockets for notifications

resources/js/Components/FlightsGoneBy/NotificationMenu.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import {ref, watch} from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import axios from "axios";
-import {Notification} from "@/Types/types";
-import {Link} from "@inertiajs/vue3";
-import {local} from "laravel-vite-plugin/fonts";
+import { Notification } from "@/Types/types";
+import { Link } from "@inertiajs/vue3";
+import { useNotificationStore } from '@/stores/notificationStore';
 
 const props = defineProps<{
     unreadCount: number
 }>()
 
-const localUnreadCount = ref(props.unreadCount)
-watch(() => props.unreadCount, (val) => {
-    localUnreadCount.value = val
-})
+const store = useNotificationStore();
 
+onMounted(() => {
+    store.setInitialUnreadCount(props.unreadCount);
+});
 
 const open = ref(false)
 const notifications = ref<Notification[]>([])
@@ -27,15 +27,10 @@ const markAllRead = async (notifications: Notification[]) => {
     unread.forEach(n => n.read_at = new Date().toISOString())
 }
 
-const emit = defineEmits<{
-    (e: 'update:unreadCount', value: number): void
-}>()
-
 watch(open, async (isOpen) => {
     if (!isOpen) return
 
-    localUnreadCount.value = 0
-    emit('update:unreadCount', 0)
+    store.unreadCount = 0
 
     if (notifications.value.length) return
 
@@ -50,7 +45,7 @@ watch(open, async (isOpen) => {
 <template>
     <div class="notif-wrapper">
         <v-btn icon variant="text" @click="open = !open" aria-label="Notifications">
-            <v-badge :content="localUnreadCount" :model-value="localUnreadCount > 0" color="primary">
+            <v-badge :content="store.unreadCount" :model-value="store.unreadCount > 0" color="primary">
                 <v-icon>mdi-bell-outline</v-icon>
             </v-badge>
         </v-btn>