ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-05 21:20:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

updates App.tsx to use new NotificationComponent

Browse Source
This commit is contained in:
Mose Müller 2023-11-27 15:41:02 +01:00
parent 667bb949cc
commit 914997cc6b
1 changed files with 27 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/App.tsx
View File

@ -6,7 +6,11 @@ import {
DataServiceJSON DataServiceJSON
} from './components/DataServiceComponent'; } from './components/DataServiceComponent';
import './App.css'; import './App.css';
import { Notifications } from './components/NotificationsComponent'; import {
Notifications,
Notification,
LevelName
} from './components/NotificationsComponent';
import { ConnectionToast } from './components/ConnectionToast'; import { ConnectionToast } from './components/ConnectionToast';
import { SerializedValue, setNestedValueByPath, State } from './utils/stateUtils'; import { SerializedValue, setNestedValueByPath, State } from './utils/stateUtils';
@ -21,8 +25,9 @@ type Action =
type UpdateMessage = { type UpdateMessage = {
data: { parent_path: string; name: string; value: SerializedValue }; data: { parent_path: string; name: string; value: SerializedValue };
}; };
type ExceptionMessage = { type LogMessage = {
data: { exception: string; type: string }; levelname: LevelName;
message: string;
}; };
const reducer = (state: State, action: Action): State => { const reducer = (state: State, action: Action): State => {
@ -45,8 +50,7 @@ const App = () => {
const [isInstantUpdate, setIsInstantUpdate] = useState(false); const [isInstantUpdate, setIsInstantUpdate] = useState(false);
const [showSettings, setShowSettings] = useState(false); const [showSettings, setShowSettings] = useState(false);
const [showNotification, setShowNotification] = useState(false); const [showNotification, setShowNotification] = useState(false);
const [notifications, setNotifications] = useState([]); const [notifications, setNotifications] = useState<Notification[]>([]);
const [exceptions, setExceptions] = useState([]);
const [connectionStatus, setConnectionStatus] = useState('connecting'); const [connectionStatus, setConnectionStatus] = useState('connecting');
// Keep the state reference up to date // Keep the state reference up to date
@ -88,51 +92,38 @@ const App = () => {
}); });
socket.on('notify', onNotify); socket.on('notify', onNotify);
socket.on('exception', onException); socket.on('log', onLogMessage);
return () => { return () => {
socket.off('notify', onNotify); socket.off('notify', onNotify);
socket.off('exception', onException); socket.off('log', onLogMessage);
}; };
}, []); }, []);
// Adding useCallback to prevent notify to change causing a re-render of all // Adding useCallback to prevent notify to change causing a re-render of all
// components // components
const addNotification = useCallback((text: string) => { const addNotification = useCallback(
// Getting the current time in the required format (message: string, levelname: LevelName = 'DEBUG') => {
const timeString = new Date().toISOString().substring(11, 19); // Getting the current time in the required format
// Adding an id to the notification to provide a way of removing it const timeStamp = new Date().toISOString().substring(11, 19);
const id = Math.random(); // Adding an id to the notification to provide a way of removing it
const id = Math.random();
// Custom logic for notifications // Custom logic for notifications
setNotifications((prevNotifications) => [ setNotifications((prevNotifications) => [
{ id, text, time: timeString }, { levelname, id, message, timeStamp },
...prevNotifications ...prevNotifications
]); ]);
}, []); },
[]
);
const notifyException = (text: string) => {
// Getting the current time in the required format
const timeString = new Date().toISOString().substring(11, 19);
// Adding an id to the notification to provide a way of removing it
const id = Math.random();
// Custom logic for notifications
setExceptions((prevNotifications) => [
{ id, text, time: timeString },
...prevNotifications
]);
};
const removeNotificationById = (id: number) => { const removeNotificationById = (id: number) => {
setNotifications((prevNotifications) => setNotifications((prevNotifications) =>
prevNotifications.filter((n) => n.id !== id) prevNotifications.filter((n) => n.id !== id)
); );
}; };
const removeExceptionById = (id: number) => {
setExceptions((prevNotifications) => prevNotifications.filter((n) => n.id !== id));
};
const handleCloseSettings = () => setShowSettings(false); const handleCloseSettings = () => setShowSettings(false);
const handleShowSettings = () => setShowSettings(true); const handleShowSettings = () => setShowSettings(true);
@ -149,9 +140,8 @@ const App = () => {
}); });
} }
function onException(value: ExceptionMessage) { function onLogMessage(value: LogMessage) {
const newException = `${value.data.type}: ${value.data.exception}.`; addNotification(value.message, value.levelname);
notifyException(newException);
} }
// While the data is loading // While the data is loading
@ -170,9 +160,7 @@ const App = () => {
<Notifications <Notifications
showNotification={showNotification} showNotification={showNotification}
notifications={notifications} notifications={notifications}
exceptions={exceptions}
removeNotificationById={removeNotificationById} removeNotificationById={removeNotificationById}
removeExceptionById={removeExceptionById}
/> />
<Offcanvas <Offcanvas