feat: updating useNotification hook

- automatically generates id and timestamp
- components just have to provide a message
This commit is contained in:
Mose Müller 2023-08-10 11:04:43 +02:00
parent 6e4909ece5
commit 04e0e9e8b2
9 changed files with 23 additions and 34 deletions

View File

@ -132,9 +132,6 @@ const App = () => {
// Extracting data from the notification
const { parent_path, name, value: newValue } = value.data;
// Getting the current time in the required format
const timeString = new Date().toISOString().substring(11, 19);
// Dispatching the update to the reducer
dispatch({
type: 'UPDATE_ATTRIBUTE',
@ -153,25 +150,13 @@ const App = () => {
}
// Creating a new notification
const newNotification = {
id: Math.random(),
time: timeString,
text: `${parent_path}.${name} changed to ${notificationMsg}.`
};
const newNotification = `${parent_path}.${name} changed to ${notificationMsg}.`;
// Adding the new notification to the list
notify(newNotification);
}
function onException(value: ExceptionMessage) {
const currentTime = new Date();
const timeString = currentTime.toISOString().substr(11, 8);
const newNotification = {
id: Math.random(),
time: timeString,
text: `${value.data.type}: ${value.data.exception}.`
};
const newNotification = `${value.data.type}: ${value.data.exception}.`;
notifyException(newNotification);
}

View File

@ -1,7 +1,7 @@
import React from 'react';
import { ToastContainer, Toast } from 'react-bootstrap';
type Notification = {
export type Notification = {
id: number;
time: string;
text: string;

View File

@ -1,16 +1,20 @@
import { useState } from 'react';
type NotificationMsg = {
id: number;
time: string;
text: string;
};
import { Notification } from '../components/NotificationsComponent';
export const useNotification = () => {
const [notifications, setNotifications] = useState([]);
const [notifications, setNotifications] = useState<Notification[]>([]);
const notify = (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();
const notify = (message: NotificationMsg) => {
// Custom logic for notifications
setNotifications((prevNotifications) => [message, ...prevNotifications]);
setNotifications((prevNotifications) => [
{ id, text, time: timeString },
...prevNotifications
]);
};
const removeNotificationById = (id: number) => {

View File

@ -1,13 +1,13 @@
{
"files": {
"main.css": "/static/css/main.398bc7f8.css",
"main.js": "/static/js/main.95543987.js",
"main.js": "/static/js/main.799e0879.js",
"index.html": "/index.html",
"main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map",
"main.95543987.js.map": "/static/js/main.95543987.js.map"
"main.799e0879.js.map": "/static/js/main.799e0879.js.map"
},
"entrypoints": [
"static/css/main.398bc7f8.css",
"static/js/main.95543987.js"
"static/js/main.799e0879.js"
]
}

View File

@ -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.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>
<!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.799e0879.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