solve issue #19

src/components/Notification.vue

@@ -1,12 +1,14 @@
 <template>
 
+    {{notifications}}
+
     <transition-group name="toasts" tag="div" class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
-        <div v-for="(note, index) in notifications" :key="note.randomKey" class="show toast border-0 text-white" :class="`bg-${note.type}`" role="alert" aria-live="assertive" aria-atomic="true">
+        <div v-for="(note) in notifications" :key="note[0]" class="show toast border-0 text-white" :class="`bg-${note[1].type}`" role="alert" aria-live="assertive" aria-atomic="true">
             <div class="d-flex">
                 <div class="toast-body">
-                    {{note.text}}
+                    {{note[1].text}}
                 </div>
-                <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto"></button>
+                <button type="button" @click="destroyAlert(note[0])" class="btn-close btn-close-white me-2 m-auto"></button>
             </div>
         </div>
     </transition-group>
@@ -20,8 +22,8 @@ import { storeToRefs } from 'pinia'
 const notes = useNotifications()
 const { notifications } = storeToRefs(notes)
 
-function destroyAlert(index : number) {
-    notes.removeAlert(index)
+function destroyAlert(id : string) {
+    notes.remove(id)
 }
 
 </script>

src/stores/notifications.ts

@@ -1,16 +1,27 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
+import { v4 as uuidv4 } from 'uuid'
 
 export const useNotifications = defineStore('notifications', {
     state: () => {
         return {
-            /**@type {{type: string, text: string, randomKey: string}[]} */
-            notifications: new Array<{type: string, text: string, randomKey: string}>()
+            /**@type {Map<string, {type: string, text: string}>} */
+            notifications: new Map<string, {type: string, text: string}>()
         }
     },
 
     actions: {
-        removeAlert(index : number) : void {
-            this.notifications.splice(index, 1)
+        remove(id : string) : void {
+            this.notifications.delete(id)
+        },
+
+        add(type : string, text: string) : void {
+            this.notifications.set(
+                uuidv4(), 
+                {
+                    type:type,
+                    text:text,
+                }
+            )
         }
     }
 })

src/stores/user.ts

@@ -49,7 +49,7 @@ export const useUser = defineStore({
     actions: {
         async login(username: string, password: string, rememberMe: boolean): Promise<boolean> {
         
-            const { notifications } = storeToRefs(useNotifications())
+            const notifications = useNotifications()
 
             try {
                 const response = await axios.post<AuthSuccResult>('http://localhost:3333/api/v1/login', {
@@ -63,26 +63,17 @@ export const useUser = defineStore({
                 this.user = response.data.user
                 this.role = response.data.role
                 this.token = response.data.token
-                
-                notifications.value.push({
-                    type: response.data.notification.type,
-                    text: response.data.notification.text,
-                    randomKey: getUnixTime(new Date()).toString()
-                })
+
+                notifications.add(response.data.notification.type, response.data.notification.text)
 
                 return true
             } catch(err : unknown) {              
                 if (axios.isAxiosError(err) && err.response && err.response.data){  
 
                     const data = err.response.data as AuthErrResult
+                    
+                    notifications.add(data.notification.type, data.notification.text)
 
-                    const note = {
-                        type: data.notification.type,
-                        text: data.notification.text,
-                        randomKey: getUnixTime(new Date()).toString()
-                    }
-
-                    notifications.value.push(note)
                 }
 
                 return false
@@ -92,7 +83,7 @@ export const useUser = defineStore({
 
         async logout(): Promise<boolean> {
 
-            const { notifications } = storeToRefs(useNotifications())
+            const notifications = useNotifications()
 
             try {
                 const ai = axios.create({
@@ -104,11 +95,8 @@ export const useUser = defineStore({
                 })
                 await ai.post('/logout')
 
-                notifications.value.push({
-                    type: 'success',
-                    text: 'Logged out successfully',
-                    randomKey: getUnixTime(new Date()).toString()
-                })
+
+                notifications.add('success','Logged out successfully')
 
                 this.$reset()
 
@@ -116,14 +104,8 @@ export const useUser = defineStore({
             }
             catch(error) {
                 if(error instanceof Error) {
-                    const notification = {
-                        type: 'danger',
-                        text: error.message,
-                        randomKey: getUnixTime(new Date()).toString()
-                        /**TODO #19 Generate randomKey in notification-store! */
-                    }
 
-                    notifications.value.push(notification)
+                   notifications.add('danger', error.message)
                 }   
                 return false
             }