492: Update useAlert params and add clearAlert

Author: carrollsa

src/client/src/components/AlertBanner.jsx

@@ -1,22 +1,20 @@
 import React from "react";
 
-import { Alert } from "@material-ui/lab";
+import { Alert, AlertTitle } from "@material-ui/lab";
 import useAlert from "../hooks/useAlert";
+import { Typography } from "@material-ui/core";
+import _ from "lodash";
 
 const AlertBanner = () => {
-    const { text, type, setAlert } = useAlert();
+    const { text, type, clearAlert } = useAlert();
 
     if (text && type) {
         return (
-            <Alert
-                onClose={() => setAlert(null)}
-                severity={type}
-                sx={{
-                    position: "absolute",
-                    zIndex: 10,
-                }}
-            >
-                {text}
+            <Alert onClose={() => clearAlert()} severity={type} spacing={2} >
+                <AlertTitle>
+                    <Typography variant="h6">{_.startCase(type)}</Typography>
+                </AlertTitle>
+                <Typography>{text}</Typography>
             </Alert>
         );
     } else {

src/client/src/contexts/AlertContext.jsx

@@ -15,9 +15,9 @@ export const AlertProvider = ({ children }) => {
     const [text, setText] = React.useState("");
     const [type, setType] = React.useState("");
 
-    const setAlert = (text, type) => {
-        setText(text);
+    const setAlert = ({ type, text }) => {
         setType(type);
+        setText(text);
 
         if (type !== "error") {
             setTimeout(() => {
@@ -27,12 +27,18 @@ export const AlertProvider = ({ children }) => {
         }
     };
 
+    const clearAlert = () => {
+        setType("");
+        setText("");
+    }
+
     return (
         <AlertContext.Provider
             value={{
                 text,
                 type,
                 setAlert,
+                clearAlert,
             }}
         >
             {children}