Merge pull request #28 from SailingSteve/steveStaffClientFeb14-4pm

Sign in via email/password with email verification roughly working.
wevote · Feb 15, 2025 · b568311 · b568311
2 parents 24a5fe6 + aa6578d
commit b568311
Show file tree

Hide file tree

Showing 19 changed files with 754 additions and 288 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -72,18 +72,19 @@ function App () {
                   <Drawers />
                   <Routes>
                     <Route path="/answers/:questionnaireId/:personId" element={<QuestionnaireAnswers />} />
+                    <Route path="/login" element={<Login />} />
                     <Route element={<PrivateRoute />}>
                       <Route path="/faq" element={<FAQ />} />
+                      <Route path="/login" element={<Login />} />
+                      <Route path="/q/:questionnaireId/:personId" element={<AnswerQuestions />} />
+                      <Route path="/questionnaire/:questionnaireId" element={<QuestionnaireQuestionList />} />
+                      <Route path="/system-settings" element={<SystemSettings />} />
+                      <Route path="/tasks" element={<Tasks />} />
+                      <Route path="/task-group/:taskGroupId" element={<TaskGroup />} />
+                      <Route path="/teams" element={<Teams />} />
+                      <Route path="/team-home/:teamId" element={<TeamHome />} />
+                      <Route path="/" element={<Teams />} />
                     </Route>
-                    <Route path="/login" element={<Login />} />
-                    <Route path="/q/:questionnaireId/:personId" element={<AnswerQuestions />} />
-                    <Route path="/questionnaire/:questionnaireId" element={<QuestionnaireQuestionList />} />
-                    <Route path="/system-settings" element={<SystemSettings />} />
-                    <Route path="/tasks" element={<Tasks />} />
-                    <Route path="/task-group/:taskGroupId" element={<TaskGroup />} />
-                    <Route path="/teams" element={<Teams />} />
-                    <Route path="/team-home/:teamId" element={<TeamHome />} />
-                    <Route path="/" element={<Teams />} />
                     <Route path="*" element={<PageNotFound />} />
                   </Routes>
                   {/* <Footer /> has problems */}

diff --git a/src/js/auth.js b/src/js/auth.js
diff --git a/src/js/common/dispatcher/Dispatcher.js b/src/js/common/dispatcher/Dispatcher.js
diff --git a/src/js/common/utils/apiCalming.js b/src/js/common/utils/apiCalming.js
@@ -1,39 +1,39 @@
-import { httpLog } from './logging';
-
-/*
-If we were building the app from scratch, every API query would be conditioned by logic
-to make certain the query is necessary.
-
-Important: adding new queries "just to be safe" without proactively determining that they are necessary
-will damage the hard earned performance of the WebApp.
-
-This function stops identical queries from being fired within the specified duration in milliseconds
-*/
-export default function apiCalming (name, duration = 1000) {
-  const { apiCalmingDict } = window;
-  if (!apiCalmingDict) {
-    window.apiCalmingDict = {};
-  }
-  if (!window.apiCalmingDict[name]) {
-    window.apiCalmingDict[name] =  {
-      duration,
-      timeStamp: Date.now(),
-    };
-    httpLog(`== apiCalming for ${name}, make the API call: true, no dict entry yet for this API`);
-    return true;
-  }
-
-  const entry =  window.apiCalmingDict[name];
-  if (entry.timeStamp + duration < Date.now()) {
-    window.apiCalmingDict[name] = {
-      duration,
-      timeStamp: Date.now(),
-    };
-    httpLog(`== apiCalming for ${name}, make the API call: true, duration: ${duration}, previous dict entry has expired`);
-    return true;
-  }
-  const apiCalmingMessageFalse = `== apiCalming for ${name}, make the API call: false, duration: ${duration}, previous calming entry still in force`;
-  // console.log(apiCalmingMessageFalse);
-  httpLog(apiCalmingMessageFalse);
-  return false;
-}
+// import { httpLog } from './logging';
+//
+// /*
+// If we were building the app from scratch, every API query would be conditioned by logic
+// to make certain the query is necessary.
+//
+// Important: adding new queries "just to be safe" without proactively determining that they are necessary
+// will damage the hard earned performance of the WebApp.
+//
+// This function stops identical queries from being fired within the specified duration in milliseconds
+// */
+// export default function apiCalming (name, duration = 1000) {
+//   const { apiCalmingDict } = window;
+//   if (!apiCalmingDict) {
+//     window.apiCalmingDict = {};
+//   }
+//   if (!window.apiCalmingDict[name]) {
+//     window.apiCalmingDict[name] =  {
+//       duration,
+//       timeStamp: Date.now(),
+//     };
+//     httpLog(`== apiCalming for ${name}, make the API call: true, no dict entry yet for this API`);
+//     return true;
+//   }
+//
+//   const entry =  window.apiCalmingDict[name];
+//   if (entry.timeStamp + duration < Date.now()) {
+//     window.apiCalmingDict[name] = {
+//       duration,
+//       timeStamp: Date.now(),
+//     };
+//     httpLog(`== apiCalming for ${name}, make the API call: true, duration: ${duration}, previous dict entry has expired`);
+//     return true;
+//   }
+//   const apiCalmingMessageFalse = `== apiCalming for ${name}, make the API call: false, duration: ${duration}, previous calming entry still in force`;
+//   // console.log(apiCalmingMessageFalse);
+//   httpLog(apiCalmingMessageFalse);
+//   return false;
+// }
diff --git a/src/js/components/Drawers/EditQuestionDrawer.jsx b/src/js/components/Drawers/EditQuestionDrawer.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import EditQuestionDrawerMainContent from '../Questionnaire/EditQuestionDrawerMainContent';

diff --git a/src/js/components/Drawers/EditTaskGroupDrawer.jsx b/src/js/components/Drawers/EditTaskGroupDrawer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import EditTaskGroupDrawerMainContent from '../Task/EditTaskGroupDrawerMainContent';

diff --git a/src/js/components/Navigation/HeaderBar.jsx b/src/js/components/Navigation/HeaderBar.jsx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@mui/material';
+import { Button, Tab, Tabs } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -7,28 +7,41 @@ import standardBoxShadow from '../../common/components/Style/standardBoxShadow';
 import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';
 import { normalizedHrefPage } from '../../common/utils/hrefUtils';
 import { renderLog } from '../../common/utils/logging';
+import { useConnectAppContext } from '../../contexts/ConnectAppContext';
+import { useLogoutMutation } from '../../react-query/mutations';
+import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery';
 import { displayTopMenuShadow } from '../../utils/applicationUtils';
 import { TopOfPageHeader, TopRowOneLeftContainer, TopRowOneMiddleContainer, TopRowOneRightContainer, TopRowTwoLeftContainer } from '../Style/pageLayoutStyles';
 import HeaderBarLogo from './HeaderBarLogo';
-// import { handleResize } from '../../common/utils/isMobileScreenSize';
 
 
-const HeaderBar = () => {
-  renderLog('HeaderBar');  // Set LOG_RENDER_EVENTS to log all renders
-  // eslint-disable-next-line no-unused-vars
-  const [scrolledDown, setScrolledDown] = useState(false);
-  const [tabsValue, setTabsValue] = useState('1');
-  // eslint-disable-next-line no-unused-vars
-  const [showTabs, setShowTabs] = useState(true);
+// eslint-disable-next-line no-unused-vars
+const HeaderBar = (classes) => {
+  renderLog('HeaderBar');
   const navigate = useNavigate();
+  const { setAppContextValue, getAppContextValue } = useConnectAppContext();
+  const { mutate: mutateLogout } = useLogoutMutation();
+
+  const [scrolledDown] = useState(false);
+  const [tabsValue, setTabsValue] = useState('1');
+  const [showTabs] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
+  const isAuth = getAppContextValue('isAuthenticated');
+  useEffect(() => {
+    if (isAuth !== null) {
+      console.log('----------- isAuthenticated changed =', isAuth);
+      setIsAuthenticated(isAuth);
+    }
+  }, [isAuth]);
 
-  // This does not do anything
-  // const handleResizeLocal = () => {
-  //   if (handleResize('HeaderBar')) {
-  //     // this.setState({});
-  //   }
-  // };
+  const logoutApi = async () => {
+    const data = await weConnectQueryFn('logout', {}, METHOD.POST);
+    console.log(`/logout response in HeaderBar -- status: '${'status'}',  data: ${JSON.stringify(data)}`);
+    setAppContextValue('isAuthenticated', false);
+    navigate('/login');
+    mutateLogout();
+  };
 
   const initializeTabValue = () => {
     // console.log('initializeTabValue normalizedHrefPage():', normalizedHrefPage());
@@ -60,7 +73,6 @@ const HeaderBar = () => {
     // setTabsValue(newValue);
     switch (newValue) {
       case '1':
-        // window.history.pushState({}, '', '/tasks'); Only changes the url, does not change the page render
         navigate('/tasks');
         break;
       case '2':
@@ -80,23 +92,6 @@ const HeaderBar = () => {
     initializeTabValue();
   }, []);
 
-  // This does not look like it does anything, except always return true
-  // const showTabs = () => {
-  //   // console.log('showTabs normalizedHrefPage():', normalizedHrefPage());
-  //   switch (normalizedHrefPage()) {
-  //     case 'q':
-  //       return false;
-  //     default:
-  //       break;
-  //   }
-  //   return true;
-  // };
-
-  // const onAppObservableStoreChange = () => {
-  //   // console.log('------ HeaderBar, onAppObservableStoreChange received: ', msg);
-  //   setScrolledDown(false);
-  // };
-  // console.log('tabs value ==== ', tabsValue);
   return (
     <HeaderBarWrapper
       $hasNotch={hasIPhoneNotch()}
@@ -117,7 +112,14 @@ const HeaderBar = () => {
           )}
         </TopRowOneMiddleContainer>
         <TopRowOneRightContainer className="u-cursor--pointer">
-          &nbsp;
+          <Button
+            variant="outlined"
+            sx={{ border: 'none' }}
+            id="signInButton"
+            onClick={() => (isAuthenticated ? logoutApi() : navigate('/login'))}
+          >
+            {isAuthenticated ? 'Sign Out' : 'Sign In'}
+          </Button>
         </TopRowOneRightContainer>
         <TopRowTwoLeftContainer>
          &nbsp;
@@ -137,6 +139,24 @@ const styles = (theme) => ({
       width: '100%',
     },
   },
+  navButtonOutlined: {
+    height: 32,
+    borderRadius: 32,
+    color: 'white',
+    backgroundColor: 'yellow',
+    border: '1px solid white',
+    marginBottom: '1em',
+    fontWeight: '300',
+    width: '47%',
+    fontSize: 12,
+    padding: '5px 0',
+    marginTop: 8,
+  },
+  navClose: {
+    position: 'fixed',
+    right: 16,
+    cursor: 'pointer',
+  },
 });
 
 const HeaderBarWrapper = styled('div', {
@@ -147,35 +167,5 @@ const HeaderBarWrapper = styled('div', {
   border-bottom: ${(!scrolledDown || !hasSubmenu) ? '' : '1px solid #aaa'};
 `));
 
-// const TabsStyled = styled(Tabs)`
-// `;
 
 export default withStyles(styles)(HeaderBar);
-
-
-// {/* <TabsStyled */}
-// {/*   value={tabsValue} */}
-// {/*   indicatorColor="primary" */}
-// {/* > */}
-// {/*         <TabWithPushHistory */}
-// {/*           id="headerTabDashboard" */}
-// {/*           label="Dashboard" */}
-// {/*           change={handleTabChange} */}
-// {/*           to="/tasks" */}
-// {/*           value={0} */}
-// {/*         /> */}
-// {/*         <TabWithPushHistory */}
-// {/*           id="headerTabTeams" */}
-// {/*           label="Teams" */}
-// {/*           change={handleTabChange} */}
-// {/*           to="/teams" */}
-// {/*           value={1} */}
-// {/*         /> */}
-// {/*         <TabWithPushHistory */}
-// {/*           id="headerTabSettings" */}
-// {/*           label="Settings" */}
-// {/*           change={handleTabChange} */}
-// {/*           to="/system-settings" */}
-// {/*           value={2} */}
-// {/*         /> */}
-// </TabsStyled>
diff --git a/src/js/components/Person/EditPersonDrawerMainContent.jsx b/src/js/components/Person/EditPersonDrawerMainContent.jsx
@@ -14,6 +14,7 @@ const EditPersonDrawerMainContent = () => {
 
   useEffect(() => {  // Replaces onAppObservableStoreChange and will be called whenever the context value changes
     // console.log('EditPersonDrawerMainContent: Context value changed:', true);
+    // 2/14/25 warning  React Hook useEffect contains a call to 'setTeamId'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [getAppContextValue] as a second argument to the useEffect Hook  react-hooks/exhaustive-deps
     const teamIdTemp = getAppContextValue('editPersonDrawerTeamId');
     setTeamId(teamIdTemp);
   });