Merge pull request #25 from DaleMcGrew/Dale_WCC_Feb8-2025

Fixed all cases of previous infinite loops. Still testing, but we are getting close to getting all prior features working reliably again. There are some new warnings ("styled-components: it looks like an unknown prop cellwidth") in the console log and I have explained what I found in WV-967 https://wevoteusa.atlassian.net/browse/WV-967 Refactored how data comes from react-query and stored using the "capture..." functions for the following pages: SystemSettings (three files), Tasks, TeamHome, Teams And drawers: EditQuestion, EditQuestionnaire, EditTaskDefinition, EditTaskGroup Built out TaskModel, created QuestionnaireModel.
wevote · Feb 10, 2025 · 221dc05 · 221dc05
2 parents 18e5e4d + 6cab4de
commit 221dc05
Show file tree

Hide file tree

Showing 33 changed files with 659 additions and 333 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -128,7 +128,7 @@
     "react-toastify": "^11.0.2",
     "react-truncate-markup": "^5.1.2",
     "rxjs": "^6.6.7",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.15",
     "topojson-client": "^3.1.0",
     "validator": "^13.12.0"
   },

diff --git a/src/js/components/Drawers/Drawers.jsx b/src/js/components/Drawers/Drawers.jsx
@@ -4,7 +4,7 @@ import AddPersonDrawer from './AddPersonDrawer';
 import AddTeamDrawer from './AddTeamDrawer';
 import EditPersonDrawer from './EditPersonDrawer';
 import EditQuestionDrawer from './EditQuestionDrawer';
-// import EditQuestionnaireDrawer from './EditQuestionnaireDrawer';
+import EditQuestionnaireDrawer from './EditQuestionnaireDrawer';
 import EditTaskDefinitionDrawer from './EditTaskDefinitionDrawer';
 import EditTaskGroupDrawer from './EditTaskGroupDrawer';
 import PersonProfileDrawer from './PersonProfileDrawer';
@@ -20,7 +20,7 @@ const Drawers = () => {
       <AddTeamDrawer />
       <EditPersonDrawer />
       <EditQuestionDrawer />
-      {/* TODO: Still causing infinite loop: <EditQuestionnaireDrawer /> */}
+      <EditQuestionnaireDrawer />
       <EditTaskDefinitionDrawer />
       <EditTaskGroupDrawer />
     </>

diff --git a/src/js/components/Drawers/EditQuestionDrawer.jsx b/src/js/components/Drawers/EditQuestionDrawer.jsx
@@ -8,18 +8,13 @@ const EditQuestionDrawer = () => {
   renderLog('EditQuestionDrawer');
   const { getAppContextValue } = useConnectAppContext();
 
-  const question = getAppContextValue('selectedQuestion');
-  const markup = question && question.id >= 0 ? <>Edit Question</> : <>Add Question</>;
-  const [headerTitleJsx] = useState(markup);
-  const [headerFixedJsx] = useState(<></>);
-
   return (
     <DrawerTemplateA
       drawerId="editQuestionDrawer"
       drawerOpenGlobalVariableName="editQuestionDrawerOpen"
+      headerFixedJsx={<></>}
+      headerTitleJsx={<>{getAppContextValue('editQuestionDrawerLabel')}</>}
       mainContentJsx={<EditQuestionDrawerMainContent />}
-      headerTitleJsx={headerTitleJsx}
-      headerFixedJsx={headerFixedJsx}
     />
   );
 };

diff --git a/src/js/components/Drawers/EditQuestionnaireDrawer.jsx b/src/js/components/Drawers/EditQuestionnaireDrawer.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 EditQuestionnaireDrawerMainContent from '../Questionnaire/EditQuestionnaireDrawerMainContent';
@@ -9,17 +9,13 @@ const EditQuestionnaireDrawer = () => {
   renderLog('EditQuestionnaireDrawer');
   const { getAppContextValue } = useConnectAppContext();
 
-  const selected = getAppContextValue('selectedQuestion');
-  const [headerTitleJsx] = useState(selected ? <>Edit Questionnaire</> : <>Add Questionnaire</>);
-  const [headerFixedJsx] = useState(<></>);
-
   return (
     <DrawerTemplateA
       drawerId="editQuestionnaireDrawer"
       drawerOpenGlobalVariableName="editQuestionnaireDrawerOpen"
+      headerFixedJsx={<></>}
+      headerTitleJsx={<>{getAppContextValue('editQuestionnaireDrawerLabel')}</>}
       mainContentJsx={<EditQuestionnaireDrawerMainContent />}
-      headerTitleJsx={headerTitleJsx}
-      headerFixedJsx={headerFixedJsx}
     />
   );
 };

diff --git a/src/js/components/Drawers/EditTaskDefinitionDrawer.jsx b/src/js/components/Drawers/EditTaskDefinitionDrawer.jsx
@@ -13,9 +13,9 @@ const EditTaskDefinitionDrawer = () => {
     <DrawerTemplateA
       drawerId="editTaskDefinitionDrawer"
       drawerOpenGlobalVariableName="editTaskDefinitionDrawerOpen"
-      mainContentJsx={<EditTaskDefinitionDrawerMainContent />}
-      headerTitleJsx={getAppContextValue('editTaskDefinitionDrawerLabel')}
       headerFixedJsx={<></>}
+      headerTitleJsx={<>{getAppContextValue('editTaskDefinitionDrawerLabel')}</>}
+      mainContentJsx={<EditTaskDefinitionDrawerMainContent />}
     />
   );
 };

diff --git a/src/js/components/Drawers/EditTaskGroupDrawer.jsx b/src/js/components/Drawers/EditTaskGroupDrawer.jsx
@@ -9,25 +9,13 @@ const EditTaskGroupDrawer = () => {
   renderLog('EditTaskGroupDrawer');  // Set LOG_RENDER_EVENTS to log all renders
   const { getAppContextValue } = useConnectAppContext();
 
-  const [headerTitleJsx, setHeaderTitleJsx] = useState(<></>);
-  const [headerFixedJsx] = useState(<></>);
-
-  useEffect(() => {
-    const taskGroup = getAppContextValue('editTaskGroupDrawerTaskGroup');
-    if (taskGroup) {
-      setHeaderTitleJsx(<>Add Task Grouping</>);
-    } else {
-      setHeaderTitleJsx(<>Edit Task Grouping</>);
-    }
-  }, []);
-
   return (
     <DrawerTemplateA
       drawerId="editTaskGroupDrawer"
       drawerOpenGlobalVariableName="editTaskGroupDrawerOpen"
+      headerFixedJsx={<></>}
+      headerTitleJsx={<>{getAppContextValue('editTaskGroupDrawerLabel')}</>}
       mainContentJsx={<EditTaskGroupDrawerMainContent />}
-      headerTitleJsx={headerTitleJsx}
-      headerFixedJsx={headerFixedJsx}
     />
   );
 };

diff --git a/src/js/components/Person/AddPersonDrawerMainContent.jsx b/src/js/components/Person/AddPersonDrawerMainContent.jsx
@@ -58,7 +58,6 @@ const AddPersonDrawerMainContent = () => {
     setMatchingCountText(matchingCount);
   };
 
-
   const searchFunction = () => {   // Now searches first and last name
     const currentValue = searchStringRef.current.value;
     if (currentValue.length === 0) {

diff --git a/src/js/components/Person/EditPersonForm.jsx b/src/js/components/Person/EditPersonForm.jsx
@@ -78,7 +78,7 @@ const EditPersonForm = ({ classes }) => {
           defaultValue={activePerson.firstNamePreferred || ''}
           id="firstNamePreferredToBeSaved"
           inputRef={firstNamePreferred}
-          label="Preferred FIRST Name (if different from legal)"
+          label="First (Preferred) if different from legal"
           margin="dense"
           name="firstNamePreferred"
           onChange={() => setSaveButtonActive(true)}

diff --git a/src/js/components/Person/PersonProfileDrawerMainContent.jsx b/src/js/components/Person/PersonProfileDrawerMainContent.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
+// import QuestionnaireResponsesList from '../Questionnaire/QuestionnaireResponsesList';
 import PersonProfile from './PersonProfile';
 
 

diff --git a/src/js/components/Person/PersonSummaryHeader.jsx b/src/js/components/Person/PersonSummaryHeader.jsx
@@ -9,7 +9,7 @@ const PersonSummaryHeader = () => {
   return (
     <OnePersonHeader>
       {/* Width (below) of this PersonHeaderCell comes from the combined widths of the first x columns in PersonMemberList */}
-      <PersonHeaderCell $largeFont $titleCell cellwidth={200}>
+      <PersonHeaderCell largefont="true" titlecell="true" cellwidth={200}>
         &nbsp;
       </PersonHeaderCell>
       <PersonHeaderCell cellwidth={300}>
@@ -32,18 +32,18 @@ const OnePersonHeader = styled('div')`
 `;
 
 const PersonHeaderCell = styled('div', {
-  shouldForwardProp: (prop) => !['largeFont', 'titleCell', 'cellwidth'].includes(prop),
-})(({ largeFont, titleCell, cellwidth }) => (`
+  shouldForwardProp: (prop) => !['largefont', 'titlecell', 'cellwidth'].includes(prop),
+})(({ largefont, titlecell, cellwidth }) => (`
   align-content: center;
-  ${(titleCell) ? '' : 'border-bottom: 1px solid #ccc;'}
-  ${(largeFont) ? 'font-size: 1.1em;' : 'font-size: .8em;'};
-  ${(titleCell) ? '' : 'font-weight: 550;'}
+  ${(titlecell) ? '' : 'border-bottom: 1px solid #ccc;'}
+  ${(largefont) ? 'font-size: 1.1em;' : 'font-size: .8em;'};
+  ${(titlecell) ? '' : 'font-weight: 550;'}
   height: 22px;
-  ${cellwidth ? `max-width: ${cellwidth}px;` : ''};
-  ${cellwidth ? `min-width: ${cellwidth}px;` : ''};
+  ${cellwidth ? `max-width: ${cellwidth}px;` : ''}
+  ${cellwidth ? `min-width: ${cellwidth}px;` : ''}
   overflow: hidden;
   white-space: nowrap;
-  ${cellwidth ? `width: ${cellwidth}px;` : ''};
+  ${cellwidth ? `width: ${cellwidth}px;` : ''}
 `));
 
 export default PersonSummaryHeader;
diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx
@@ -5,6 +5,10 @@ import styled from 'styled-components';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
+import {
+  getFullNamePreferredPerson,
+  // useGetFullNamePreferred,
+} from '../../models/PersonModel';
 import { useRemoveTeamMemberMutation } from '../../react-query/mutations';
 import { DeleteStyled, EditStyled } from '../Style/iconStyles';
 // import { useRemoveTeamMemberMutationDiverged } from '../../models/TeamModel';
@@ -49,7 +53,7 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
   return (
     <OnePersonWrapper key={`teamMember-${person.personId}`}>
       {rowNumberForDisplay && (
-        <PersonCell id={`index-personId-${person.personId}`} width={15}>
+        <PersonCell id={`index-personId-${person.personId}`} cellwidth={15}>
           <GraySpan>
             {rowNumberForDisplay}
           </GraySpan>
@@ -63,30 +67,43 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
           textDecoration: 'underline',
           color: DesignTokenColors.primary500,
         }}
-        width={200}
+        // cellwidth="200"
+        cellwidth={200}
       >
-        {`${person.firstName} ${person.lastName}`}
-        {/* useGetFullNamePreferred(person.personId) 2/6/25 currently if you save a first name preferred, it shows up here, but will not be searchable on add team member If you */}
+        {/* {`${person.firstName} ${person.lastName}`} */}
+        {getFullNamePreferredPerson(person)} {/* 2/6/25 currently if you save a first name preferred, it shows up here, but will not be searchable on add team member If you */}
       </PersonCell>
-      <PersonCell id={`location-personId-${person.personId}`} $smallFont width={300}>
+      <PersonCell
+        id={`location-personId-${person.personId}`}
+        smallfont="true" // $smallfont gets rid of error message, but doesn't get passed to PersonCell styled div
+        // cellwidth="300"
+        cellwidth={300}
+      >
         {person.location}
       </PersonCell>
-      <PersonCell id={`jobTitle-personId-${person.personId}`} $smallestFont width={225}>
+      <PersonCell
+        id={`jobTitle-personId-${person.personId}`}
+        smallestfont="true" // $smallestfont gets rid of error message, but doesn't get passed to PersonCell styled div
+        // cellwidth="225"
+        cellwidth={225}
+      >
         {person.jobTitle}
       </PersonCell>
       {hasEditRights ? (
         <PersonCell
           id={`editPerson-personId-${person.personId}`}
           onClick={() => editPersonClick(hasEditRights)}
           style={{ cursor: 'pointer' }}
-          width={20}
+          // cellwidth="20"
+          cellwidth={20}
         >
           <EditStyled />
         </PersonCell>
       ) : (
         <PersonCell
           id={`editPerson-personId-${person.personId}`}
-          width={20}
+          // cellwidth="20"
+          cellwidth={20}
         >
           &nbsp;
         </PersonCell>
@@ -98,15 +115,17 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
               id={`removeMember-personId-${person.personId}`}
               onClick={() => removeTeamMemberClick(person)}
               style={{ cursor: 'pointer' }}
-              width={20}
+              // cellwidth="20"
+              cellwidth={20}
             >
               <DeleteStyled />
             </PersonCell>
           ) : (
             <PersonCell
               id={`removeMember-personId-${person.personId}`}
               onClick={() => removeTeamMemberClick(person)}
-              width={20}
+              // cellwidth="20"
+              cellwidth={20}
             >
               &nbsp;
             </PersonCell>
@@ -145,18 +164,18 @@ const OnePersonWrapper = styled('div')`
 `;
 
 const PersonCell = styled('div', {
-  shouldForwardProp: (prop) => !['smallFont', 'smallestFont', 'width'].includes(prop),
-})(({ smallFont, smallestFont, width }) => (`
+  shouldForwardProp: (prop) => !['smallfont', 'smallestfont', 'cellwidth'].includes(prop),
+})(({ smallfont, smallestfont, cellwidth }) => (`
   align-content: center;
   border-bottom: 1px solid #ccc;
-  ${(smallFont && !smallestFont) ? 'font-size: .9em;' : ''};
-  ${(smallestFont && !smallFont) ? 'font-size: .8em;' : ''};
+  ${(smallfont && !smallestfont) ? 'font-size: .9em;' : ''}
+  ${(smallestfont && !smallfont) ? 'font-size: .8em;' : ''}
   height: 22px;
-  ${width ? `max-width: ${width}px;` : ''};
-  ${width ? `min-width: ${width}px;` : ''};
+  ${cellwidth ? `max-width: ${cellwidth}px;` : ''}
+  ${cellwidth ? `min-width: ${cellwidth}px;` : ''}
   overflow: hidden;
   white-space: nowrap;
-  ${width ? `width: ${width}px;` : ''};
+  ${cellwidth ? `width: ${cellwidth}px;` : ''}
 `));
 
 export default withStyles(styles)(PersonSummaryRow);
diff --git a/src/js/components/Questionnaire/EditQuestionForm.jsx b/src/js/components/Questionnaire/EditQuestionForm.jsx
@@ -31,7 +31,7 @@ const PERSON_FIELDS_ACCEPTED = [
 
 const EditQuestionForm = ({ classes }) => {
   renderLog('EditQuestionForm');
-  const {  getAppContextValue } = useConnectAppContext();
+  const { getAppContextValue, setAppContextValue } = useConnectAppContext();
   const { mutate } = useQuestionSaveMutation();
 
   const [question] = useState(getAppContextValue('selectedQuestion'));
@@ -90,20 +90,26 @@ const EditQuestionForm = ({ classes }) => {
   };
 
   const saveQuestion = () => {
-    const requestParams = makeRequestParams({
+    const plainParams = {
       questionId: question ? question.id : '-1',
       questionnaireId: questionnaire ? questionnaire.id : 'Need to navigate from earlier page where q is put in AppContext',   // hack
-    }, {
+    };
+    const params = {
       answerType: radioValue,
       // fieldMappingRule: fieldMappingRuleFldRef.current.checked,
       questionInstructions: questionInstructionsFldRef.current.value,
       questionText: questionTextFldRef.current.value,
       requireAnswer: (requireAnswerFldRef.current.value === 'on'),
       statusActive: (statusActiveFldRef.current.value === 'on'),
-    });
+    };
+    const requestParams = makeRequestParams(plainParams, params);
     mutate(requestParams);
     console.log('saveQuestionnaire requestParams:', requestParams);
     setSaveButtonActive(false);
+    setAppContextValue('editQuestionDrawerOpen', false);
+    setAppContextValue('selectedQuestion', undefined);
+    setAppContextValue('selectedQuestionnaire', undefined);
+    setAppContextValue('editQuestionDrawerLabel', '');
   };
 
   const updateSaveButton = () => {