2 files changed, 38 insertions, 23 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 1e4dabe4..b98f2224 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -14,7 +14,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import MapIcon from '@material-ui/icons/Map';
-import PersonIcon from '@material-ui/icons/Person';
+import ShuffleIcon from '@material-ui/icons/Shuffle';
 import DescriptionIcon from '@material-ui/icons/Description';
 import ReplayIcon from '@material-ui/icons/Replay';
 import { sessionActions } from './store';
@@ -108,7 +108,7 @@ const MainToolbar = () => {
               onClick={() => history.push('/settings/notifications')}
             >
               <ListItemIcon>
-                <PersonIcon />
+                <ShuffleIcon />
               </ListItemIcon>
               <ListItemText primary={t('settingsTitle')} />
             </ListItem>
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index ac950190..e178abb6 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,35 +1,26 @@
-import { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector, connect } from 'react-redux';
-
+import { Snackbar } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
+
 import { positionsActions, devicesActions, sessionActions } from './store';
 import { useEffectAsync } from './reactHelper';
-
-const displayNotifications = (events) => {
-  if ('Notification' in window) {
-    if (Notification.permission === 'granted') {
-      events.forEach((event) => {
-        const notification = new Notification(`Event: ${event.type}`);
-        setTimeout(notification.close.bind(notification), 4 * 1000);
-      });
-    } else if (Notification.permission !== 'denied') {
-      Notification.requestPermission((permission) => {
-        if (permission === 'granted') {
-          displayNotifications(events);
-        }
-      });
-    }
-  }
-};
+import { useTranslation } from './LocalizationProvider';
+import { prefixString } from './common/stringUtils';
 
 const SocketController = () => {
   const dispatch = useDispatch();
   const history = useHistory();
+  const t = useTranslation();
 
   const authenticated = useSelector((state) => !!state.session.user);
+  const devices = useSelector((state) => state.devices.items);
 
   const socketRef = useRef();
 
+  const [events, setEvents] = useState([]);
+  const [notifications, setNotifications] = useState([]);
+
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/api/socket`);
@@ -48,7 +39,7 @@ const SocketController = () => {
         dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
-        displayNotifications(data.events);
+        setEvents(data.events);
       }
     };
   };
@@ -83,7 +74,31 @@ const SocketController = () => {
     return null;
   }, [authenticated]);
 
-  return null;
+  useEffect(() => {
+    setNotifications(events.map((event) => ({
+      id: event.id,
+      message: `${devices[event.deviceId]?.name}: ${t(prefixString('event', event.type))}`,
+      show: true,
+    })));
+  }, [events, devices]);
+
+  return (
+    <>
+      {notifications.map((notification) => (
+        <Snackbar
+          key={notification.id}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          open={notification.show}
+          message={notification.message}
+          autoHideDuration={5000}
+          onClose={() => setEvents(events.filter((e) => e.id !== notification.id))}
+        />
+      ))}
+    </>
+  );
 };
 
 export default connect()(SocketController);