492: Add global alert banner

Author: carrollsa

src/client/src/App.js

@@ -19,6 +19,7 @@ import useToken from './pages/Login/useToken';
 import Box from "@material-ui/core/Box";
 import {RFM} from "./pages/RFM/RFM";
 import UserManagement from './pages/UserManagement/UserManagement';
+import AlertBanner from './components/AlertBanner';
 
 let jwt = require('jsonwebtoken');
 
@@ -94,6 +95,9 @@ function AuthenticatedApp() {
     return (
         <Router>
 
+            <Box>
+                <AlertBanner />
+            </Box>
             <Box pb={4}>
                 {!jwtExpired ? <Header headerType={headerType}/> : <Header headerType={'Login'}/>}
             </Box>

src/client/src/components/AlertBanner.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { Alert } from "@material-ui/lab";
+import useAlert from "../hooks/useAlert";
+
+const AlertBanner = () => {
+    const { text, type, setAlert } = useAlert();
+
+    if (text && type) {
+        return (
+            <Alert
+                onClose={() => setAlert(null)}
+                severity={type}
+                sx={{
+                    position: "absolute",
+                    zIndex: 10,
+                }}
+            >
+                {text}
+            </Alert>
+        );
+    } else {
+        return <></>;
+    }
+};
+
+export default AlertBanner;

src/client/src/contexts/AlertContext.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+const ALERT_TIME = 5000;
+const initialState = {
+    text: "",
+    type: "",
+};
+
+const AlertContext = React.createContext({
+    ...initialState,
+    setAlert: () => {},
+});
+
+export const AlertProvider = ({ children }) => {
+    const [text, setText] = React.useState("");
+    const [type, setType] = React.useState("");
+
+    const setAlert = (text, type) => {
+        setText(text);
+        setType(type);
+
+        if (type !== "error") {
+            setTimeout(() => {
+                setText("");
+                setType("");
+            }, ALERT_TIME);
+        }
+    };
+
+    return (
+        <AlertContext.Provider
+            value={{
+                text,
+                type,
+                setAlert,
+            }}
+        >
+            {children}
+        </AlertContext.Provider>
+    );
+};
+
+export default AlertContext;

src/client/src/hooks/useAlert.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import AlertContext from "../contexts/AlertContext";
+
+const useAlert = () => useContext(AlertContext);
+
+export default useAlert;

src/client/src/index.js

@@ -5,12 +5,15 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import * as serviceWorker from './serviceWorker';
 import "./assets/font/font.css";
 import defaultTheme from './theme/defaultTheme';
+import { AlertProvider } from './contexts/AlertContext';
 
 
 ReactDOM.render(
   <React.StrictMode>
     <ThemeProvider theme={defaultTheme}>
-      <App/>
+      <AlertProvider>
+        <App/>
+      </AlertProvider>
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')