diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/App.js | 94 | ||||
| -rw-r--r-- | modern/src/SocketController.js | 36 |
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); |