Fix multiple events issue

3 files changed, 59 insertions, 72 deletions

diff --git a/modern/package.json b/modern/package.json
index 4ac91845..66e13bd8 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -17,6 +17,7 @@
     "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 a53ffc6c..67c74b30 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,4 +1,6 @@
 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';
@@ -48,48 +50,56 @@ const App = () => {
   return (
     <LocalizationProvider>
       <ThemeProvider theme={theme}>
-        <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
+          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>
       </ThemeProvider>
     </LocalizationProvider>
   );
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index ece6521b..78119494 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector, connect } from 'react-redux';
-import { Snackbar } from '@material-ui/core';
+import { useSnackbar } from 'notistack';
 import { useHistory } from 'react-router-dom';
 
 import { positionsActions, devicesActions, sessionActions } from './store';
@@ -12,17 +12,13 @@ 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 [events, setEvents] = useState([]);
-  const [notification, setNotification] = useState({
-    message: '',
-    show: false,
-  });
+  const enqueueEvents = (events) => events.forEach((event) => enqueueSnackbar(t(prefixString('event', event.type))));
 
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -42,7 +38,7 @@ const SocketController = () => {
         dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
-        setEvents(data.events);
+        enqueueEvents(data.events);
       }
     };
   };
@@ -77,27 +73,7 @@ const SocketController = () => {
     return null;
   }, [authenticated]);
 
-  useEffect(() => {
-    events.forEach((event) => {
-      setNotification({
-        message: `${devices[event.deviceId]?.name}: ${t(prefixString('event', `${event.type}`))}`,
-        show: true,
-      });
-      setTimeout(() => setNotification({ message: '', show: false }), 6000);
-    });
-  }, [events]);
-
-  return (
-    <Snackbar
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'right',
-      }}
-      open={notification.show}
-      autoHideDuration={5000}
-      message={notification.message}
-    />
-  );
+  return null;
 };
 
 export default connect()(SocketController);