From 48dd4d58b7b1e94a2cbe8c89d071935d22e218f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Thu, 10 Aug 2023 10:46:58 +0200 Subject: [PATCH] feat (frontend): adding useNotification hook --- frontend/src/App.tsx | 23 ++++++++----------- frontend/src/hooks/useNotification.ts | 23 +++++++++++++++++++ src/pydase/frontend/asset-manifest.json | 6 ++--- src/pydase/frontend/index.html | 2 +- .../frontend/static/js/main.44c6c71b.js | 3 --- .../frontend/static/js/main.44c6c71b.js.map | 1 - .../frontend/static/js/main.95543987.js | 3 +++ ...CENSE.txt => main.95543987.js.LICENSE.txt} | 0 .../frontend/static/js/main.95543987.js.map | 1 + 9 files changed, 40 insertions(+), 22 deletions(-) create mode 100644 frontend/src/hooks/useNotification.ts delete mode 100644 src/pydase/frontend/static/js/main.44c6c71b.js delete mode 100644 src/pydase/frontend/static/js/main.44c6c71b.js.map create mode 100644 src/pydase/frontend/static/js/main.95543987.js rename src/pydase/frontend/static/js/{main.44c6c71b.js.LICENSE.txt => main.95543987.js.LICENSE.txt} (100%) create mode 100644 src/pydase/frontend/static/js/main.95543987.js.map diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c2a59e8..892981a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,6 +8,7 @@ import { import './App.css'; import { getDataServiceJSONValueByPathAndKey } from './utils/nestedObjectUtils'; import { Notifications } from './components/NotificationsComponent'; +import { useNotification } from './hooks/useNotification'; type ValueType = boolean | string | number | object; @@ -117,18 +118,12 @@ const App = () => { const [isInstantUpdate, setIsInstantUpdate] = useState(true); const [showSettings, setShowSettings] = useState(false); const [showNotification, setShowNotification] = useState(false); - const [notifications, setNotifications] = useState([]); - const [exceptions, setExceptions] = useState([]); // Exception notifications - - const removeNotificationById = (id: number) => { - setNotifications((prevNotifications) => - prevNotifications.filter((n) => n.id !== id) - ); - }; - - const removeExceptionById = (id: number) => { - setExceptions((prevNotifications) => prevNotifications.filter((n) => n.id !== id)); - }; + const { notifications, notify, removeNotificationById } = useNotification(); + const { + notifications: exceptions, + notify: notifyException, + removeNotificationById: removeExceptionById + } = useNotification(); const handleCloseSettings = () => setShowSettings(false); const handleShowSettings = () => setShowSettings(true); @@ -165,7 +160,7 @@ const App = () => { }; // Adding the new notification to the list - setNotifications((prevNotifications) => [newNotification, ...prevNotifications]); + notify(newNotification); } function onException(value: ExceptionMessage) { @@ -177,7 +172,7 @@ const App = () => { time: timeString, text: `${value.data.type}: ${value.data.exception}.` }; - setExceptions((prevNotifications) => [newNotification, ...prevNotifications]); + notifyException(newNotification); } // Keep the state reference up to date diff --git a/frontend/src/hooks/useNotification.ts b/frontend/src/hooks/useNotification.ts new file mode 100644 index 0000000..3553dce --- /dev/null +++ b/frontend/src/hooks/useNotification.ts @@ -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 }; +}; diff --git a/src/pydase/frontend/asset-manifest.json b/src/pydase/frontend/asset-manifest.json index 51b7ded..2529c97 100644 --- a/src/pydase/frontend/asset-manifest.json +++ b/src/pydase/frontend/asset-manifest.json @@ -1,13 +1,13 @@ { "files": { "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", "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": [ "static/css/main.398bc7f8.css", - "static/js/main.44c6c71b.js" + "static/js/main.95543987.js" ] } \ No newline at end of file diff --git a/src/pydase/frontend/index.html b/src/pydase/frontend/index.html index 2efc98a..9d68e4a 100644 --- a/src/pydase/frontend/index.html +++ b/src/pydase/frontend/index.html @@ -1 +1 @@ -pydase App
\ No newline at end of file +pydase App
\ No newline at end of file diff --git a/src/pydase/frontend/static/js/main.44c6c71b.js b/src/pydase/frontend/static/js/main.44c6c71b.js deleted file mode 100644 index b118971..0000000 --- a/src/pydase/frontend/static/js/main.44c6c71b.js +++ /dev/null @@ -1,3 +0,0 @@ -/*! For license information please see main.44c6c71b.js.LICENSE.txt */ -!function(){var e={694:function(e,t){var n;!function(){"use strict";var r={}.hasOwnProperty;function a(){for(var e=[],t=0;t