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 = {