Add notification store timeouts

packages/client/src/stores/notification.js

@@ -1,16 +1,17 @@
 import { writable, get } from "svelte/store"
-import { generate } from "shortid"
 import { routeStore } from "./routes"
 
 const NOTIFICATION_TIMEOUT = 3000
 
 const createNotificationStore = () => {
-  let timeout
+  const timeoutIds = new Set()
   let block = false
 
   const store = writable([], () => {
     return () => {
-      clearTimeout(timeout)
+      timeoutIds.forEach(timeoutId => {
+        clearTimeout(timeoutId)
+      })
       store.set([])
     }
   })
@@ -38,10 +39,12 @@ const createNotificationStore = () => {
       })
       return
     }
+    const _id = id()
     store.update(state => {
-      return [...state,
+      return [
+        ...state,
         {
-      id: generate(),
+          id: _id,
           type,
           message,
           icon,
@@ -49,16 +52,15 @@ const createNotificationStore = () => {
           delay: get(store) != null,
         }
       ]})
-    clearTimeout(timeout)
     if (autoDismiss) {
-      timeout = setTimeout(() => {
-        store.set(null)
+      const timeoutId = setTimeout(() => {
+        dismiss(_id)
       }, NOTIFICATION_TIMEOUT)
+      timeoutIds.add(timeoutId)
     }
   }
 
   const dismiss = id => {
-    clearTimeout(timeout)
     store.update(state => {
       return state.filter(n => n.id !== id)
     })
@@ -76,6 +78,10 @@ const createNotificationStore = () => {
       dismiss,
     },
   }
+
+  function id() {
+    return "_" + Math.random().toString(36).slice(2, 9)
+  }
 }
 
 export const notificationStore = createNotificationStore()