aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/App.js94
-rw-r--r--modern/src/SocketController.js36
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);