forked from
pds.ls/pdsls
atmosphere explorer
fix notification updates
+6
-5
+6
-5
src/components/notification.tsx
+6
-5
src/components/notification.tsx
···
1
1
import { createSignal, For, Show } from "solid-js";
2
+
import { createStore } from "solid-js/store";
2
3
3
4
export type Notification = {
4
5
id: string;
···
8
9
type?: "info" | "success" | "error";
9
10
};
10
11
11
-
const [notifications, setNotifications] = createSignal<Notification[]>([]);
12
+
const [notifications, setNotifications] = createStore<Notification[]>([]);
12
13
const [removingIds, setRemovingIds] = createSignal<Set<string>>(new Set());
13
14
14
15
export const addNotification = (notification: Omit<Notification, "id">) => {
15
16
const id = `notification-${Date.now()}-${Math.random()}`;
16
-
setNotifications([...notifications(), { ...notification, id }]);
17
+
setNotifications(notifications.length, { ...notification, id });
17
18
return id;
18
19
};
19
20
20
21
export const updateNotification = (id: string, updates: Partial<Notification>) => {
21
-
setNotifications(notifications().map((n) => (n.id === id ? { ...n, ...updates } : n)));
22
+
setNotifications((n) => n.id === id, updates);
22
23
};
23
24
24
25
export const removeNotification = (id: string) => {
25
26
setRemovingIds(new Set([...removingIds(), id]));
26
27
setTimeout(() => {
27
-
setNotifications(notifications().filter((n) => n.id !== id));
28
+
setNotifications((n) => n.filter((notification) => notification.id !== id));
28
29
setRemovingIds((ids) => {
29
30
const newIds = new Set(ids);
30
31
newIds.delete(id);
···
36
37
export const NotificationContainer = () => {
37
38
return (
38
39
<div class="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">
39
-
<For each={notifications()}>
40
+
<For each={notifications}>
40
41
{(notification) => (
41
42
<div
42
43
class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto flex min-w-64 flex-col gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 shadow-md select-none dark:border-neutral-700"