feat: moving notifications into separate component

frontend/src/components/NotificationsComponent.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ToastContainer, Toast } from 'react-bootstrap';
+
+type Notification = {
+  id: number;
+  time: string;
+  text: string;
+};
+
+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;
+
+  return (
+    <ToastContainer
+      className="navbarOffset toastContainer"
+      position="top-end"
+      style={{ position: 'fixed' }}>
+      {showNotification &&
+        notifications.map((notification) => (
+          <Toast
+            className="notificationToast"
+            key={notification.id}
+            onClose={() => 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>
+            </Toast.Header>
+            <Toast.Body>{notification.text}</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>
+  );
+});