Merge branch 'master' of github.com:CodeForPhilly/paws-data-pipeline into 494-logging

Author: Osman

src/client/package-lock.json

@@ -11,9 +11,9 @@
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.5.0",
         "@testing-library/user-event": "^7.2.1",
-        "jsonwebtoken": "^8.5.1",
+        "jsonwebtoken": "^9.0.0",
         "lodash": "^4.17.20",
-        "moment": "^2.29.1",
+        "moment-timezone": "^0.5.43",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-hook-form": "^7.43.9",

src/client/package.json

@@ -7,7 +7,7 @@ import Header from "./components/Header";
 import Login from './pages/Login/Login';
 import Logout from './pages/Login/Logout';
 import HomePage from './pages/Home';
-import Admin from './pages/Admin';
+import Admin from './pages/Admin/Admin';
 import {Search360} from './pages/DataView360/Search/Search';
 import View360 from './pages/DataView360/View/View360';
 import About from './pages/About';
@@ -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,9 +95,12 @@ function AuthenticatedApp() {
     return (
         <Router>
 
-            <Box pb={4}>
+            <Box>
                 {!jwtExpired ? <Header headerType={headerType}/> : <Header headerType={'Login'}/>}
             </Box>
+            <Box minHeight="84px">
+                <AlertBanner />
+            </Box>
             {popRefreshAlert &&
             <RefreshDlg shouldOpen={true} setToken={setToken}/>} {/* Pop up the refresh dialog */}
 

src/client/src/App.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+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, clearAlert } = useAlert();
+
+    if (text && type) {
+        return (
+            <Alert onClose={() => clearAlert()} severity={type} spacing={2} >
+                <AlertTitle>
+                    <Typography variant="h6">{_.startCase(type)}</Typography>
+                </AlertTitle>
+                <Typography>{text}</Typography>
+            </Alert>
+        );
+    } else {
+        return <></>;
+    }
+};
+
+export default AlertBanner;

src/client/src/components/AlertBanner.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+const ALERT_TIME = 6000;
+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 timerRef = React.useRef(null);
+
+    const setAlert = ({ type, text }) => {
+        setType(type);
+        setText(text);
+
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+
+        if (type !== "error") {
+            timerRef.current = setTimeout(() => {
+                setText("");
+                setType("");
+            }, ALERT_TIME);
+        }
+    };
+
+    const clearAlert = () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+
+        setType("");
+        setText("");
+    }
+
+    return (
+        <AlertContext.Provider
+            value={{
+                text,
+                type,
+                setAlert,
+                clearAlert,
+            }}
+        >
+            {children}
+        </AlertContext.Provider>
+    );
+};
+
+export default AlertContext;

src/client/src/contexts/AlertContext.jsx

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

src/client/src/hooks/useAlert.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')