diff --git a/packages/client/src/stores/notification.js b/packages/client/src/stores/notification.js index 37a4dcc5d2..00bd30f9f5 100644 --- a/packages/client/src/stores/notification.js +++ b/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,27 +39,28 @@ const createNotificationStore = () => { }) return } + const _id = id() store.update(state => { - return [...state, - { - id: generate(), - type, - message, - icon, - dismissable: !autoDismiss, - delay: get(store) != null, - } - ]}) - clearTimeout(timeout) + return [ + ...state, + { + id: _id, + type, + message, + icon, + dismissable: !autoDismiss, + delay: get(store) != null, + } + ]}) 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()