Added timeout for alert (#609)

src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import { Collapse, Alert as MUIAlert } from "@mui/material";
 import styles from "./Alert.module.css";
 
@@ -10,6 +10,20 @@ interface Props {
 }
 
 const Alert: FC<Props> = ({ open, setOpen, message, severity }: Props) => {
+  useEffect(() => {
+    const timeId = setTimeout(() => {
+      setOpen(false);
+    }, 4000);
+
+    return () => {
+      clearTimeout(timeId);
+    };
+  }, []);
+
+  if (!open) {
+    return null;
+  }
+
   return (
     <Collapse in={open} className={styles.collapse}>
       <div onClick={() => setOpen(false)}>

src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, FC } from "react";
+import React, { useState, FC, useEffect } from "react";
 import { render } from "react-dom";
 import "./index.css";
 import AppRoutes from "./AppRoutes";
@@ -13,10 +13,11 @@ import { AlertContext, severityEnum } from "./contexts/AlertContext";
 import Alert from "./components/Alert/Alert";
 
 const Root: FC = () => {
+  // Hooks for the Alert component
   const [open, setOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [severity, setSeverity] = useState(severityEnum.INFO);
-  
+
   return (
     <>
       <Auth0Provider
@@ -35,13 +36,14 @@ const Root: FC = () => {
               severity,
             }}
           >
-            <Alert
-              open={open}
-              setOpen={setOpen}
-              message={message}
-              severity={severity}
-            />
-
+            {open ? (
+              <Alert
+                open={open}
+                setOpen={setOpen}
+                message={message}
+                severity={severity}
+              />
+            ) : null}
             <div className={guistyles.container}>
               <div className={"container"}>
                 <Router>