mirror of
https://github.com/tiqi-group/pydase.git
synced 2025-06-07 22:10:41 +02:00
feat (frontend): adding useNotification hook
This commit is contained in:
parent
a333de9957
commit
48dd4d58b7
@ -8,6 +8,7 @@ import {
|
|||||||
import './App.css';
|
import './App.css';
|
||||||
import { getDataServiceJSONValueByPathAndKey } from './utils/nestedObjectUtils';
|
import { getDataServiceJSONValueByPathAndKey } from './utils/nestedObjectUtils';
|
||||||
import { Notifications } from './components/NotificationsComponent';
|
import { Notifications } from './components/NotificationsComponent';
|
||||||
|
import { useNotification } from './hooks/useNotification';
|
||||||
|
|
||||||
type ValueType = boolean | string | number | object;
|
type ValueType = boolean | string | number | object;
|
||||||
|
|
||||||
@ -117,18 +118,12 @@ const App = () => {
|
|||||||
const [isInstantUpdate, setIsInstantUpdate] = useState(true);
|
const [isInstantUpdate, setIsInstantUpdate] = useState(true);
|
||||||
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, notify, removeNotificationById } = useNotification();
|
||||||
const [exceptions, setExceptions] = useState([]); // Exception notifications
|
const {
|
||||||
|
notifications: exceptions,
|
||||||
const removeNotificationById = (id: number) => {
|
notify: notifyException,
|
||||||
setNotifications((prevNotifications) =>
|
removeNotificationById: removeExceptionById
|
||||||
prevNotifications.filter((n) => n.id !== id)
|
} = useNotification();
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
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);
|
||||||
@ -165,7 +160,7 @@ const App = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Adding the new notification to the list
|
// Adding the new notification to the list
|
||||||
setNotifications((prevNotifications) => [newNotification, ...prevNotifications]);
|
notify(newNotification);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onException(value: ExceptionMessage) {
|
function onException(value: ExceptionMessage) {
|
||||||
@ -177,7 +172,7 @@ const App = () => {
|
|||||||
time: timeString,
|
time: timeString,
|
||||||
text: `${value.data.type}: ${value.data.exception}.`
|
text: `${value.data.type}: ${value.data.exception}.`
|
||||||
};
|
};
|
||||||
setExceptions((prevNotifications) => [newNotification, ...prevNotifications]);
|
notifyException(newNotification);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Keep the state reference up to date
|
// Keep the state reference up to date
|
||||||
|
23
frontend/src/hooks/useNotification.ts
Normal file
23
frontend/src/hooks/useNotification.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
type NotificationMsg = {
|
||||||
|
id: number;
|
||||||
|
time: string;
|
||||||
|
text: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useNotification = () => {
|
||||||
|
const [notifications, setNotifications] = useState([]);
|
||||||
|
|
||||||
|
const notify = (message: NotificationMsg) => {
|
||||||
|
// Custom logic for notifications
|
||||||
|
setNotifications((prevNotifications) => [message, ...prevNotifications]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeNotificationById = (id: number) => {
|
||||||
|
setNotifications((prevNotifications) =>
|
||||||
|
prevNotifications.filter((n) => n.id !== id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { notifications, notify, removeNotificationById };
|
||||||
|
};
|
@ -1,13 +1,13 @@
|
|||||||
{
|
{
|
||||||
"files": {
|
"files": {
|
||||||
"main.css": "/static/css/main.398bc7f8.css",
|
"main.css": "/static/css/main.398bc7f8.css",
|
||||||
"main.js": "/static/js/main.44c6c71b.js",
|
"main.js": "/static/js/main.95543987.js",
|
||||||
"index.html": "/index.html",
|
"index.html": "/index.html",
|
||||||
"main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map",
|
"main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map",
|
||||||
"main.44c6c71b.js.map": "/static/js/main.44c6c71b.js.map"
|
"main.95543987.js.map": "/static/js/main.95543987.js.map"
|
||||||
},
|
},
|
||||||
"entrypoints": [
|
"entrypoints": [
|
||||||
"static/css/main.398bc7f8.css",
|
"static/css/main.398bc7f8.css",
|
||||||
"static/js/main.44c6c71b.js"
|
"static/js/main.95543987.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
@ -1 +1 @@
|
|||||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.44c6c71b.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.95543987.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
3
src/pydase/frontend/static/js/main.95543987.js
Normal file
3
src/pydase/frontend/static/js/main.95543987.js
Normal file
File diff suppressed because one or more lines are too long
1
src/pydase/frontend/static/js/main.95543987.js.map
Normal file
1
src/pydase/frontend/static/js/main.95543987.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user