aboutsummaryrefslogtreecommitdiff
path: root/modern/src/SocketController.js
diff options
context:
space:
mode:
authorLucas Leite <lbl.lucasleite@gmail.com>2022-02-11 19:26:41 -0300
committerLucas Leite <lbl.lucasleite@gmail.com>2022-02-11 19:26:41 -0300
commit52a40cb71f11f04765bab8864146a3eadf81a26a (patch)
tree5afff5eb154d1c6e5bead4a40b7fcf3bb8a7b8ab /modern/src/SocketController.js
parentb8ebab9caedae9516f1a95432ee02fa90072b97e (diff)
downloadtrackermap-web-52a40cb71f11f04765bab8864146a3eadf81a26a.tar.gz
trackermap-web-52a40cb71f11f04765bab8864146a3eadf81a26a.tar.bz2
trackermap-web-52a40cb71f11f04765bab8864146a3eadf81a26a.zip
Changed notification approach
Diffstat (limited to 'modern/src/SocketController.js')
-rw-r--r--modern/src/SocketController.js36
1 files changed, 30 insertions, 6 deletions
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);