Merge pull request #35 from runeharlyk/notification-timeout

Make each toasts disappear after timeout

interface/src/lib/components/toasts/notifications.ts

@@ -6,35 +6,25 @@ type State = {
 	id: string;
 	type: StateType;
 	message: string;
-	timeout: number;
 };
 
 function createNotificationStore() {
 	const state: State[] = [];
-	const _notifications = writable(state);
+	const notifications = writable(state);
+	const { subscribe } = notifications;
 
 	function send(message: string, type: StateType = 'info', timeout: number) {
-		_notifications.update((state) => {
-			return [...state, { id: id(), type, message, timeout }];
+		const id = generateId();
+		setTimeout(() => {
+			notifications.update((state) => {
+				return state.filter((n) => n.id !== id);
+			});
+		}, timeout);
+		notifications.update((state) => {
+			return [...state, { id, type, message }];
 		});
 	}
 
-	const notifications = derived(_notifications, ($_notifications, set) => {
-		set($_notifications);
-		if ($_notifications.length > 0) {
-			const timer = setTimeout(() => {
-				_notifications.update((state) => {
-					state.shift();
-					return state;
-				});
-			}, $_notifications[0].timeout);
-			return () => {
-				clearTimeout(timer);
-			};
-		}
-	}) as Writable<State[]>;
-	const { subscribe } = notifications;
-
 	return {
 		subscribe,
 		send,
@@ -45,7 +35,7 @@ function createNotificationStore() {
 	};
 }
 
-function id() {
+function generateId() {
 	return '_' + Math.random().toString(36).substr(2, 9);
 }