Refresh dialog component and App.js support

Author: c-simpson

src/client/src/App.js

@@ -8,7 +8,10 @@ import Admin from './pages/Admin';
 import DataView from './pages/DataView360/DataView360';
 import About from './pages/About';
 import Login from './components/Login/Login';
+import CDialog from './components/CDialog';
 import Check from './pages/Check/Check';
+
+
 import useToken from './components/Login/useToken';
 var jwt = require('jsonwebtoken');
 
@@ -76,6 +79,8 @@ function AuthenticatedApp() {
 
     const jwtExpired = expTime <= 0
 
+    const popRefreshAlert = expTime < 30;
+
     const hdr = userRole === 'admin' ?  <AdminHeader /> : <Header /> // If we're going to display a header, which one?
 
   return (
@@ -84,6 +89,9 @@ function AuthenticatedApp() {
 
             { !jwtExpired && hdr ?  hdr : '' /* Above-chosen header, or if logged out, no header */ } 
 
+            {popRefreshAlert && <CDialog /> }
+
+
             {  /* If not logged in, show login screen */
               (!access_token | jwtExpired) ?  <Login setToken={setToken} /> :    <Switch>  
 

src/client/src/components/CDialog.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+export default function CDialog() {
+  const [open, setOpen] = React.useState(true);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (shouldRefresh) => {
+    setOpen(false);
+    console.log("Refresh? " + String(shouldRefresh));
+  };
+
+
+
+  return (
+    <div>
+      {/* <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+        Open alert dialog
+      </Button> */}
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{"You are about to be logged out!"}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            Stay logged in to keep working?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => handleClose(false)} color="primary">
+            No
+          </Button>
+          <Button onClick={() => handleClose(true)} color="primary" autoFocus>
+           Yes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}