Improved receiving notifications

src/components/utilities/Modal.vue

@@ -93,7 +93,6 @@ onUnmounted(() => {
   background-color: rgba($white, 0.8);
   z-index: 999;
 
-  // make draggable
   .modal-header {
     cursor: move;
     background-color: rgba($purple, 0.6);
@@ -149,6 +148,7 @@ onUnmounted(() => {
         margin-right: 20px;
       }
     }
+
     button {
       padding: 10px 16px;
       min-width: 6.25rem;

src/components/utilities/Notifications.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="notifications">
-    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true"
+    <Modal v-for="notification in notifications.getNotifications"
-           @modal:close="closeNotification(notification.id)">
+           :key="notification.id"
+           :isModalOpen="true"
+           @modal:close="closeNotification(notification.id)"
+    >
       <template #modal-body>
         <p>{{ notification.message }}</p>
       </template>
@@ -13,7 +16,7 @@
 import { useNotificationStore } from '@/stores/notifications'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
-import { onMounted, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const notifications = useNotificationStore()
 const socket = useSocketStore()
@@ -24,8 +27,10 @@ function closeNotification(id: string) {
 
 function setupNotificationListener(connection: any) {
   connection.on('notification', (data: { message: string }) => {
-    console.log(data)
+    notifications.addNotification({
-    notifications.addNotification(data)
+      id: Math.random().toString(16),
+      message: data.message
+    });
   })
 }
 
@@ -41,4 +46,11 @@ onMounted(() => {
     )
   }
 })
+
+onUnmounted(() => {
+  const connection = socket.getConnection
+  if (connection) {
+    connection.off('notification')
+  }
+})
 </script>

src/stores/notifications.ts

@@ -12,8 +12,8 @@ export const useNotificationStore: StoreDefinition = defineStore('notifications'
     addNotification(notification: Notification) {
       this.notifications.push(notification);
     },
-    removeNotification(index: number) {
+    removeNotification(id: string) {
-      this.notifications.splice(index, 1);
+      this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id);
     }
   }
 });

src/types.ts

@@ -1,7 +1,6 @@
 export type Notification = {
-  id?: number;
+  id: string;
   message: string;
-  type?: string;
 };
 
 export type User = {