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] 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(