From 8329afe89734d2b0d1f90a5d41e88f9d1becb9e1 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 2 Jun 2024 02:33:29 +0200
Subject: [PATCH] Improved receiving notifications

---
 src/components/utilities/Modal.vue         |  2 +-
 src/components/utilities/Notifications.vue | 22 +++++++++++++++++-----
 src/stores/notifications.ts                |  4 ++--
 src/types.ts                               |  3 +--
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 284a237..6382391 100644
--- a/src/components/utilities/Modal.vue
+++ b/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;
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index 6e7eed0..f59b1c6 100644
--- a/src/components/utilities/Notifications.vue
+++ b/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:close="closeNotification(notification.id)">
+    <Modal v-for="notification in notifications.getNotifications"
+           :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(data)
+    notifications.addNotification({
+      id: Math.random().toString(16),
+      message: data.message
+    });
   })
 }
 
@@ -41,4 +46,11 @@ onMounted(() => {
     )
   }
 })
+
+onUnmounted(() => {
+  const connection = socket.getConnection
+  if (connection) {
+    connection.off('notification')
+  }
+})
 </script>
\ No newline at end of file
diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
index a49a273..f6a0620 100644
--- a/src/stores/notifications.ts
+++ b/src/stores/notifications.ts
@@ -12,8 +12,8 @@ export const useNotificationStore: StoreDefinition = defineStore('notifications'
     addNotification(notification: Notification) {
       this.notifications.push(notification);
     },
-    removeNotification(index: number) {
-      this.notifications.splice(index, 1);
+    removeNotification(id: string) {
+      this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id);
     }
   }
 });
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 70073b2..23533bd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,7 +1,6 @@
 export type Notification = {
-  id?: number;
+  id: string;
   message: string;
-  type?: string;
 };
 
 export type User = {