Merge pull request #29 from DaleMcGrew/Dale-WCC-Feb15-2025

Got setShowHeaderFooter working, so we can turn off header (or parts of the header) for certain pages. Turned header logo back on. Reactivated team search. Moved access to AnswerQuestions outside of sign in. Made it possible to click header tabs to get back to section pages (e.g. SystemSettings)
wevote · Feb 15, 2025 · 7fb604f · 7fb604f
2 parents b568311 + b95c2db
commit 7fb604f
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 54 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -34,7 +34,7 @@ const Teams = React.lazy(() => import(/* webpackChunkName: 'Teams' */ './js/page
 
 function App () {
   renderLog('App');
-  const [hideHeader] = useState(false);
+  const [hideHeader, setHideHeader] = useState(false);
   const [showDevtools] = useState(webAppConfig.ENABLE_REACT_QUERY_TOOLS !== undefined ? webAppConfig.ENABLE_REACT_QUERY_TOOLS : true);
 
 
@@ -60,6 +60,11 @@ function App () {
     };
   }, []);
 
+  const setShowHeaderFooter = (showHeaderFooter) => {
+    console.log('--------- setShowHeaderFooter: ', showHeaderFooter);
+    setHideHeader(!showHeaderFooter);
+  };
+
   return (
     <>
       <StyledEngineProvider injectFirst>
@@ -73,10 +78,10 @@ function App () {
                   <Routes>
                     <Route path="/answers/:questionnaireId/:personId" element={<QuestionnaireAnswers />} />
                     <Route path="/login" element={<Login />} />
+                    <Route path="/q/:questionnaireId/:personId" element={<AnswerQuestions setShowHeaderFooter={setShowHeaderFooter} />} />
                     <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 />} />

diff --git a/src/js/components/Navigation/Header.jsx b/src/js/components/Navigation/Header.jsx
@@ -16,7 +16,7 @@ const Header = ({ hideHeader }) => {
       <IPhoneSpacer />
       <HeadroomWrapper id="hw1">
         <div className={pageHeaderClasses} style={cordovaTopHeaderTopMargin()} id="header-container">
-          <HeaderBar style={hideHeader ? { display: 'none' } : { display: 'unset' }} />
+          <HeaderBar hideTabs={hideHeader} />
         </div>
       </HeadroomWrapper>
     </div>

diff --git a/src/js/components/Navigation/HeaderBar.jsx b/src/js/components/Navigation/HeaderBar.jsx
@@ -1,5 +1,6 @@
 import { Button, Tab, Tabs } from '@mui/material';
 import { withStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 import styled from 'styled-components';
@@ -16,15 +17,15 @@ import HeaderBarLogo from './HeaderBarLogo';
 
 
 // eslint-disable-next-line no-unused-vars
-const HeaderBar = (classes) => {
+const HeaderBar = ({ hideTabs }) => {
   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 [showTabs, setShowTabs] = useState(true);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   const isAuth = getAppContextValue('isAuthenticated');
@@ -71,23 +72,50 @@ const HeaderBar = (classes) => {
   const handleTabChange = (event, newValue) => {
     // console.log(`handleTabChange newValue: ${newValue}`);
     // setTabsValue(newValue);
-    switch (newValue) {
-      case '1':
-        navigate('/tasks');
-        break;
-      case '2':
-        navigate('/teams');
-        break;
-      case '3':
-        navigate('/system-settings');
-        break;
-      default:
-        navigate('/tasks');
-        break;
+    if (newValue) {
+      switch (newValue) {
+        case '1':
+          navigate('/tasks');
+          break;
+        case '2':
+          navigate('/teams');
+          break;
+        case '3':
+          navigate('/system-settings');
+          break;
+        default:
+          navigate('/tasks');
+          break;
+      }
+      initializeTabValue();
+    }
+  };
+
+  const handleTabChangeClick = (newValue) => {
+    // console.log(`handleTabChangeClick newValue: ${newValue}`);
+    // setTabsValue(newValue);
+    if (newValue) {
+      switch (newValue) {
+        case '1':
+          navigate('/tasks');
+          break;
+        case '2':
+          navigate('/teams');
+          break;
+        case '3':
+          navigate('/system-settings');
+          break;
+        default:
+          navigate('/tasks');
+          break;
+      }
     }
-    initializeTabValue();
   };
 
+  useEffect(() => {
+    setShowTabs(!hideTabs);
+  }, [hideTabs]);
+
   useEffect(() => {
     initializeTabValue();
   }, []);
@@ -104,10 +132,14 @@ const HeaderBar = (classes) => {
         </TopRowOneLeftContainer>
         <TopRowOneMiddleContainer>
           {showTabs && (
-            <Tabs value={tabsValue} onChange={handleTabChange} aria-label="Tabs selector">
-              <Tab value="1" label="Dashboard" />
-              <Tab value="2" label="Teams" />
-              <Tab value="3" label="Settings" />
+            <Tabs
+              value={tabsValue}
+              onChange={handleTabChange}
+              aria-label="Tabs selector"
+            >
+              <Tab value="1" label="Dashboard" onClick={() => handleTabChangeClick('1')} />
+              <Tab value="2" label="Teams" onClick={() => handleTabChangeClick('2')} />
+              <Tab value="3" label="Settings" onClick={() => handleTabChangeClick('3')} />
             </Tabs>
           )}
         </TopRowOneMiddleContainer>
@@ -128,6 +160,9 @@ const HeaderBar = (classes) => {
     </HeaderBarWrapper>
   );
 };
+HeaderBar.propTypes = {
+  hideTabs: PropTypes.bool,
+};
 
 const styles = (theme) => ({
   ballotButtonIconRoot: {

diff --git a/src/js/components/Navigation/HeaderBarLogo.jsx b/src/js/components/Navigation/HeaderBarLogo.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-// import { Link } from 'react-router';
+import { Link } from 'react-router';
 import styled from 'styled-components';
 import normalizedImagePath from '../../common/utils/normalizedImagePath';
 import HeaderLogoImage from './HeaderLogoImage';
@@ -15,11 +15,9 @@ const HeaderBarLogo = ({ light, linkOff }) => (
       {linkOff ? (
         <HeaderLogoImage src={light ? normalizedImagePath(logoLight) : normalizedImagePath(logoDark)} />
       ) : (
-        // Hack 1/14/25
-        <></>
-        // <Link to="/" id="logoHeaderBar">
-        //   <HeaderLogoImage src={light ? normalizedImagePath(logoLight) : normalizedImagePath(logoDark)} />
-        // </Link>
+        <Link to="/" id="logoHeaderBar">
+          <HeaderLogoImage src={light ? normalizedImagePath(logoLight) : normalizedImagePath(logoDark)} />
+        </Link>
       )}
     </WeVoteLogoWrapper>
   </HeaderBarLogoWrapper>

diff --git a/src/js/components/Team/AddTeamDrawerMainContent.jsx b/src/js/components/Team/AddTeamDrawerMainContent.jsx
@@ -5,44 +5,63 @@ import styled from 'styled-components';
 import SearchBar2024 from '../../common/components/Search/SearchBar2024';
 import { renderLog } from '../../common/utils/logging';
 import AddTeamForm from './AddTeamForm';
+import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 
 
 // eslint-disable-next-line no-unused-vars
 const AddTeamDrawerMainContent = ({ classes }) => {  //  classes, teamId
   renderLog('AddTeamDrawerMainContent');  // Set LOG_RENDER_EVENTS to log all renders
-  // eslint-disable-next-line no-unused-vars
-  const [personSearchResultsList, setPersonSearchResultsList] = useState([]);
+  const { apiDataCache } = useConnectAppContext();
+  const { allTeamsCache } = apiDataCache;
 
-  // TODO: 12/6/25, temporarily removed to simplify debug
-  // const searchFunction = (incomingSearchText) => {
-  //   let searchingJustStarted = false;
-  //   if (searchText.length === 0 && incomingSearchText.length > 0) {
-  //     searchingJustStarted = true;
-  //   }
-  //   const isSearching = (incomingSearchText && incomingSearchText.length > 0);
-  //   const teamIdTemp = AppObservableStore.getGlobalVariableState('addPersonDrawerTeamId');
-  //   if (apiCalming(`addPersonToTeamSearch-${teamIdTemp}-${incomingSearchText}`, 60000)) { // Only once per 60 seconds
-  //     PersonActions.capturePersonListRetrieveData(incomingSearchText);
-  //   }
-  //   setSearchText(incomingSearchText);
-  // };
+  const [allTeamsList] = useState(Object.values(allTeamsCache));
+  const [teamSearchResultsList, setTeamSearchResultsList] = useState([]);
+
+  const searchFunction = (incomingSearchText) => {
+    // console.log('AddTeamDrawerMainContent searchFunction incomingSearchText: ', incomingSearchText);
+    const isSearching = (incomingSearchText && incomingSearchText.length > 0);
+    if (isSearching) {
+      const isMatch = (team) => {
+        if (team) {
+          if (team.teamName && team.teamName.toLowerCase().includes(incomingSearchText.toLowerCase())) return true;
+          if (team.description && team.description.toLowerCase().includes(incomingSearchText.toLowerCase())) return true;
+        }
+        return false;
+      };
+      const matchingTeams = allTeamsList ? allTeamsList.filter((team) => isMatch(team)) : [];
+      if (matchingTeams && matchingTeams.length > 0) {
+        setTeamSearchResultsList(matchingTeams);
+      } else {
+        setTeamSearchResultsList([]);
+      }
+    } else {
+      setTeamSearchResultsList([]);
+    }
+  };
 
   const clearFunction = () => {
-    setPersonSearchResultsList([]);
-    // TODO setSearchText('');
+    setTeamSearchResultsList([]);
   };
 
   return (
     <AddTeamDrawerMainContentWrapper>
       <SearchBarWrapper>
         <SearchBar2024
-          placeholder="Search by team name"
-          // searchFunction={searchFunction}
-          searchFunction={() => console.log('searchFunction in AddTeamDrawerMainContent')}
+          placeholder="Search existing teams"
+          searchFunction={searchFunction}
           clearFunction={clearFunction}
           searchUpdateDelayTime={250}
         />
       </SearchBarWrapper>
+      {teamSearchResultsList.length > 0 && (
+        <>
+          {teamSearchResultsList.map((team) => (
+            <TeamItem key={`teamResult-${team.id}`}>
+              {team.teamName}
+            </TeamItem>  // eslint-disable-line react/no-array-index-key
+          ))}
+        </>
+      )}
       <AddTeamWrapper>
         <AddTeamForm />
       </AddTeamWrapper>
@@ -67,4 +86,7 @@ const SearchBarWrapper = styled('div')`
   margin-bottom: 16px;
 `;
 
+const TeamItem = styled('div')`
+`;
+
 export default withStyles(styles)(AddTeamDrawerMainContent);
diff --git a/src/js/pages/AnswerQuestions.jsx b/src/js/pages/AnswerQuestions.jsx
@@ -25,7 +25,7 @@ import {
 import convertToInteger from '../common/utils/convertToInteger';
 
 
-const AnswerQuestions = ({ classes }) => {
+const AnswerQuestions = ({ classes, setShowHeaderFooter }) => {
   renderLog('AnswerQuestions');  // Set LOG_RENDER_EVENTS to log all renders
   const { apiDataCache } = useConnectAppContext();
   const { allAnswersCache, allPeopleCache, allQuestionnairesCache, allQuestionsCache } = apiDataCache;
@@ -89,6 +89,13 @@ const AnswerQuestions = ({ classes }) => {
     }
   }, [allQuestionsCache, questionnaireId]);
 
+  useEffect(() => {
+    setShowHeaderFooter(false);
+    return () => {
+      setShowHeaderFooter(true);
+    };
+  }, []);
+
   const allRequiredFieldsHaveValue = (inputValuesRevised) => {
     let requiredValueMissing = false;
     questionList.forEach((question) => {
@@ -293,6 +300,7 @@ const AnswerQuestions = ({ classes }) => {
 };
 AnswerQuestions.propTypes = {
   classes: PropTypes.object.isRequired,
+  setShowHeaderFooter: PropTypes.func.isRequired,
 };
 
 const styles = (theme) => ({

diff --git a/src/js/pages/Login.jsx b/src/js/pages/Login.jsx
@@ -286,7 +286,7 @@ const Login = ({ classes }) => {
             >
               Sign In
             </Button>
-            <A style={{ display: showCreateStuff ? 'none' : 'flex'  }}>Forgot your password?</A>
+            <AStyled style={{ display: showCreateStuff ? 'none' : 'flex'  }}>Forgot your password?</AStyled>
           </span>
           <div style={{ paddingTop: '35px' }} />
           <Button
@@ -344,7 +344,7 @@ const styles = (theme) => ({
   },
 });
 
-const A = styled('a')`
+const AStyled = styled('a')`
   font-weight: 400;
   color: rgb(13, 110, 253);
   text-decoration-color: rgb(13, 110, 253);
@@ -353,7 +353,7 @@ const A = styled('a')`
 `;
 
 const DateDisplay = styled('div')`
-  padding: 50px 0 50px 0; 
+  padding: 50px 0 50px 0;
 `;
 
 export default withStyles(styles)(Login);
diff --git a/src/js/pages/Teams.jsx b/src/js/pages/Teams.jsx
@@ -45,7 +45,7 @@ const Teams = ({ classes, match }) => {
   // Allows us to organize incoming data independent of the specific API, potentially from multiple API or sources
   useEffect(() => {
     if (teamListRetrieveResults) {
-      // TODO Consider making this usecaptureTeamListRetrieveData so we don't have to pass in the apiDataCache or dispatch
+      // TODO Consider making this useCaptureTeamListRetrieveData so we don't have to pass in the apiDataCache or dispatch
       captureTeamListRetrieveData(teamListRetrieveResults, apiDataCache, dispatch);
     }
   }, [teamListRetrieveResults, apiDataCache, dispatch]);