From add30754397ac16bbd4e17e916fe6f12872b1457 Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 11:52:18 -0500
Subject: [PATCH 1/8] feat: create  prop for Notification; small readability
 changes

---
 .../context/Notifications/NotificationProvider.tsx    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/components/context/Notifications/NotificationProvider.tsx b/frontend/components/context/Notifications/NotificationProvider.tsx
index 723319615..644cb4fa9 100644
--- a/frontend/components/context/Notifications/NotificationProvider.tsx
+++ b/frontend/components/context/Notifications/NotificationProvider.tsx
@@ -7,6 +7,7 @@ type NotificationType = "success" | "error";
 export type Notification = {
   text: string;
   type: NotificationType;
+  timeoutMs?: number;
 };
 
 type NotificationContextState = {
@@ -36,14 +37,20 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
     return setNotifications([]);
   };
 
-  const createNotification = ({ text, type = "success" }: Notification) => {
+  const createNotification = ({
+    text,
+    type = "success",
+    timeoutMs = 2000,
+  }: Notification) => {
     const doesNotifExist = notifications.some((notif) => notif.text === text);
 
     if (doesNotifExist) {
       return;
     }
 
-    return setNotifications((state) => [...state, { text, type }]);
+    const newNotification: Notification = { text, type, timeoutMs };
+
+    return setNotifications((state) => [...state, newNotification]);
   };
 
   return (

From 349865e6efa4d78930debd86548a7ec8fe089ddf Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 11:52:51 -0500
Subject: [PATCH 2/8] fix: clearNotification now requires string

---
 .../context/Notifications/Notification.tsx         |  2 +-
 .../context/Notifications/NotificationProvider.tsx | 14 +++++---------
 .../context/Notifications/Notifications.tsx        |  2 +-
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/components/context/Notifications/Notification.tsx b/frontend/components/context/Notifications/Notification.tsx
index 974843cf6..1ee52d797 100644
--- a/frontend/components/context/Notifications/Notification.tsx
+++ b/frontend/components/context/Notifications/Notification.tsx
@@ -6,7 +6,7 @@ import { Notification as NotificationType } from "./NotificationProvider";
 
 interface NotificationProps {
   notification: NotificationType;
-  clearNotification: (text?: string) => void;
+  clearNotification: (text: string) => void;
 }
 
 const Notification = ({
diff --git a/frontend/components/context/Notifications/NotificationProvider.tsx b/frontend/components/context/Notifications/NotificationProvider.tsx
index 644cb4fa9..0f5c174d0 100644
--- a/frontend/components/context/Notifications/NotificationProvider.tsx
+++ b/frontend/components/context/Notifications/NotificationProvider.tsx
@@ -11,7 +11,7 @@ export type Notification = {
 };
 
 type NotificationContextState = {
-  createNotification: ({ text, type }: Notification) => void;
+  createNotification: (newNotification: Notification) => void;
 };
 
 const NotificationContext = createContext<NotificationContextState>({
@@ -27,14 +27,10 @@ interface NotificationProviderProps {
 const NotificationProvider = ({ children }: NotificationProviderProps) => {
   const [notifications, setNotifications] = useState<Notification[]>([]);
 
-  const clearNotification = (text?: string) => {
-    if (text) {
-      return setNotifications((state) =>
-        state.filter((notif) => notif.text !== text)
-      );
-    }
-
-    return setNotifications([]);
+  const clearNotification = (text: string) => {
+    return setNotifications((state) =>
+      state.filter((notif) => notif.text !== text)
+    );
   };
 
   const createNotification = ({
diff --git a/frontend/components/context/Notifications/Notifications.tsx b/frontend/components/context/Notifications/Notifications.tsx
index 856331e24..947032730 100644
--- a/frontend/components/context/Notifications/Notifications.tsx
+++ b/frontend/components/context/Notifications/Notifications.tsx
@@ -3,7 +3,7 @@ import { Notification as NotificationType } from "./NotificationProvider";
 
 interface NoticationsProps {
   notifications: NotificationType[];
-  clearNotification: (text?: string) => void;
+  clearNotification: (text: string) => void;
 }
 
 const Notifications = ({

From 251426b5597e40d5628afb2da1bc36a8e58f8e65 Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 11:57:39 -0500
Subject: [PATCH 3/8] feat: Add notification timeout

---
 .../context/Notifications/Notification.tsx    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/frontend/components/context/Notifications/Notification.tsx b/frontend/components/context/Notifications/Notification.tsx
index 1ee52d797..5afacc010 100644
--- a/frontend/components/context/Notifications/Notification.tsx
+++ b/frontend/components/context/Notifications/Notification.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
@@ -13,6 +14,27 @@ 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={classnames(

From 9098bdc7510ef1c390a6d34d71be42eda1cb476e Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 11:58:17 -0500
Subject: [PATCH 4/8] refactor: Change type to ensure notifs within state are
 Required<>

---
 frontend/components/context/Notifications/Notification.tsx  | 2 +-
 .../context/Notifications/NotificationProvider.tsx          | 6 ++++--
 frontend/components/context/Notifications/Notifications.tsx | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/components/context/Notifications/Notification.tsx b/frontend/components/context/Notifications/Notification.tsx
index 5afacc010..0263a05c1 100644
--- a/frontend/components/context/Notifications/Notification.tsx
+++ b/frontend/components/context/Notifications/Notification.tsx
@@ -6,7 +6,7 @@ import classnames from "classnames";
 import { Notification as NotificationType } from "./NotificationProvider";
 
 interface NotificationProps {
-  notification: NotificationType;
+  notification: Required<NotificationType>;
   clearNotification: (text: string) => void;
 }
 
diff --git a/frontend/components/context/Notifications/NotificationProvider.tsx b/frontend/components/context/Notifications/NotificationProvider.tsx
index 0f5c174d0..15287e909 100644
--- a/frontend/components/context/Notifications/NotificationProvider.tsx
+++ b/frontend/components/context/Notifications/NotificationProvider.tsx
@@ -25,7 +25,9 @@ interface NotificationProviderProps {
 }
 
 const NotificationProvider = ({ children }: NotificationProviderProps) => {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [notifications, setNotifications] = useState<Required<Notification>[]>(
+    []
+  );
 
   const clearNotification = (text: string) => {
     return setNotifications((state) =>
@@ -44,7 +46,7 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
       return;
     }
 
-    const newNotification: Notification = { text, type, timeoutMs };
+    const newNotification: Required<Notification> = { text, type, timeoutMs };
 
     return setNotifications((state) => [...state, newNotification]);
   };
diff --git a/frontend/components/context/Notifications/Notifications.tsx b/frontend/components/context/Notifications/Notifications.tsx
index 947032730..e0a9afbf2 100644
--- a/frontend/components/context/Notifications/Notifications.tsx
+++ b/frontend/components/context/Notifications/Notifications.tsx
@@ -2,7 +2,7 @@ import Notification from "./Notification";
 import { Notification as NotificationType } from "./NotificationProvider";
 
 interface NoticationsProps {
-  notifications: NotificationType[];
+  notifications: Required<NotificationType>[];
   clearNotification: (text: string) => void;
 }
 

From 6050e65a59d0f5e07988a29afdd359e5c93ebaed Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 12:02:01 -0500
Subject: [PATCH 5/8] fix: notif type is optional

---
 .../components/context/Notifications/NotificationProvider.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/context/Notifications/NotificationProvider.tsx b/frontend/components/context/Notifications/NotificationProvider.tsx
index 15287e909..d0dd7a1fb 100644
--- a/frontend/components/context/Notifications/NotificationProvider.tsx
+++ b/frontend/components/context/Notifications/NotificationProvider.tsx
@@ -6,7 +6,7 @@ type NotificationType = "success" | "error";
 
 export type Notification = {
   text: string;
-  type: NotificationType;
+  type?: NotificationType;
   timeoutMs?: number;
 };
 

From 9e1112eb52d421128c897159b543fa96ed464a69 Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 12:04:53 -0500
Subject: [PATCH 6/8] fix: hide notifs wrapper if no notifs

---
 frontend/components/context/Notifications/Notifications.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/components/context/Notifications/Notifications.tsx b/frontend/components/context/Notifications/Notifications.tsx
index e0a9afbf2..82dcc3e14 100644
--- a/frontend/components/context/Notifications/Notifications.tsx
+++ b/frontend/components/context/Notifications/Notifications.tsx
@@ -10,6 +10,10 @@ const Notifications = ({
   notifications,
   clearNotification,
 }: NoticationsProps) => {
+  if (!notifications.length) {
+    return null;
+  }
+
   return (
     <div className="hidden fixed z-50 top-1 w-full inset-x-0 pointer-events-none md:flex justify-center">
       <div className="flex flex-col gap-y-2 w-96">

From 91c8fd14df5e07280ab6f64dabff296ebc37e0e6 Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 12:15:17 -0500
Subject: [PATCH 7/8] feat: add  notif type

---
 frontend/components/context/Notifications/Notification.tsx      | 1 +
 .../components/context/Notifications/NotificationProvider.tsx   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components/context/Notifications/Notification.tsx b/frontend/components/context/Notifications/Notification.tsx
index 0263a05c1..e473ddb52 100644
--- a/frontend/components/context/Notifications/Notification.tsx
+++ b/frontend/components/context/Notifications/Notification.tsx
@@ -42,6 +42,7 @@ const Notification = ({
         {
           "bg-green-600": notification.type === "success",
           "bg-red-500": notification.type === "error",
+          "bg-blue-500": notification.type === "info",
         }
       )}
       role="alert"
diff --git a/frontend/components/context/Notifications/NotificationProvider.tsx b/frontend/components/context/Notifications/NotificationProvider.tsx
index d0dd7a1fb..b029dc6c6 100644
--- a/frontend/components/context/Notifications/NotificationProvider.tsx
+++ b/frontend/components/context/Notifications/NotificationProvider.tsx
@@ -2,7 +2,7 @@ import { createContext, ReactNode, useContext, useState } from "react";
 
 import Notifications from "./Notifications";
 
-type NotificationType = "success" | "error";
+type NotificationType = "success" | "error" | "info";
 
 export type Notification = {
   text: string;

From 7bbaf4fee8d04dbabb804d651b6f56425d3774cd Mon Sep 17 00:00:00 2001
From: asharonbaltazar <asharonbaltazar@outlook.com>
Date: Wed, 7 Dec 2022 12:16:53 -0500
Subject: [PATCH 8/8] feat: move notifs to bottom right

---
 .../context/Notifications/Notifications.tsx    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/components/context/Notifications/Notifications.tsx b/frontend/components/context/Notifications/Notifications.tsx
index 82dcc3e14..6940c3345 100644
--- a/frontend/components/context/Notifications/Notifications.tsx
+++ b/frontend/components/context/Notifications/Notifications.tsx
@@ -15,16 +15,14 @@ const Notifications = ({
   }
 
   return (
-    <div className="hidden fixed z-50 top-1 w-full inset-x-0 pointer-events-none md:flex justify-center">
-      <div className="flex flex-col gap-y-2 w-96">
-        {notifications.map((notif) => (
-          <Notification
-            key={notif.text}
-            notification={notif}
-            clearNotification={clearNotification}
-          />
-        ))}
-      </div>
+    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-1 pointer-events-none">
+      {notifications.map((notif) => (
+        <Notification
+          key={notif.text}
+          notification={notif}
+          clearNotification={clearNotification}
+        />
+      ))}
     </div>
   );
 };