chore(frontend): changed source code to src folder from root

frontend/src/components/context/Notifications/Notification.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { Notification as NotificationType } from './NotificationProvider';
+
+interface NotificationProps {
+  notification: Required<NotificationType>;
+  clearNotification: (text: string) => void;
+}
+
+const Notification = ({
+  notification,
+  clearNotification
+}: NotificationProps) => {
+  const timeout = useRef<number>();
+
+  const handleClearNotification = () => clearNotification(notification.text);
+
+  const setNotifTimeout = () => {
+    timeout.current = window.setTimeout(
+      handleClearNotification,
+      notification.timeoutMs
+    );
+  };
+
+  const cancelNotifTimeout = () => {
+    clearTimeout(timeout.current);
+  };
+
+  useEffect(() => {
+    setNotifTimeout();
+
+    return cancelNotifTimeout;
+  }, []);
+
+  return (
+    <div
+      className="relative w-full flex items-center justify-between px-4 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
+      role="alert"
+    >
+      {notification.type === 'error' && (
+        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md"></div>
+      )}
+      {notification.type === 'success' && (
+        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md"></div>
+      )}
+      {notification.type === 'info' && (
+        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md"></div>
+      )}
+      <p className="text-bunker-200 text-sm font-semibold mt-0.5">
+        {notification.text}
+      </p>
+      <button
+        className="rounded-lg"
+        onClick={() => clearNotification(notification.text)}
+      >
+        <FontAwesomeIcon
+          className="text-white pl-2 w-4 h-3 hover:text-red"
+          icon={faX}
+        />
+      </button>
+    </div>
+  );
+};
+
+export default Notification;

frontend/src/components/context/Notifications/NotificationProvider.tsx

@@ -0,0 +1,69 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+import Notifications from './Notifications';
+
+type NotificationType = 'success' | 'error' | 'info';
+
+export type Notification = {
+  text: string;
+  type?: NotificationType;
+  timeoutMs?: number;
+};
+
+type NotificationContextState = {
+  createNotification: (newNotification: Notification) => void;
+};
+
+const NotificationContext = createContext<NotificationContextState>({
+  createNotification: () => console.log('createNotification not set!')
+});
+
+export const useNotificationContext = () => useContext(NotificationContext);
+
+interface NotificationProviderProps {
+  children: ReactNode;
+}
+
+const NotificationProvider = ({ children }: NotificationProviderProps) => {
+  const [notifications, setNotifications] = useState<Required<Notification>[]>(
+    []
+  );
+
+  const clearNotification = (text: string) => {
+    return setNotifications((state) =>
+      state.filter((notif) => notif.text !== text)
+    );
+  };
+
+  const createNotification = ({
+    text,
+    type = 'success',
+    timeoutMs = 4000
+  }: Notification) => {
+    const doesNotifExist = notifications.some((notif) => notif.text === text);
+
+    if (doesNotifExist) {
+      return;
+    }
+
+    const newNotification: Required<Notification> = { text, type, timeoutMs };
+
+    return setNotifications((state) => [...state, newNotification]);
+  };
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        createNotification
+      }}
+    >
+      <Notifications
+        notifications={notifications}
+        clearNotification={clearNotification}
+      />
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export default NotificationProvider;

frontend/src/components/context/Notifications/Notifications.tsx

@@ -0,0 +1,30 @@
+import Notification from './Notification';
+import { Notification as NotificationType } from './NotificationProvider';
+
+interface NoticationsProps {
+  notifications: Required<NotificationType>[];
+  clearNotification: (text: string) => void;
+}
+
+const Notifications = ({
+  notifications,
+  clearNotification
+}: NoticationsProps) => {
+  if (!notifications.length) {
+    return null;
+  }
+
+  return (
+    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-2 bottom-2 pointer-events-none">
+      {notifications.map((notif) => (
+        <Notification
+          key={notif.text}
+          notification={notif}
+          clearNotification={clearNotification}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Notifications;