From 667bb949cc8f0ccc02041e2467a1b1444619ee84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Mon, 27 Nov 2023 15:40:25 +0100
Subject: [PATCH] rewrites NotificationsComponent to handle various
 notification levels

---
 .../src/components/NotificationsComponent.tsx | 63 ++++++++-----------
 1 file changed, 25 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/NotificationsComponent.tsx b/frontend/src/components/NotificationsComponent.tsx
index d46c645..9a9f96c 100644
--- a/frontend/src/components/NotificationsComponent.tsx
+++ b/frontend/src/components/NotificationsComponent.tsx
@@ -1,70 +1,57 @@
 import React from 'react';
 import { ToastContainer, Toast } from 'react-bootstrap';
 
+export type LevelName = 'ERROR' | 'WARNING' | 'INFO' | 'DEBUG'; // Added levelname
 export type Notification = {
   id: number;
-  time: string;
-  text: string;
+  timeStamp: string;
+  message: string;
+  levelname: LevelName;
 };
 
 type NotificationProps = {
   showNotification: boolean;
   notifications: Notification[];
-  exceptions: Notification[];
   removeNotificationById: (id: number) => void;
-  removeExceptionById: (id: number) => void;
 };
 
 export const Notifications = React.memo((props: NotificationProps) => {
-  const {
-    showNotification,
-    notifications,
-    exceptions,
-    removeExceptionById,
-    removeNotificationById
-  } = props;
+  const { showNotification, notifications, removeNotificationById } = props;
 
   return (
     <ToastContainer className="navbarOffset toastContainer" position="top-end">
       {showNotification &&
         notifications.map((notification) => (
           <Toast
-            className="notificationToast"
+            className={notification.levelname.toLowerCase() + 'Toast'}
             key={notification.id}
             onClose={() => removeNotificationById(notification.id)}
-            onClick={() => {
-              removeNotificationById(notification.id);
-            }}
+            onClick={() => removeNotificationById(notification.id)}
             onMouseLeave={() => {
               removeNotificationById(notification.id);
             }}
             show={true}
-            autohide={true}
-            delay={2000}>
-            <Toast.Header closeButton={false} className="notificationToast text-right">
-              <strong className="me-auto">Notification</strong>
-              <small>{notification.time}</small>
+            autohide={
+              notification.levelname === 'WARNING' ||
+              notification.levelname === 'INFO' ||
+              notification.levelname === 'DEBUG'
+            }
+            delay={
+              notification.levelname === 'WARNING' ||
+              notification.levelname === 'INFO' ||
+              notification.levelname === 'DEBUG'
+                ? 2000
+                : undefined
+            }>
+            <Toast.Header
+              closeButton={false}
+              className={notification.levelname.toLowerCase() + 'Toast text-right'}>
+              <strong className="me-auto">{notification.levelname}</strong>
+              <small>{notification.timeStamp}</small>
             </Toast.Header>
-            <Toast.Body>{notification.text}</Toast.Body>
+            <Toast.Body>{notification.message}</Toast.Body>
           </Toast>
         ))}
-      {exceptions.map((exception) => (
-        <Toast
-          className="exceptionToast"
-          key={exception.id}
-          onClose={() => removeExceptionById(exception.id)}
-          onClick={() => {
-            removeExceptionById(exception.id);
-          }}
-          show={true}
-          autohide={false}>
-          <Toast.Header closeButton className="exceptionToast text-right">
-            <strong className="me-auto">Exception</strong>
-            <small>{exception.time}</small>
-          </Toast.Header>
-          <Toast.Body>{exception.text}</Toast.Body>
-        </Toast>
-      ))}
     </ToastContainer>
   );
 });