Changed notification approach

3 files changed, 72 insertions, 59 deletions

diff --git a/modern/package.json b/modern/package.json
index 66e13bd8..4ac91845 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -17,7 +17,6 @@
     "maplibre-gl": "^1.15.0",
     "material-ui-dropzone": "^3.5.0",
     "moment": "^2.29.1",
-    "notistack": "^1.0.10",
     "react": "^17.0.2",
     "react-container-dimensions": "^1.4.1",
     "react-dom": "^17.0.2",
diff --git a/modern/src/App.js b/modern/src/App.js
index 67c74b30..a53ffc6c 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import Slide from '@material-ui/core/Slide';
-import { SnackbarProvider } from 'notistack';
 import { ThemeProvider } from '@material-ui/core/styles';
 import { Switch, Route } from 'react-router-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -50,56 +48,48 @@ const App = () => {
   return (
     <LocalizationProvider>
       <ThemeProvider theme={theme}>
-        <SnackbarProvider
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          TransitionComponent={Slide}
-        >
-          <CssBaseline />
-          <SocketController />
-          <CachingController />
-          <Switch>
-            <Route exact path="/login" component={LoginForm} />
-            <Route exact path="/register" component={RegisterForm} />
-            <Route exact path="/reset-password" component={ResetPasswordForm} />
-            <Route>
-              {!initialized ? (<LinearProgress />) : (
-                <Switch>
-                  <Route exact path="/" component={MainPage} />
-                  <Route exact path="/replay" component={ReplayPage} />
-                  <Route exact path="/position/:id?" component={PositionPage} />
-                  <Route exact path="/user/:id?" component={UserPage} />
-                  <Route exact path="/device/:id?" component={DevicePage} />
-                  <Route exact path="/geofence/:id?" component={GeofencePage} />
-                  <Route exact path="/geofences" component={GeofencesPage} />
-                  <Route exact path="/settings/notifications" component={NotificationsPage} />
-                  <Route exact path="/settings/notification/:id?" component={NotificationPage} />
-                  <Route exact path="/settings/groups" component={GroupsPage} />
-                  <Route exact path="/settings/group/:id?" component={GroupPage} />
-                  <Route exact path="/settings/drivers" component={DriversPage} />
-                  <Route exact path="/settings/driver/:id?" component={DriverPage} />
-                  <Route exact path="/settings/calendars" component={CalendarsPage} />
-                  <Route exact path="/settings/calendar/:id?" component={CalendarPage} />
-                  <Route exact path="/settings/attributes" component={ComputedAttributesPage} />
-                  <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
-                  <Route exact path="/settings/maintenances" component={MaintenancesPage} />
-                  <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
-                  <Route exact path="/admin/server" component={ServerPage} />
-                  <Route exact path="/admin/users" component={UsersPage} />
-                  <Route exact path="/admin/statistics" component={StatisticsPage} />
-                  <Route exact path="/reports/route" component={RouteReportPage} />
-                  <Route exact path="/reports/event" component={EventReportPage} />
-                  <Route exact path="/reports/trip" component={TripReportPage} />
-                  <Route exact path="/reports/stop" component={StopReportPage} />
-                  <Route exact path="/reports/summary" component={SummaryReportPage} />
-                  <Route exact path="/reports/chart" component={ChartReportPage} />
-                </Switch>
-              )}
-            </Route>
-          </Switch>
-        </SnackbarProvider>
+        <CssBaseline />
+        <SocketController />
+        <CachingController />
+        <Switch>
+          <Route exact path="/login" component={LoginForm} />
+          <Route exact path="/register" component={RegisterForm} />
+          <Route exact path="/reset-password" component={ResetPasswordForm} />
+          <Route>
+            {!initialized ? (<LinearProgress />) : (
+              <Switch>
+                <Route exact path="/" component={MainPage} />
+                <Route exact path="/replay" component={ReplayPage} />
+                <Route exact path="/position/:id?" component={PositionPage} />
+                <Route exact path="/user/:id?" component={UserPage} />
+                <Route exact path="/device/:id?" component={DevicePage} />
+                <Route exact path="/geofence/:id?" component={GeofencePage} />
+                <Route exact path="/geofences" component={GeofencesPage} />
+                <Route exact path="/settings/notifications" component={NotificationsPage} />
+                <Route exact path="/settings/notification/:id?" component={NotificationPage} />
+                <Route exact path="/settings/groups" component={GroupsPage} />
+                <Route exact path="/settings/group/:id?" component={GroupPage} />
+                <Route exact path="/settings/drivers" component={DriversPage} />
+                <Route exact path="/settings/driver/:id?" component={DriverPage} />
+                <Route exact path="/settings/calendars" component={CalendarsPage} />
+                <Route exact path="/settings/calendar/:id?" component={CalendarPage} />
+                <Route exact path="/settings/attributes" component={ComputedAttributesPage} />
+                <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
+                <Route exact path="/settings/maintenances" component={MaintenancesPage} />
+                <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
+                <Route exact path="/admin/server" component={ServerPage} />
+                <Route exact path="/admin/users" component={UsersPage} />
+                <Route exact path="/admin/statistics" component={StatisticsPage} />
+                <Route exact path="/reports/route" component={RouteReportPage} />
+                <Route exact path="/reports/event" component={EventReportPage} />
+                <Route exact path="/reports/trip" component={TripReportPage} />
+                <Route exact path="/reports/stop" component={StopReportPage} />
+                <Route exact path="/reports/summary" component={SummaryReportPage} />
+                <Route exact path="/reports/chart" component={ChartReportPage} />
+              </Switch>
+            )}
+          </Route>
+        </Switch>
       </ThemeProvider>
     </LocalizationProvider>
   );
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 78119494..4b1f5733 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,6 +1,6 @@
-import { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector, connect } from 'react-redux';
-import { useSnackbar } from 'notistack';
+import { Snackbar } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
 
 import { positionsActions, devicesActions, sessionActions } from './store';
@@ -12,13 +12,14 @@ const SocketController = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const t = useTranslation();
-  const { enqueueSnackbar } = useSnackbar();
 
   const authenticated = useSelector((state) => !!state.session.user);
+  const devices = useSelector((state) => state.devices.items);
 
   const socketRef = useRef();
 
-  const enqueueEvents = (events) => events.forEach((event) => enqueueSnackbar(t(prefixString('event', event.type))));
+  const [events, setEvents] = useState([]);
+  const [notifications, setNotifications] = useState([]);
 
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -38,7 +39,7 @@ const SocketController = () => {
         dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
-        enqueueEvents(data.events);
+        setEvents(data.events);
       }
     };
   };
@@ -73,7 +74,30 @@ const SocketController = () => {
     return null;
   }, [authenticated]);
 
-  return null;
+  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]);
+
+  return (
+    <>
+      {notifications.map((notification) => (
+        <Snackbar
+          key={notification.id}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          open={notification.show}
+          message={notification.message}
+        />
+      ))}
+    </>
+  );
 };
 
 export default connect()(SocketController);