feat: updating useNotification hook

- automatically generates id and timestamp
- components just have to provide a message

frontend/src/App.tsx

@@ -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);
   }
 

frontend/src/components/NotificationsComponent.tsx

@@ -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;

frontend/src/hooks/useNotification.ts

@@ -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) => {