diff --git a/package-lock.json b/package-lock.json index e958c04..11a8da5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,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" }, @@ -18873,17 +18873,16 @@ "license": "MIT" }, "node_modules/styled-components": { - "version": "6.1.14", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.14.tgz", - "integrity": "sha512-KtfwhU5jw7UoxdM0g6XU9VZQFV4do+KrM8idiVCH5h4v49W+3p3yMe0icYwJgZQZepa5DbH04Qv8P0/RdcLcgg==", - "license": "MIT", + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.15.tgz", + "integrity": "sha512-PpOTEztW87Ua2xbmLa7yssjNyUF9vE7wdldRfn1I2E6RTkqknkBYpj771OxM/xrvRGinLy2oysa7GOd7NcZZIA==", "dependencies": { "@emotion/is-prop-valid": "1.2.2", "@emotion/unitless": "0.8.1", "@types/stylis": "4.2.5", "css-to-react-native": "3.2.0", "csstype": "3.1.3", - "postcss": "8.4.38", + "postcss": "8.4.49", "shallowequal": "1.1.0", "stylis": "4.3.2", "tslib": "2.6.2" @@ -18901,9 +18900,9 @@ } }, "node_modules/styled-components/node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "funding": [ { "type": "opencollective", @@ -18918,11 +18917,10 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" diff --git a/package.json b/package.json index 9c6c31e..f31c9b6 100644 --- 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 index 807945e..4773d62 100644 --- 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 = () => { - {/* TODO: Still causing infinite loop: */} + diff --git a/src/js/components/Drawers/EditQuestionDrawer.jsx b/src/js/components/Drawers/EditQuestionDrawer.jsx index fcbb24b..b4cc990 100644 --- 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 ( } + headerTitleJsx={<>{getAppContextValue('editQuestionDrawerLabel')}} mainContentJsx={} - headerTitleJsx={headerTitleJsx} - headerFixedJsx={headerFixedJsx} /> ); }; diff --git a/src/js/components/Drawers/EditQuestionnaireDrawer.jsx b/src/js/components/Drawers/EditQuestionnaireDrawer.jsx index 44b47f1..efa8599 100644 --- 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 ( } + headerTitleJsx={<>{getAppContextValue('editQuestionnaireDrawerLabel')}} mainContentJsx={} - headerTitleJsx={headerTitleJsx} - headerFixedJsx={headerFixedJsx} /> ); }; diff --git a/src/js/components/Drawers/EditTaskDefinitionDrawer.jsx b/src/js/components/Drawers/EditTaskDefinitionDrawer.jsx index 2077044..669396b 100644 --- a/src/js/components/Drawers/EditTaskDefinitionDrawer.jsx +++ b/src/js/components/Drawers/EditTaskDefinitionDrawer.jsx @@ -13,9 +13,9 @@ const EditTaskDefinitionDrawer = () => { } - headerTitleJsx={getAppContextValue('editTaskDefinitionDrawerLabel')} headerFixedJsx={<>} + headerTitleJsx={<>{getAppContextValue('editTaskDefinitionDrawerLabel')}} + mainContentJsx={} /> ); }; diff --git a/src/js/components/Drawers/EditTaskGroupDrawer.jsx b/src/js/components/Drawers/EditTaskGroupDrawer.jsx index ae34f39..6a6cf5d 100644 --- 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 ( } + headerTitleJsx={<>{getAppContextValue('editTaskGroupDrawerLabel')}} mainContentJsx={} - headerTitleJsx={headerTitleJsx} - headerFixedJsx={headerFixedJsx} /> ); }; diff --git a/src/js/components/Person/AddPersonDrawerMainContent.jsx b/src/js/components/Person/AddPersonDrawerMainContent.jsx index 42219fd..75d0bad 100644 --- 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 index 37131a8..9cad859 100644 --- 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 index 4ce1b01..cf9b45e 100644 --- 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 index de1dd37..55d4d53 100644 --- a/src/js/components/Person/PersonSummaryHeader.jsx +++ b/src/js/components/Person/PersonSummaryHeader.jsx @@ -9,7 +9,7 @@ const PersonSummaryHeader = () => { return ( {/* Width (below) of this PersonHeaderCell comes from the combined widths of the first x columns in PersonMemberList */} - +   @@ -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 index 305fddc..917632c 100644 --- 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 ( {rowNumberForDisplay && ( - + {rowNumberForDisplay} @@ -63,15 +67,26 @@ 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 */} - + {person.location} - + {person.jobTitle} {hasEditRights ? ( @@ -79,14 +94,16 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { id={`editPerson-personId-${person.personId}`} onClick={() => editPersonClick(hasEditRights)} style={{ cursor: 'pointer' }} - width={20} + // cellwidth="20" + cellwidth={20} > ) : (   @@ -98,7 +115,8 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { id={`removeMember-personId-${person.personId}`} onClick={() => removeTeamMemberClick(person)} style={{ cursor: 'pointer' }} - width={20} + // cellwidth="20" + cellwidth={20} > @@ -106,7 +124,8 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { removeTeamMemberClick(person)} - width={20} + // cellwidth="20" + cellwidth={20} >   @@ -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 index c31a3a2..6141bc4 100644 --- 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 = () => { diff --git a/src/js/components/Questionnaire/EditQuestionnaireForm.jsx b/src/js/components/Questionnaire/EditQuestionnaireForm.jsx index 5613d71..a93d3e0 100644 --- a/src/js/components/Questionnaire/EditQuestionnaireForm.jsx +++ b/src/js/components/Questionnaire/EditQuestionnaireForm.jsx @@ -11,7 +11,7 @@ import { useQuestionnaireSaveMutation } from '../../react-query/mutations'; const EditQuestionnaireForm = ({ classes }) => { renderLog('EditQuestionnaireForm'); - const { getAppContextValue } = useConnectAppContext(); + const { getAppContextValue, setAppContextValue } = useConnectAppContext(); const { mutate } = useQuestionnaireSaveMutation(); const [questionnaire] = useState(getAppContextValue('selectedQuestionnaire')); @@ -47,12 +47,14 @@ const EditQuestionnaireForm = ({ classes }) => { }; mutate(makeRequestParams(plainParams, params)); setSaveButtonActive(false); + setAppContextValue('editQuestionnaireDrawerOpen', false); + setAppContextValue('selectedQuestionnaire', undefined); + setAppContextValue('editQuestionnaireDrawerLabel', ''); }; const updateSaveButton = () => { if (nameFldRef.current.value && nameFldRef.current.value.length && - titleFldRef.current.value && titleFldRef.current.value.length && - instructionsFldRef.current.value && instructionsFldRef.current.value.length) { + titleFldRef.current.value && titleFldRef.current.value.length) { if (!saveButtonActive) { setSaveButtonActive(true); } diff --git a/src/js/components/Task/EditTaskDefinitionForm.jsx b/src/js/components/Task/EditTaskDefinitionForm.jsx index ee200e6..ca8f1b7 100644 --- a/src/js/components/Task/EditTaskDefinitionForm.jsx +++ b/src/js/components/Task/EditTaskDefinitionForm.jsx @@ -21,10 +21,10 @@ import { useTaskDefinitionSaveMutation } from '../../react-query/mutations'; const EditTaskDefinitionForm = ({ classes }) => { renderLog('EditTaskDefinitionForm'); // Set LOG_RENDER_EVENTS to log all renders - const { getAppContextValue } = useConnectAppContext(); + const { getAppContextValue, setAppContextValue } = useConnectAppContext(); const { mutate } = useTaskDefinitionSaveMutation(); - const [group] = useState(getAppContextValue('editTaskDefinitionDrawerTaskGroup')); + const [taskGroup] = useState(getAppContextValue('editTaskDefinitionDrawerTaskGroup')); const [taskDefinition] = useState(getAppContextValue('editTaskDefinitionDrawerTaskDefinition')); const [taskNameValue, setTaskNameValue] = useState(''); const [taskDescValue, setTaskDescValue] = useState(''); @@ -54,7 +54,7 @@ const EditTaskDefinitionForm = ({ classes }) => { const saveTaskDefinition = () => { const requestParams = makeRequestParams({ taskDefinitionId: taskDefinition ? taskDefinition.id : '-1', - taskGroupId: group.taskGroupId, + taskGroupId: taskGroup.taskGroupId, }, { taskName: taskNameFldRef.current.value, taskDescription: taskDescFldRef.current.value, @@ -63,6 +63,10 @@ const EditTaskDefinitionForm = ({ classes }) => { }); mutate(requestParams); setSaveButtonActive(false); + setAppContextValue('editTaskDefinitionDrawerOpen', false); + setAppContextValue('editTaskDefinitionDrawerTaskDefinition', undefined); + setAppContextValue('editTaskDefinitionDrawerTaskGroup', undefined); + setAppContextValue('editTaskDefinitionDrawerLabel', ''); }; const updateSaveButton = () => { diff --git a/src/js/components/Task/EditTaskGroupForm.jsx b/src/js/components/Task/EditTaskGroupForm.jsx index b97d8f9..df099ea 100644 --- a/src/js/components/Task/EditTaskGroupForm.jsx +++ b/src/js/components/Task/EditTaskGroupForm.jsx @@ -13,10 +13,10 @@ import { useGroupSaveMutation } from '../../react-query/mutations'; const EditTaskGroupForm = ({ classes }) => { renderLog('EditTaskGroupForm'); - const { getAppContextValue } = useConnectAppContext(); + const { getAppContextValue, setAppContextValue } = useConnectAppContext(); const { mutate } = useGroupSaveMutation(); - const [group] = useState(getAppContextValue('editTaskGroupDrawerTaskGroup')); + const [taskGroup] = useState(getAppContextValue('editTaskGroupDrawerTaskGroup')); const [groupNameValue, setGroupNameValue] = useState(''); const [groupDescValue, setGroupDescValue] = useState(''); const [saveButtonActive, setSaveButtonActive] = useState(false); @@ -25,24 +25,27 @@ const EditTaskGroupForm = ({ classes }) => { const groupDescFldRef = useRef(''); useEffect(() => { - if (group) { - setGroupNameValue(group.taskGroupName); - setGroupDescValue(group.taskGroupDescription); + if (taskGroup) { + setGroupNameValue(taskGroup.taskGroupName); + setGroupDescValue(taskGroup.taskGroupDescription); } else { setGroupNameValue(''); setGroupDescValue(''); } - }, [group]); + }, [taskGroup]); const saveTaskGroup = () => { const requestParams = makeRequestParams({ - taskGroupId: group ? group.id : '-1', + taskGroupId: taskGroup ? taskGroup.id : '-1', }, { taskGroupName: groupNameFldRef.current.value, taskGroupDescription: groupDescFldRef.current.value, }); mutate(requestParams); setSaveButtonActive(false); + setAppContextValue('editTaskGroupDrawerOpen', false); + setAppContextValue('editTaskGroupDrawerTaskGroup', undefined); + setAppContextValue('editTaskGroupDrawerLabel', ''); }; const updateSaveButton = () => { diff --git a/src/js/components/Team/AddTeamDrawerMainContent.jsx b/src/js/components/Team/AddTeamDrawerMainContent.jsx index 57b212c..343997f 100644 --- a/src/js/components/Team/AddTeamDrawerMainContent.jsx +++ b/src/js/components/Team/AddTeamDrawerMainContent.jsx @@ -22,7 +22,7 @@ const AddTeamDrawerMainContent = ({ classes }) => { // classes, teamId // const isSearching = (incomingSearchText && incomingSearchText.length > 0); // const teamIdTemp = AppObservableStore.getGlobalVariableState('addPersonDrawerTeamId'); // if (apiCalming(`addPersonToTeamSearch-${teamIdTemp}-${incomingSearchText}`, 60000)) { // Only once per 60 seconds - // PersonActions.personListRetrieve(incomingSearchText); + // PersonActions.capturePersonListRetrieveData(incomingSearchText); // } // setSearchText(incomingSearchText); // }; diff --git a/src/js/components/Team/TeamHeader.jsx b/src/js/components/Team/TeamHeader.jsx index 576775e..48d95df 100644 --- a/src/js/components/Team/TeamHeader.jsx +++ b/src/js/components/Team/TeamHeader.jsx @@ -36,28 +36,28 @@ const TeamHeader = ({ classes, showHeaderLabels, showIcons, team }) => { return ( {/* Width (below) of this TeamHeaderCell comes from the combined widths of the first x columns in TeamMemberList */} - + {teamLocal && ( {teamLocal.teamName} )} - + {showHeaderLabels ? 'Location' : ''} - + {showHeaderLabels ? 'Title / Volunteering Love' : ''} {/* Edit icon */} {showIcons && ( - + )} {/* Delete icon */} {showIcons && ( - + )} @@ -91,18 +91,18 @@ const OneTeamHeader = styled('div')` `; const TeamHeaderCell = styled('div', { - shouldForwardProp: (prop) => !['largeFont', 'titleCell', 'width'].includes(prop), -})(({ largeFont, titleCell, width }) => (` + 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; - ${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)(TeamHeader); diff --git a/src/js/components/Team/TeamMemberList.jsx b/src/js/components/Team/TeamMemberList.jsx index fabf350..64d7fe0 100644 --- a/src/js/components/Team/TeamMemberList.jsx +++ b/src/js/components/Team/TeamMemberList.jsx @@ -19,9 +19,9 @@ const TeamMemberList = ({ teamId, team }) => { // teamMemberList // console.log('TeamMemberList teamMemberList:', teamMemberList); const { data: dataTLR, isSuccess: isSuccessTLR, isFetching: isFetchingTLR } = useFetchData(['team-list-retrieve'], {}, METHOD.GET); - console.log('useFetchData in TeamMemberList:', dataTLR, isSuccessTLR, isFetchingTLR); + // console.log('useFetchData in TeamMemberList:', dataTLR, isSuccessTLR, isFetchingTLR); useEffect(() => { - console.log('effect of useFetchData in TeamMemberList useEffect:', dataTLR, isSuccessTLR, isFetchingTLR); + // console.log('effect of useFetchData in TeamMemberList useEffect:', dataTLR, isSuccessTLR, isFetchingTLR); if (dataTLR !== undefined && isSuccessTLR) { const oneTeam = dataTLR.teamList.find((tm) => tm.teamId === parseInt(teamId)); if (oneTeam) { // We might have just deleted the team @@ -50,36 +50,34 @@ const TeamMemberList = ({ teamId, team }) => { // teamMemberList const valReactQueryCache = teamMemberListReactQuery && teamMemberListReactQuery[i] && teamMemberListReactQuery[i][key]; const valApiCacheQuery = teamMemberListApiDataCache && teamMemberListApiDataCache[i] && teamMemberListApiDataCache[i][key]; if (valApiCacheQuery !== valReactQueryCache) { - console.log(`ERROR: teamMemberList authoritative ReactQuery cache for key: ${key} value: '${valReactQueryCache}' does not match processed cache value: '${valApiCacheQuery}'`); + // console.log(`ERROR: teamMemberList authoritative ReactQuery cache for key: ${key} value: '${valReactQueryCache}' does not match processed cache value: '${valApiCacheQuery}'`); isPerfectMatch = false; } } }); } if (isPerfectMatch) { - console.log('=== PERFECT MATCH'); + // console.log('=== PERFECT MATCH'); } } else { - console.log(`=== CANNOT COMPARE: teamMemberListReactQuery.length: ${teamMemberListReactQuery.length}, teamMemberListApiDataCache.length: ${teamMemberListApiDataCache.length}`); + // console.log(`=== CANNOT COMPARE: teamMemberListReactQuery.length: ${teamMemberListReactQuery.length}, teamMemberListApiDataCache.length: ${teamMemberListApiDataCache.length}`); } - console.log('====== Cached by ReactQuery teamMemberList: ', teamMemberListReactQuery); - console.log('====== Cached by apiDataCache teamMemberList: ', teamMemberListApiDataCache); + // console.log('====== Cached by ReactQuery teamMemberList: ', teamMemberListReactQuery); + // console.log('====== Cached by apiDataCache teamMemberList: ', teamMemberListApiDataCache); return ( - {teamMemberListReactQuery.map((person, index) => { + {teamMemberListApiDataCache.map((person, index) => { if (teamId === 10) console.log(`TeamMemberList teamId: ${teamId}, person: ${person} location ${person.location}`); if (person) { return ( - <> - - + ); } else { return null; // Empty row for non-existing members diff --git a/src/js/config-template.js b/src/js/config-template.js index 5ebedaf..8074cc9 100644 --- a/src/js/config-template.js +++ b/src/js/config-template.js @@ -24,12 +24,12 @@ module.exports = { // STAFF_API_SERVER_API_ROOT_URL: 'https://wevotedeveloper.com:4500/apis/v1/', // STAFF_API_SERVER_API_CDN_ROOT_URL: 'https://wevotedeveloper.com:4500/apis/v1/', //// Connecting to live WeConnect APIs //// - // STAFF_API_SERVER_ROOT_URL: 'https://weconnect.wevoteusa.org/', - // STAFF_API_SERVER_ADMIN_ROOT_URL: 'https://weconnect.wevoteusa.org/admin/', - // STAFF_API_SERVER_API_ROOT_URL: 'https://weconnect.wevoteusa.org/apis/v1/', - // STAFF_API_SERVER_API_CDN_ROOT_URL: 'https://cdn.weconnect.wevoteusa.org/apis/v1/', + // STAFF_API_SERVER_ROOT_URL: 'https://weconnectserver.org/', + // STAFF_API_SERVER_ADMIN_ROOT_URL: 'https://weconnectserver.org/admin/', + // STAFF_API_SERVER_API_ROOT_URL: 'https://weconnectserver.org/apis/v1/', + // STAFF_API_SERVER_API_CDN_ROOT_URL: 'https://cdn.weconnectserver.org/apis/v1/', - // For when we need to connect to the WeVoteServer APIs + // For when we need to connect to the WeVote WebApp front end VOTER_FRONT_END_APP_URL_PROTOCOL: 'http://', // 'http://' for local dev (if not using SSL), or 'https://' for live server VOTER_FRONT_END_APP_HOSTNAME: 'localhost:3000', // Don't add 'http...' here. Live server: 'WeVote.US', Quality: 'quality.WeVote.US', developers: 'localhost:3000' diff --git a/src/js/contexts/ConnectAppContext.jsx b/src/js/contexts/ConnectAppContext.jsx index 01971f2..21b52bb 100644 --- a/src/js/contexts/ConnectAppContext.jsx +++ b/src/js/contexts/ConnectAppContext.jsx @@ -1,14 +1,19 @@ import PropTypes from 'prop-types'; import React, { createContext, useContext, useEffect, useReducer, useState } from 'react'; import initialApiDataCache from '../models/initialApiDataCache'; -import personListRetrieveDataCapture from '../models/personListRetrieve'; +// import capturePersonListRetrieveData from '../models/capturePersonListRetrieveData'; import { METHOD, useFetchData } from '../react-query/WeConnectQuery'; - +// import { getInitialGlobalPersonVariables, PersonListRetrieveDataCapture } from '../models/PersonModel'; +// import { getInitialGlobalTaskVariables } from '../models/TaskModel'; +// import { getInitialGlobalTeamVariables } from '../models/TeamModel'; // Replaces AppObservableStore.js // Create the context const ConnectAppContext = createContext({}); const ConnectDispatch = createContext(null); +// const initialCachedApiPersonVariables = getInitialGlobalPersonVariables(); +// const initialCachedApiTaskVariables = getInitialGlobalTaskVariables(); +// const initialCachedApiTeamVariables = getInitialGlobalTeamVariables(); function apiDataCacheReducer (apiDataCache, action) { let revisedApiDataCache = { ...apiDataCache }; @@ -24,6 +29,11 @@ function apiDataCacheReducer (apiDataCache, action) { } } +// const initialApiDataCache = { +// ...initialCachedApiPersonVariables, +// ...initialCachedApiTaskVariables, +// ...initialCachedApiTeamVariables, +// }; // Create the provider component // eslint-disable-next-line no-unused-vars @@ -52,7 +62,7 @@ export const ConnectAppContextProvider = ({ children }) => { }; // const { data: dataP, isSuccess: isSuccessP, isFetching: isFetchingP, isStale: isStaleP } = useFetchData(['person-list-retrieve'], {}, METHOD.GET); - const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET); + // const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET); // This is not currently the right place to pass these values, but I'm saving these here for the next 30 days until we work out the correct place. // { // cacheTime: 0, @@ -62,26 +72,29 @@ export const ConnectAppContextProvider = ({ children }) => { // refetchInterval: 0, // staleTime: 0, // } - const { data: dataP, isSuccess: isSuccessP, isFetching: isFetchingP } = personListRetrieveResults; - useEffect(() => { - // console.log('useFetchData person-list-retrieve in Teams useEffect:', personListRetrieveResults); - if (personListRetrieveResults) { - // console.log('In useEffect apiDataCache:', apiDataCache); - // const changeResults = - personListRetrieveDataCapture(personListRetrieveResults, apiDataCache, dispatch); - // console.log('ConnectAppContext useEffect personListRetrieveDataCapture changeResults:', changeResults); - } - }, [personListRetrieveResults]); - useEffect(() => { - // console.log('useFetchData in TeamHome (person-list-retrieve) useEffect:', dataP, isSuccessP, isFetchingP, isStaleP); - if (isSuccessP) { - // console.log('useFetchData in TeamHome (person-list-retrieve)useEffect data good:', dataP, isSuccessP, isFetchingP, isStaleP); - setAppContextValue('allStaffList', dataP ? dataP.personList : []); - // console.log('ConnectAppContext useEffect allStaffList fetched'); - } - }, [dataP, isSuccessP, isFetchingP]); + // Moved to root pages: Teams, TeamHome, etc. + // useEffect(() => { + // // console.log('useFetchData person-list-retrieve in Teams useEffect:', personListRetrieveResults); + // if (personListRetrieveResults) { + // // console.log('In useEffect apiDataCache:', apiDataCache); + // // const changeResults = + // capturePersonListRetrieveData(personListRetrieveResults, apiDataCache, dispatch); + // // console.log('ConnectAppContext useEffect capturePersonListRetrieveData changeResults:', changeResults); + // } + // }, [personListRetrieveResults]); + + // const { data: dataP, isSuccess: isSuccessP, isFetching: isFetchingP } = personListRetrieveResults; + // useEffect(() => { + // // console.log('useFetchData in TeamHome (person-list-retrieve) useEffect:', dataP, isSuccessP, isFetchingP, isStaleP); + // if (isSuccessP) { + // // console.log('useFetchData in TeamHome (person-list-retrieve)useEffect data good:', dataP, isSuccessP, isFetchingP, isStaleP); + // setAppContextValue('allStaffList', dataP ? dataP.personList : []); + // // console.log('ConnectAppContext useEffect allStaffList fetched'); + // } + // }, [dataP, isSuccessP, isFetchingP]); + // The following prints console log errors const { data: dataAuth, isSuccess: isSuccessAuth, isFetching: isFetchingAuth } = useFetchData(['get-auth'], {}, METHOD.POST); useEffect(() => { if (isSuccessAuth) { diff --git a/src/js/models/QuestionnaireModel.jsx b/src/js/models/QuestionnaireModel.jsx new file mode 100644 index 0000000..5423558 --- /dev/null +++ b/src/js/models/QuestionnaireModel.jsx @@ -0,0 +1,189 @@ +import isEqual from 'lodash-es/isEqual'; + +export function getInitialGlobalQuestionnaireVariables () { + return { + allQuestionnairesCache: {}, // This is a dictionary key: questionnaireId, value: questionnaire dict + allQuestionsCache: {}, // This is a dictionary key: questionId, value: question dict + allAnswersCache: {}, // This is a dictionary key: personId, value: another dictionary key: questionId, value: answer dict + dateQuestionnaireCompletedDict: {}, // This is a dictionary key: personId, value: another dictionary key: questionnaireId, value: dateQuestionnaireCompleted + mostRecentQuestionIdSaved: -1, + mostRecentQuestionSaved: { + questionnaireId: -1, + }, + mostRecentQuestionnaireIdSaved: -1, + mostRecentQuestionnaireSaved: { + firstName: '', + lastName: '', + questionnaireId: -1, + }, + questionsAnsweredPersonIdList: {}, // This is a dictionary key: questionId, value: list of personIds who have answered the question + questionnairesAnsweredByPersonList: {}, // This is a dictionary key: questionnaireId, value: list of personIds who have answered the questionnaire + questionnairesAnsweredListByPersonId: {}, // This is a dictionary key: personId, value: list of questionnaireIds the person has answered + searchResults: [], + }; +} + +// This is called after making this fetchData request: +// const questionnaireResponsesListRetrieveResults = useFetchData(['questionnaire-list-retrieve'], {}); +export function captureQuestionnaireListRetrieveData ( + incomingRetrieveResults = {}, + apiDataCache = {}, + dispatch, +) { + const { data, isSuccess } = incomingRetrieveResults; + const allQuestionnairesCache = apiDataCache.allQuestionnairesCache || {}; + const changeResults = { + allQuestionnairesCache, + allQuestionnairesCacheChanged: false, + }; + const allQuestionnairesCacheNew = { ...allQuestionnairesCache }; + let newQuestionnaireListDataReceived = false; + if (data && data.questionnaireList && isSuccess === true) { + data.questionnaireList.forEach((questionnaire) => { + if (questionnaire && questionnaire.questionnaireId && questionnaire.questionnaireId >= 0) { + if (!allQuestionnairesCacheNew[questionnaire.questionnaireId]) { + allQuestionnairesCacheNew[questionnaire.questionnaireId] = questionnaire; + newQuestionnaireListDataReceived = true; + } else if (!isEqual(questionnaire, allQuestionnairesCacheNew[questionnaire.questionnaireId])) { + allQuestionnairesCacheNew[questionnaire.questionnaireId] = questionnaire; + newQuestionnaireListDataReceived = true; + } + } + }); + } + if (newQuestionnaireListDataReceived) { + // console.log('QuestionnaireListRetrieve setting allQuestionnairesCacheNew:', allQuestionnairesCacheNew); + dispatch({ type: 'updateByKeyValue', key: 'allQuestionnairesCache', value: allQuestionnairesCacheNew }); + changeResults.allQuestionnairesCache = allQuestionnairesCacheNew; + changeResults.allQuestionnairesCacheChanged = true; + } + return changeResults; +} + +// This is called after making this fetchData request: +// const questionnaireResponsesListRetrieveResults = useFetchData(['questionnaire-responses-list-retrieve'], {}); +export function captureQuestionnaireResponsesListRetrieveData ( + incomingRetrieveResults = {}, + apiDataCache = {}, + dispatch, +) { + const { data, isSuccess } = incomingRetrieveResults; + // allTaskDefinitionsCache -> allQuestionnairesCache + const allQuestionnairesCache = apiDataCache.allQuestionnairesCache || {}; + // allTaskGroupsCache -> allQuestionsCache + const allQuestionsCache = apiDataCache.allQuestionsCache || {}; + // allTasksCache -> allAnswersCache + const allAnswersCache = apiDataCache.allAnswersCache || {}; + const changeResults = { + allQuestionnairesCache, + allQuestionnairesCacheChanged: false, + allQuestionsCache, + allQuestionsCacheChanged: false, + allAnswersCache, + allAnswersCacheChanged: false, + }; + const allQuestionnairesCacheNew = { ...allQuestionnairesCache }; + const allQuestionsCacheNew = { ...allQuestionsCache }; + const allAnswersCacheNew = { ...allAnswersCache }; + let newQuestionnaireListDataReceived = false; + if (data && data.questionnaireList && isSuccess === true) { + data.questionnaireList.forEach((questionnaire) => { + if (questionnaire && questionnaire.questionnaireId && questionnaire.questionnaireId >= 0) { + if (!allQuestionnairesCacheNew[questionnaire.questionnaireId]) { + allQuestionnairesCacheNew[questionnaire.questionnaireId] = questionnaire; + newQuestionnaireListDataReceived = true; + } else if (!isEqual(questionnaire, allQuestionnairesCacheNew[questionnaire.questionnaireId])) { + allQuestionnairesCacheNew[questionnaire.questionnaireId] = questionnaire; + newQuestionnaireListDataReceived = true; + } + } + }); + } + let newQuestionListDataReceived = false; + if (data && data.questionList && isSuccess === true) { + data.questionList.forEach((question) => { + if (question && question.questionId && question.questionId >= 0) { + if (!allQuestionsCacheNew[question.questionId]) { + allQuestionsCacheNew[question.questionId] = question; + newQuestionListDataReceived = true; + } else if (!isEqual(question, allQuestionsCacheNew[question.questionId])) { + allQuestionsCacheNew[question.questionId] = question; + newQuestionListDataReceived = true; + } + } + }); + } + let newAnswerListDataReceived = false; + if (data && data.taskList && isSuccess === true) { + data.taskList.forEach((task) => { + if (task && task.personId && task.personId >= 0 && task.questionnaireId && task.questionnaireId >= 0) { + if (!allAnswersCacheNew[task.personId]) { + allAnswersCacheNew[task.personId] = {}; + } + if (!allAnswersCacheNew[task.personId][task.questionnaireId]) { + allAnswersCacheNew[task.personId][task.questionnaireId] = task; + newAnswerListDataReceived = true; + } else if (!isEqual(task, allAnswersCacheNew[task.personId][task.questionnaireId])) { + allAnswersCacheNew[task.personId][task.questionnaireId] = task; + newAnswerListDataReceived = true; + } + } + }); + if (newQuestionnaireListDataReceived) { + // console.log('QuestionnaireListRetrieve setting allQuestionnairesCacheNew:', allQuestionnairesCacheNew); + dispatch({ type: 'updateByKeyValue', key: 'allQuestionnairesCache', value: allQuestionnairesCacheNew }); + changeResults.allQuestionnairesCache = allQuestionnairesCacheNew; + changeResults.allQuestionnairesCacheChanged = true; + } + if (newQuestionListDataReceived) { + // console.log('QuestionnaireListRetrieve setting allQuestionsCacheNew:', allQuestionsCacheNew); + dispatch({ type: 'updateByKeyValue', key: 'allQuestionsCache', value: allQuestionsCacheNew }); + changeResults.allQuestionsCache = allQuestionsCacheNew; + changeResults.allQuestionsCacheChanged = true; + } + if (newAnswerListDataReceived) { + // console.log('QuestionnaireListRetrieve setting allAnswersCacheNew:', allAnswersCacheNew); + dispatch({ type: 'updateByKeyValue', key: 'allAnswersCache', value: allAnswersCacheNew }); + changeResults.allAnswersCache = allAnswersCacheNew; + changeResults.allAnswersCacheChanged = true; + } + } + return changeResults; +} + +// This is called after making this fetchData request: +// const questionListRetrieveResults = useFetchData(['question-list-retrieve'], {}, METHOD.GET); +export function captureQuestionListRetrieveData ( + incomingRetrieveResults = {}, + apiDataCache = {}, + dispatch, +) { + const { data, isSuccess } = incomingRetrieveResults; + const allQuestionsCache = apiDataCache.allQuestionsCache || {}; + const changeResults = { + allQuestionsCache, + allQuestionsCacheChanged: false, + }; + const allQuestionsCacheNew = { ...allQuestionsCache }; + let newQuestionListDataReceived = false; + if (data && data.questionList && isSuccess === true) { + data.questionList.forEach((question) => { + if (question && question.questionId && question.questionId >= 0) { + if (!allQuestionsCacheNew[question.questionId]) { + allQuestionsCacheNew[question.questionId] = question; + newQuestionListDataReceived = true; + } else if (!isEqual(question, allQuestionsCacheNew[question.questionId])) { + allQuestionsCacheNew[question.questionId] = question; + newQuestionListDataReceived = true; + } + } + }); + } + if (newQuestionListDataReceived) { + // console.log('QuestionnaireListRetrieve setting allQuestionsCacheNew:', allQuestionsCacheNew); + dispatch({ type: 'updateByKeyValue', key: 'allQuestionsCache', value: allQuestionsCacheNew }); + changeResults.allQuestionsCache = allQuestionsCacheNew; + changeResults.allQuestionsCacheChanged = true; + } + return changeResults; +} diff --git a/src/js/models/TaskModel.jsx b/src/js/models/TaskModel.jsx index a6ae22a..9aa4d61 100644 --- a/src/js/models/TaskModel.jsx +++ b/src/js/models/TaskModel.jsx @@ -3,11 +3,32 @@ import isEqual from 'lodash-es/isEqual'; // import weConnectQueryFn from '../react-query/WeConnectQuery'; // import { useConnectAppContext } from '../contexts/ConnectAppContext'; +export function getInitialGlobalTaskVariables () { + return { + allTaskGroupsCache: {}, // This is a dictionary key: taskGroupId, value: TaskGroup dict + allTaskDefinitionsCache: {}, // This is a dictionary key: taskDefinitionId, value: TaskDefinition dict + allTaskDependenciesCache: {}, // This is a dictionary key: taskDependencyId, value: TaskDependency dict + allTasksCache: {}, // This is a dictionary key: personId, value: another dictionary key: taskDefinitionId, value: Task dict + mostRecentTaskDefinitionIdSaved: -1, + mostRecentTaskDefinitionSaved: { + taskDefinitionId: -1, + }, + mostRecentTaskGroupIdSaved: -1, + mostRecentTaskGroupSaved: { + firstName: '', + lastName: '', + taskDefinitionId: -1, + }, + taskDefinitionsCompletedPersonIdList: {}, // This is a dictionary key: taskDefinitionId, value: list of personIds who have completed the TaskDefinition + taskGroupCompletedByPersonList: {}, // This is a dictionary key: taskGroupId, value: list of personIds who have completed the TaskGroup + searchResults: [], + }; +} // This is called after making this fetchData request: // const taskStatusListRetrieveResults = useFetchData(['task-status-list-retrieve'], { personIdList: personIdsList }); // eslint-disable-next-line import/prefer-default-export -export function TaskStatusListRetrieveDataCapture ( +export function captureTaskStatusListRetrieveData ( incomingRetrieveResults = {}, apiDataCache = {}, dispatch, diff --git a/src/js/models/TeamModel.jsx b/src/js/models/TeamModel.jsx index 4f124ee..e70c38d 100644 --- a/src/js/models/TeamModel.jsx +++ b/src/js/models/TeamModel.jsx @@ -40,12 +40,12 @@ export const useGetTeamMembersListByTeamId = (teamId) => { // This is called following: // const teamListRetrieveResults = useFetchData(['team-list-retrieve'], {}); -export function TeamListRetrieveDataCapture ( +export function captureTeamListRetrieveData ( incomingRetrieveResults = {}, apiDataCache = {}, dispatch, ) { - // console.log('||||||| TeamListRetrieveDataCapture should be called after useFetchData([\'team-list-retrieve\'], {})') + // console.log('||||||| captureTeamListRetrieveData should be called after useFetchData([\'team-list-retrieve\'], {})') const { data, isSuccess } = incomingRetrieveResults; const allTeamMembersCache = apiDataCache.allTeamMembersCache || {}; const allTeamsCache = apiDataCache.allTeamsCache || {}; diff --git a/src/js/models/personListRetrieve.js b/src/js/models/capturePersonListRetrieveData.js similarity index 95% rename from src/js/models/personListRetrieve.js rename to src/js/models/capturePersonListRetrieveData.js index 066974f..d344a37 100644 --- a/src/js/models/personListRetrieve.js +++ b/src/js/models/capturePersonListRetrieveData.js @@ -1,6 +1,6 @@ import isEqual from 'lodash-es/isEqual'; -export default function personListRetrieveDataCapture (incomingResults = {}, apiDataCache = {}, dispatch) { +export default function capturePersonListRetrieveData (incomingResults = {}, apiDataCache = {}, dispatch) { const { data, isSuccess } = incomingResults; const allPeopleCache = apiDataCache.allPeopleCache || {}; let changeResults = { diff --git a/src/js/models/initialApiDataCache.js b/src/js/models/initialApiDataCache.js index c103848..3045945 100644 --- a/src/js/models/initialApiDataCache.js +++ b/src/js/models/initialApiDataCache.js @@ -1,7 +1,7 @@ // Moved to a separate file that does not include ConnectAppContext.jsx to avoid a "Dependency cycle" const initialApiDataCache = () => { // These are the "AppContextValues" (i.e., global state variables) used in the PersonModel - console.log('initialApiDataCache called'); // This is worth logging, to see if we are reinitializing the apiDataCache unintentionally + // console.log('initialApiDataCache called'); // This is worth logging, to see if we are reinitializing the apiDataCache unintentionally const initialGlobalPersonVariables = { allPeopleCache: {}, // This is a dictionary key: personId, value: person dict mostRecentPersonIdSaved: -1, diff --git a/src/js/pages/SystemSettings/Questionnaire.jsx b/src/js/pages/SystemSettings/Questionnaire.jsx index 0c3ff49..937e986 100644 --- a/src/js/pages/SystemSettings/Questionnaire.jsx +++ b/src/js/pages/SystemSettings/Questionnaire.jsx @@ -1,4 +1,4 @@ -import { Button, CircularProgress } from '@mui/material'; +import { Button } from '@mui/material'; import { withStyles } from '@mui/styles'; import PropTypes from 'prop-types'; import React, { useEffect, useState } from 'react'; @@ -11,65 +11,86 @@ import { EditStyled } from '../../components/Style/iconStyles'; import { SpanWithLinkStyle } from '../../components/Style/linkStyles'; import { PageContentContainer } from '../../components/Style/pageLayoutStyles'; import webAppConfig from '../../config'; -import { useConnectAppContext } from '../../contexts/ConnectAppContext'; +import { useConnectAppContext, useConnectDispatch } from '../../contexts/ConnectAppContext'; import { METHOD, useFetchData } from '../../react-query/WeConnectQuery'; +import { captureQuestionListRetrieveData, captureQuestionnaireListRetrieveData } from '../../models/QuestionnaireModel'; -// eslint-disable-next-line no-unused-vars -const Questionnaire = ({ classes, match }) => { +const Questionnaire = ({ classes }) => { renderLog('Questionnaire'); const { setAppContextValue, getAppContextValue } = useConnectAppContext(); - const location = useLocation(); + const { apiDataCache } = useConnectAppContext(); + const { allQuestionsCache, allQuestionnairesCache } = apiDataCache; + const dispatch = useConnectDispatch(); + const { pathname } = useLocation(); + const pathSegments = pathname.split('/').filter(Boolean); + const targetQuestionnaireId = parseInt(pathSegments[1], 10); // Assuming the questionnaireId is the second segment of the path + const getQuestionsForQuestionnaire = (questionnaireId) => { + if (allQuestionsCache) { + return Object.values(allQuestionsCache).filter((question) => question.questionnaireId === questionnaireId); + } + return []; + }; + const questionsForCurrentQuestionnaire = getQuestionsForQuestionnaire(targetQuestionnaireId) || []; const [questionList, setQuestionList] = useState([]); const [questionnaire, setQuestionnaire] = useState(getAppContextValue('selectedQuestionnaire')); - const { data: dataQList, isSuccess: isSuccessQList, isFetching: isFetchingQList } = useFetchData(['questionnaire-list-retrieve'], {}, METHOD.GET); + const questionnaireListRetrieveResults = useFetchData(['questionnaire-list-retrieve'], {}, METHOD.GET); + useEffect(() => { + // console.log('questionnaireListRetrieveResults in Questionnaire useEffect captureQuestionnaireListRetrieveData'); + if (questionnaireListRetrieveResults) { + captureQuestionnaireListRetrieveData(questionnaireListRetrieveResults, apiDataCache, dispatch); + } + }, [questionnaireListRetrieveResults, allQuestionnairesCache]); + + const questionListRetrieveResults = useFetchData(['question-list-retrieve'], { questionnaireId: targetQuestionnaireId || '-1' }, METHOD.GET); useEffect(() => { - console.log('useFetchData in Questionnaire useEffect:', dataQList, isSuccessQList, isFetchingQList); - if (dataQList !== undefined && isFetchingQList === false) { - console.log('useFetchData in Questionnaire useEffect data is good:', dataQList, isSuccessQList, isFetchingQList); - console.log('Successfully retrieved questionnaire-list-retrieve...'); - const qNumber = location.pathname.substring(location.pathname.lastIndexOf('/') + 1); - const oneQ = dataQList.questionnaireList.find((questionn) => questionn.id === parseInt(qNumber)); - setQuestionnaire(oneQ); + // console.log('questionListRetrieveResults in Questionnaire useEffect captureQuestionListRetrieveData'); + if (questionListRetrieveResults) { + captureQuestionListRetrieveData(questionListRetrieveResults, apiDataCache, dispatch); } - }, [dataQList, isSuccessQList]); + }, [questionListRetrieveResults, allQuestionsCache]); - const { data: dataQuestionList, isSuccess: isSuccessQuestionList, isFetching: isFetchingQuestionList } = - useFetchData(['question-list-retrieve'], { questionnaireId: questionnaire ? questionnaire.questionnaireId : '-1' }, METHOD.GET); useEffect(() => { - console.log('useFetchData question-list-retrieve in Questionnaire useEffect:', dataQuestionList, isSuccessQuestionList, isFetchingQuestionList); - if (dataQuestionList !== undefined && isFetchingQuestionList === false) { - console.log('useFetchData question-list-retrieve in Questionnaire useEffect data is good:', dataQuestionList, isSuccessQuestionList, isFetchingQuestionList); - const questionListTemp = dataQuestionList.questionList; - console.log('Successfully retrieved question-list-retrieve... questionListTemp', questionListTemp); - setQuestionList(questionListTemp); + // console.log('Questionnaire useEffect setQuestionnaire targetQuestionnaireId:', targetQuestionnaireId); + if (allQuestionnairesCache) { + const questionnaireIdTemp = pathSegments[1]; + if (questionnaireIdTemp && allQuestionnairesCache[questionnaireIdTemp]) { + setQuestionnaire(allQuestionnairesCache[questionnaireIdTemp]); + } } - }, [dataQuestionList]); + }, [allQuestionnairesCache]); + + useEffect(() => { + // console.log('Questionnaire useEffect getQuestionsForQuestionnaire(targetQuestionnaireId):', targetQuestionnaireId); + if (questionsForCurrentQuestionnaire) { + if (questionsForCurrentQuestionnaire.length > 0) { + setQuestionList(questionsForCurrentQuestionnaire); + } + } + }, [allQuestionsCache]); const addQuestionClick = () => { setAppContextValue('editQuestionDrawerOpen', true); setAppContextValue('selectedQuestion', undefined); + setAppContextValue('selectedQuestionnaire', questionnaire); + setAppContextValue('editQuestionDrawerLabel', 'Add Question'); }; const editQuestionClick = (question) => { setAppContextValue('editQuestionDrawerOpen', true); setAppContextValue('selectedQuestion', question); + setAppContextValue('selectedQuestionnaire', questionnaire); + setAppContextValue('editQuestionDrawerLabel', 'Edit Question'); }; const editQuestionnaireClick = () => { setAppContextValue('editQuestionnaireDrawerOpen', true); + setAppContextValue('selectedQuestionnaire', questionnaire); + setAppContextValue('editQuestionnaireDrawerLabel', 'Edit Questionnaire'); }; - if (isFetchingQList || questionnaire === undefined) { - return ( -
- -
- ); - } - return ( <> @@ -81,45 +102,52 @@ const Questionnaire = ({ classes, match }) => { {/* */} - + Questionnaires - {' '} - > - {' '} - {questionnaire.questionnaireName} - - - - - {questionnaire.questionnaireTitle && ( + {questionnaire && questionnaire.questionnaireId && ( + <> + {' '} + > + {' '} + {questionnaire.questionnaireName} + + + + + )} + + {questionnaire && questionnaire.questionnaireTitle && ( - Questionnaire Name: {questionnaire.questionnaireName} -
- Questionnaire Title: {questionnaire.questionnaireTitle} + {questionnaire.questionnaireTitle} )} - {questionnaire.questionnaireInstructions && ( + {questionnaire && questionnaire.questionnaireInstructions && ( {questionnaire.questionnaireInstructions} )} - - {questionList.map((question) => ( - - {console.log('questionList.map((questionnaire)', question)} - Question: {question.questionText} - {' '} - {question.requireAnswer && ( - * - )} - editQuestionClick(question)}> - - - - ))} - + {(questionList && questionList.length > 0) ? ( + + {questionList.map((question) => ( + + Question: {question.questionText} + {' '} + {question.requireAnswer && ( + * + )} + editQuestionClick(question)}> + + + + ))} + + ) : ( + + No Questions found for this questionnaire. + + )}