Changed notification approach

1 files changed, 9 insertions, 7 deletions

diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 4b1f5733..69932fce 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -75,13 +75,13 @@ const SocketController = () => {
   }, [authenticated]);
 
   useEffect(() => {
-    setNotifications(events.map((event) => {
-      event.message = `${devices[event.deviceId]?.name}: ${t(prefixString('event', event.type))}`;
-      event.show = true;
-      setTimeout(() => event.show = false, 5000);
-      return event;
-    }));
-  }, [events]);
+    setNotifications(events.map((event) => ({
+      id: event.id,
+      message: `${devices[event.deviceId]?.name}: ${t(prefixString('event', event.type))}`,
+      show: true,
+      close: () => setEvents(events.filter((e) => e.id !== event.id)),
+    })));
+  }, [events, devices]);
 
   return (
     <>
@@ -94,6 +94,8 @@ const SocketController = () => {
           }}
           open={notification.show}
           message={notification.message}
+          autoHideDuration={5000}
+          onClose={notification.close}
         />
       ))}
     </>