chore(frontend): fixed all eslint errors

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

@@ -2,26 +2,26 @@ 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';
+type NotificationType = 'success' | 'error' | 'info';
+
+export type TNotification = {
+  text: string;
+  type?: NotificationType;
+  timeoutMs?: number;
+};
 
 interface NotificationProps {
-  notification: Required<NotificationType>;
+  notification: Required<TNotification>;
   clearNotification: (text: string) => void;
 }
 
-const Notification = ({
-  notification,
-  clearNotification
-}: NotificationProps) => {
+const Notification = ({ notification, clearNotification }: NotificationProps) => {
   const timeout = useRef<number>();
 
   const handleClearNotification = () => clearNotification(notification.text);
 
   const setNotifTimeout = () => {
-    timeout.current = window.setTimeout(
-      handleClearNotification,
-      notification.timeoutMs
-    );
+    timeout.current = window.setTimeout(handleClearNotification, notification.timeoutMs);
   };
 
   const cancelNotifTimeout = () => {
@@ -40,25 +40,21 @@ const Notification = ({
       role="alert"
     >
       {notification.type === 'error' && (
-        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md"></div>
+        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md" />
       )}
       {notification.type === 'success' && (
-        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md"></div>
+        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md" />
       )}
       {notification.type === 'info' && (
-        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md"></div>
+        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md" />
       )}
-      <p className="text-bunker-200 text-sm font-semibold mt-0.5">
-        {notification.text}
-      </p>
+      <p className="text-bunker-200 text-sm font-semibold mt-0.5">{notification.text}</p>
       <button
+        type="button"
         className="rounded-lg"
         onClick={() => clearNotification(notification.text)}
       >
-        <FontAwesomeIcon
-          className="text-white pl-2 w-4 h-3 hover:text-red"
-          icon={faX}
-        />
+        <FontAwesomeIcon className="text-white pl-2 w-4 h-3 hover:text-red" icon={faX} />
       </button>
     </div>
   );

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

@@ -1,17 +1,10 @@
-import { createContext, ReactNode, useContext, useState } from 'react';
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 
+import { TNotification } from './Notification';
 import Notifications from './Notifications';
 
-type NotificationType = 'success' | 'error' | 'info';
-
-export type Notification = {
-  text: string;
-  type?: NotificationType;
-  timeoutMs?: number;
-};
-
 type NotificationContextState = {
-  createNotification: (newNotification: Notification) => void;
+  createNotification: (newNotification: TNotification) => void;
 };
 
 const NotificationContext = createContext<NotificationContextState>({
@@ -24,43 +17,33 @@ interface NotificationProviderProps {
   children: ReactNode;
 }
 
+// TODO: Migration to radix toast
 const NotificationProvider = ({ children }: NotificationProviderProps) => {
-  const [notifications, setNotifications] = useState<Required<Notification>[]>(
-    []
+  const [notifications, setNotifications] = useState<Required<TNotification>[]>([]);
+
+  const clearNotification = (text: string) =>
+    setNotifications((state) => state.filter((notif) => notif.text !== text));
+
+  const createNotification = useCallback(
+    ({ text, type = 'success', timeoutMs = 4000 }: TNotification) => {
+      const doesNotifExist = notifications.some((notif) => notif.text === text);
+
+      if (doesNotifExist) {
+        return;
+      }
+
+      const newNotification: Required<TNotification> = { text, type, timeoutMs };
+
+      setNotifications((state) => [...state, newNotification]);
+    },
+    [notifications]
   );
 
-  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]);
-  };
+  const value = useMemo(() => ({ createNotification }), [createNotification]);
 
   return (
-    <NotificationContext.Provider
-      value={{
-        createNotification
-      }}
-    >
-      <Notifications
-        notifications={notifications}
-        clearNotification={clearNotification}
-      />
+    <NotificationContext.Provider value={value}>
+      <Notifications notifications={notifications} clearNotification={clearNotification} />
       {children}
     </NotificationContext.Provider>
   );

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

@@ -1,27 +1,19 @@
-import Notification from './Notification';
-import { Notification as NotificationType } from './NotificationProvider';
+import Notification, { TNotification } from './Notification';
 
 interface NoticationsProps {
-  notifications: Required<NotificationType>[];
+  notifications: Required<TNotification>[];
   clearNotification: (text: string) => void;
 }
 
-const Notifications = ({
-  notifications,
-  clearNotification
-}: NoticationsProps) => {
+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">
+    <div className="hidden fixed z-50 md:flex md:flex-col-reverse 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}
-        />
+        <Notification key={notif.text} notification={notif} clearNotification={clearNotification} />
       ))}
     </div>
   );