From 8a37de9903c321ce577331ef7ab8c125b9e3ac65 Mon Sep 17 00:00:00 2001
From: Birdmachine <jeswaldrip@gmail.com>
Date: Tue, 3 Sep 2024 12:24:49 -0400
Subject: [PATCH] re-apply localhost detection for timer rendering, fix issue
 with logout button, clarify logout request status with button, clean up a few
 tabs & comments

---
 src/src/App.css        |   4 ++
 src/src/App.js         | 107 ++++++++++++++++++++---------------------
 src/src/Nav.js         |   9 ++--
 src/src/assets/App.css |   4 ++
 4 files changed, 65 insertions(+), 59 deletions(-)

diff --git a/src/src/App.css b/src/src/App.css
index e8497952..0861ad06 100644
--- a/src/src/App.css
+++ b/src/src/App.css
@@ -70,6 +70,10 @@
   margin-right: 2px;
 }
 
+.logout button div{
+  color: white;
+}
+
 .inline-icon {
   margin-right: 1em;
 }
diff --git a/src/src/App.js b/src/src/App.js
index 9e32a480..3e6bbece 100644
--- a/src/src/App.js
+++ b/src/src/App.js
@@ -77,6 +77,7 @@ export function App (props){
   var [userDataGroups, setUserDataGroups] = useState({});
   var [userDev, setUserDev] = useState(false);
   var [regStatus, setRegStatus] = useState(false);
+  var [isLoggingOut, setIsLoggingOut] = useState(false);
   var [isLoading, setIsLoading] = useState(true);
   var [dtloading, setDTLoading] = useState(true);
   var [bannerTitle,setBannerTitle] = useState();
@@ -230,9 +231,9 @@ export function App (props){
   
   
   function clearAuths() {  
-    console.debug('%c◉ CLEAR AUTHS ', 'color:#00ff7b' );
-    if(process.env.REACT_APP_URL == "http://localhost:8585"){
-      console.debug('%c◉ clearAuths start ', 'color:#00ff7b' );
+    // console.debug('%c◉ CLEAR AUTHS ', 'color:#00ff7b' );
+    if(process.env.REACT_APP_URL === "http://localhost:8585"){
+      // console.debug('%c◉ clearAuths start ', 'color:#00ff7b' );
       return new Promise((resolve) => {
         setTimeout(() => { // Give it a chance to cleaer the local storage
           localStorage.removeItem("info");
@@ -243,9 +244,10 @@ export function App (props){
     }
   }
 
-  function Logout(){
-    clearAuths().then((response) => {
-      console.debug('%c◉  response', 'color:#00ff7b',response );
+  function Logout(e){
+    setIsLoggingOut(true);
+    clearAuths(e).then((response) => {
+        console.debug('%c◉  response', 'color:#00ff7b',response );
         window.location.replace(`${process.env.REACT_APP_DATAINGEST_API_URL}/logout`)
       })
   };
@@ -329,6 +331,7 @@ export function App (props){
       <Navigation 
         login={authStatus} 
         logout={Logout}
+        isLoggingOut={isLoggingOut}
         app_info={ app_info_storage}
         userGroups={userGroups}
         userDataGroups={userDataGroups}
@@ -348,57 +351,53 @@ export function App (props){
         className="alert-danger"
         anchor='bottom'
         open={errorShow}>
-
-
-        <Box  sx={{ 
-          width:          '100%', 
-          padding:        1, 
-          backgroundColor:'#dc3545', 
-          color:          "#fff",
-            '& span, h5':   {display:'inline-block',
-            padding:"0 5px 0 0 ",}, }}>
-            <Typography variant="h5" align="left"><FontAwesomeIcon icon={faExclamationTriangle} sx={{padding:1}}/>  Sorry!  </Typography><Typography align="left" variant="caption" >Something's gone wrong...</Typography>
-            <IconButton
-              sx={{
-                position:'absolute', right:8, top:4, color:'white' 
-              }}
-              aria-label="close drawer"
-              onClick= {()=> setErrorShow(false)}
-              edge="start">
-              <CloseIcon />
-            </IconButton>
-        </Box>
-
-        <Box sx={{
-            width:'100%', height:'100%', padding:1, backgroundColor:'white', color:"#dc3545", 
-          }}>
-          <Grid container>
-            <Grid item xs={7}>
-              <Typography variant="body2" gutterBottom>
-                There's been an error handling the current task. Please try again later. <br />
-                If the problem persists, please contact the HuBMAP Help Desk at <a href="mailto:help@hubmapconsortium.org">help@hubmapconsortium.org</a>
-              </Typography>
-            </Grid>
-
-            <Grid item xs={5}>
-              <Typography variant="body2"gutterBottom>
-                Error Details: <IconButton color="error" size="small" onClick={()=>setErrorInfoShow(!errorInfoShow)}> <ExpandMoreIcon /></IconButton>
-              </Typography>
-              { errorDetail && errorDetail.length>0 && (
-                <Typography variant="caption">ERR{errorDetail}</Typography>
-              )}
-              <Collapse in={errorInfoShow}>
-                <Typography variant="caption">
-                  {errorInfo}
+          <Box  sx={{ 
+            width:          '100%', 
+            padding:        1, 
+            backgroundColor:'#dc3545', 
+            color:"#fff",'& span, h5':{
+                display:'inline-block',
+                padding:"0 5px 0 0 ",
+              }, }
+            }>
+              <Typography variant="h5" align="left"><FontAwesomeIcon icon={faExclamationTriangle} sx={{padding:1}}/>  Sorry!  </Typography><Typography align="left" variant="caption" >Something's gone wrong...</Typography>
+              <IconButton
+                sx={{
+                  position:'absolute', right:8, top:4, color:'white' 
+                }}
+                aria-label="close drawer"
+                onClick= {()=> setErrorShow(false)}
+                edge="start">
+                <CloseIcon />
+              </IconButton>
+          </Box>
+          <Box sx={{
+              width:'100%', height:'100%', padding:1, backgroundColor:'white', color:"#dc3545", 
+            }}>
+            <Grid container>
+              <Grid item xs={7}>
+                <Typography variant="body2" gutterBottom>
+                  There's been an error handling the current task. Please try again later. <br />
+                  If the problem persists, please contact the HuBMAP Help Desk at <a href="mailto:help@hubmapconsortium.org">help@hubmapconsortium.org</a>
                 </Typography>
-              </Collapse>
+              </Grid>
+              <Grid item xs={5}>
+                <Typography variant="body2"gutterBottom>
+                  Error Details: <IconButton color="error" size="small" onClick={()=>setErrorInfoShow(!errorInfoShow)}> <ExpandMoreIcon /></IconButton>
+                </Typography>
+                { errorDetail && errorDetail.length>0 && (
+                  <Typography variant="caption">ERR{errorDetail}</Typography>
+                )}
+                <Collapse in={errorInfoShow}>
+                  <Typography variant="caption">
+                    {errorInfo}
+                  </Typography>
+                </Collapse>
+              </Grid>
             </Grid>
-          </Grid>
-
-        </Box>
-
+          </Box>
+        </Drawer>
 
-      </Drawer>
       { !isLoading && bannerShow && (
           <div className="alert alert-info" role="alert">
             <h2>{bannerTitle}</h2>
diff --git a/src/src/Nav.js b/src/src/Nav.js
index 2da8dc46..2c9a8959 100644
--- a/src/src/Nav.js
+++ b/src/src/Nav.js
@@ -17,6 +17,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import LoadingButton from '@mui/lab/LoadingButton';
 
 import UploadsForm from "./components/uploads/createUploads";
 
@@ -443,12 +444,10 @@ export const Navigation = (props) => {
                     Edit Profile
                 </Button>
               </span>
-              <span className="logout">
-                <Button
-                onClick={() => props.logout()}
-                className="nav-link" >
+              <span className="logout" >
+                <LoadingButton loading={props.isLoggingOut} color='info' onClick={(e) => props.logout(e)}>
                   Log Out 
-                </Button>
+                </LoadingButton>
               </span>
               {}
             </div>
diff --git a/src/src/assets/App.css b/src/src/assets/App.css
index e2109b8e..301a3371 100644
--- a/src/src/assets/App.css
+++ b/src/src/assets/App.css
@@ -70,6 +70,10 @@
   margin-right: 2px;
 }
 
+.logout button div{
+  color: white;
+}
+
 .inline-icon {
   margin-right: 1em;
 }