From 69557fdcdb41db6b5328acc43893493a52a6bcff Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Wed, 11 Oct 2023 16:00:26 -0600 Subject: [PATCH 01/26] Update filter label text --- .../citizenshipFilterFormControlLabels.tsx | 30 +++++-------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/src/Assets/citizenshipFilterFormControlLabels.tsx b/src/Assets/citizenshipFilterFormControlLabels.tsx index 844b1ac20..ff2c15007 100644 --- a/src/Assets/citizenshipFilterFormControlLabels.tsx +++ b/src/Assets/citizenshipFilterFormControlLabels.tsx @@ -11,52 +11,36 @@ export type CitizenLabels = | 'gc_under19_pregnant_no5'; const citizenshipFilterFormControlLabels = { - citizen: ( - - ), non_citizen: ( - ), - green_card: ( - ), + green_card: , refugee: ( - ), - gc_5plus: ( - ), + gc_5plus: , gc_18plus_no5: ( ), gc_under18_no5: ( ), gc_under19_pregnant_no5: ( ), }; From 326b0e542ad9063fa17fbe91f0ec49d1ff88960f Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Wed, 11 Oct 2023 16:07:21 -0600 Subject: [PATCH 02/26] Add FM msg header to citizen popover --- src/Components/FilterSection/CitizenshipPopover.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 4a444ad13..8d5d59adf 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -1,3 +1,4 @@ +import { FormattedMessage } from 'react-intl'; import FormControlLabel from '@mui/material/FormControlLabel'; import { Checkbox, Stack } from '@mui/material'; import { GridFilterItem, GridFilterOperator } from '@mui/x-data-grid'; @@ -81,7 +82,14 @@ const CitizenshipPopover = ({ ); }); - return {citizenshipCheckboxFilters}; + return ( + + + + + {citizenshipCheckboxFilters} + + ); }; export default CitizenshipPopover; From 5313e501a03de8a333b94354f2e2a17d2851ddfc Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Wed, 11 Oct 2023 17:30:53 -0600 Subject: [PATCH 03/26] Rm citizen from citizenshipFilterIsChecked state --- src/Assets/citizenshipFilterFormControlLabels.tsx | 1 - src/Components/FilterSection/FilterSection.tsx | 1 - src/Components/Results/Results.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/src/Assets/citizenshipFilterFormControlLabels.tsx b/src/Assets/citizenshipFilterFormControlLabels.tsx index ff2c15007..52903e824 100644 --- a/src/Assets/citizenshipFilterFormControlLabels.tsx +++ b/src/Assets/citizenshipFilterFormControlLabels.tsx @@ -1,7 +1,6 @@ import { FormattedMessage } from 'react-intl'; export type CitizenLabels = - | 'citizen' | 'non_citizen' | 'green_card' | 'refugee' diff --git a/src/Components/FilterSection/FilterSection.tsx b/src/Components/FilterSection/FilterSection.tsx index ca0c0d8ea..19aab3855 100644 --- a/src/Components/FilterSection/FilterSection.tsx +++ b/src/Components/FilterSection/FilterSection.tsx @@ -78,7 +78,6 @@ const FilterSection = ({ //this resets the radio buttons setCitizenshipFilterIsChecked({ non_citizen: false, - citizen: true, green_card: false, refugee: false, gc_5plus: false, diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index c41918f1d..4c79e87d7 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -64,7 +64,6 @@ const Results = () => { const [filterResultsButton, setFilterResultsButton] = useState('benefits'); const [citizenshipFilterIsChecked, setCitizenshipFilterIsChecked] = useState>({ non_citizen: false, - citizen: true, green_card: false, refugee: false, gc_5plus: false, From daf574481e25f90de1b63f3cff030a85be4fac88 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Wed, 11 Oct 2023 17:31:44 -0600 Subject: [PATCH 04/26] Add hasAtLeastOneCitizenshipFilter func --- src/Components/FilterSection/CitizenshipPopover.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 8d5d59adf..a817afdf6 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -40,6 +40,14 @@ const CitizenshipPopover = ({ citizenshipFilterIsChecked, setCitizenshipFilterIsChecked, }: CitizenshipPopoverProps) => { + const hasAtLeastOneCitizenshipFilter = (currentCitizenshipFilters: Record) => { + const citizenshipFilterValues = Object.values(currentCitizenshipFilters); + + return citizenshipFilterValues.some((citizenshipFilterValue) => { + return citizenshipFilterValue === true; + }); + }; + const handleFilterSelect = (citizenshipType: CitizenLabels) => { const isChecked = citizenshipFilterIsChecked[citizenshipType]; From 6a747bf692524fbf49c127ae121dde07b599a31a Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Wed, 11 Oct 2023 17:33:14 -0600 Subject: [PATCH 05/26] Add if/else case to handleFilterSelect to fix no results table when no filters are checked --- .../FilterSection/CitizenshipPopover.tsx | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index a817afdf6..59dfee211 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -60,15 +60,28 @@ const CitizenshipPopover = ({ return updatedCitizenshipFilterIsChecked[citizenshipType]; }); - updateFilter({ - name: 'citizen', - filter: { - id: 1, - columnField: 'citizenship', - operatorValue: 'customCitizenshipOperator', - value: selectedCitizenshipFilters, - }, - }); + if (hasAtLeastOneCitizenshipFilter(updatedCitizenshipFilterIsChecked)) { + updateFilter({ + name: 'citizen', + filter: { + id: 1, + columnField: 'citizenship', + operatorValue: 'customCitizenshipOperator', + value: selectedCitizenshipFilters, + }, + }); + } else { + // set the citizenship filter back to the default + updateFilter({ + name: 'citizen', + filter: { + id: 1, + columnField: 'citizenship', + operatorValue: 'customCitizenshipOperator', + value: ['citizen'], + }, + }); + } setCitizenshipFilterIsChecked(updatedCitizenshipFilterIsChecked); }; From 9a087c4243cf1b70f8f153f5d0b3ea491a2f96e4 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 11:35:41 -0600 Subject: [PATCH 06/26] Move refugee option to the end of the list --- src/Assets/citizenshipFilterFormControlLabels.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Assets/citizenshipFilterFormControlLabels.tsx b/src/Assets/citizenshipFilterFormControlLabels.tsx index 52903e824..429cf3dec 100644 --- a/src/Assets/citizenshipFilterFormControlLabels.tsx +++ b/src/Assets/citizenshipFilterFormControlLabels.tsx @@ -17,12 +17,6 @@ const citizenshipFilterFormControlLabels = { /> ), green_card: , - refugee: ( - - ), gc_5plus: , gc_18plus_no5: ( ), + refugee: ( + + ), }; export default citizenshipFilterFormControlLabels; From dc185921f1ed9a42fab8436ceeda74940c915fe1 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 11:37:10 -0600 Subject: [PATCH 07/26] Add renderCitizenshipFilters function --- .../FilterSection/CitizenshipPopover.tsx | 55 ++++++++++++++----- 1 file changed, 41 insertions(+), 14 deletions(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 59dfee211..45e87ea3a 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -87,21 +87,48 @@ const CitizenshipPopover = ({ }; const typedCitizenshipFilterIsChecked = Object.keys(citizenshipFilterIsChecked) as CitizenLabels[]; - const citizenshipCheckboxFilters = typedCitizenshipFilterIsChecked.map((citizenshipType) => { - return ( - handleFilterSelect(citizenshipType)} + + const renderCitizenshipFilters = (citizenshipFilters: Record) => { + if (citizenshipFilters.green_card) { + const allCitizenshipCheckboxes = typedCitizenshipFilterIsChecked.map((citizenshipType) => { + return ( + handleFilterSelect(citizenshipType)} + /> + } + /> + ); + }); + + return allCitizenshipCheckboxes; + } else { + //green_card is false + const initialThreeFilters = ['non_citizen', 'green_card', 'refugee']; + const initialCitizenshipCheckboxes = initialThreeFilters.map((initialFilter) => { + return ( + handleFilterSelect(initialFilter)} + /> + } /> - } - /> - ); - }); + ); + }); + + return initialCitizenshipCheckboxes; + } + }; return ( From f3a49c8094263aee1b8f96300c1bd7939c0478fb Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 11:38:11 -0600 Subject: [PATCH 08/26] Replace citCheckboxFilters call with renderCitFilts --- src/Components/FilterSection/CitizenshipPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 45e87ea3a..9f9381287 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -135,7 +135,7 @@ const CitizenshipPopover = ({ - {citizenshipCheckboxFilters} + {renderCitizenshipFilters(citizenshipFilterIsChecked)} ); }; From 160af28fa3598c5edc5619cba130cd38b53ab560 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 11:41:12 -0600 Subject: [PATCH 09/26] Add type to initialThreeFilters --- src/Components/FilterSection/CitizenshipPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 9f9381287..4121d2708 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -109,7 +109,7 @@ const CitizenshipPopover = ({ return allCitizenshipCheckboxes; } else { //green_card is false - const initialThreeFilters = ['non_citizen', 'green_card', 'refugee']; + const initialThreeFilters = ['non_citizen', 'green_card', 'refugee'] as CitizenLabels[]; const initialCitizenshipCheckboxes = initialThreeFilters.map((initialFilter) => { return ( Date: Thu, 12 Oct 2023 13:45:33 -0600 Subject: [PATCH 10/26] Move refugee var down the list to display as requested --- src/Components/FilterSection/FilterSection.tsx | 2 +- src/Components/Results/Results.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/FilterSection/FilterSection.tsx b/src/Components/FilterSection/FilterSection.tsx index 19aab3855..01ff1d161 100644 --- a/src/Components/FilterSection/FilterSection.tsx +++ b/src/Components/FilterSection/FilterSection.tsx @@ -79,11 +79,11 @@ const FilterSection = ({ setCitizenshipFilterIsChecked({ non_citizen: false, green_card: false, - refugee: false, gc_5plus: false, gc_18plus_no5: false, gc_under18_no5: false, gc_under19_pregnant_no5: false, + refugee: false, }); categoryState[1]('All Categories'); eligibilityState[1]('eligibleBenefits'); diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 4c79e87d7..60f4d172e 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -65,11 +65,11 @@ const Results = () => { const [citizenshipFilterIsChecked, setCitizenshipFilterIsChecked] = useState>({ non_citizen: false, green_card: false, - refugee: false, gc_5plus: false, gc_18plus_no5: false, gc_under18_no5: false, gc_under19_pregnant_no5: false, + refugee: false, }); const categoryState = useState('All Categories'); const eligibilityState = useState('eligibleBenefits'); From 460b0a3e752003b8e1e29d41218ec21326dff5eb Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 13:46:04 -0600 Subject: [PATCH 11/26] Add css file for citizenship popover --- src/Components/FilterSection/CitizenshipPopover.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/Components/FilterSection/CitizenshipPopover.css diff --git a/src/Components/FilterSection/CitizenshipPopover.css b/src/Components/FilterSection/CitizenshipPopover.css new file mode 100644 index 000000000..ea81b2378 --- /dev/null +++ b/src/Components/FilterSection/CitizenshipPopover.css @@ -0,0 +1,3 @@ +.MuiFormControlLabel-root.gc-subcitizen-indentation { + margin-left: 1.25rem; +} \ No newline at end of file From 578a14a6178125ad67b2b48a05334722658a4d99 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 13:48:31 -0600 Subject: [PATCH 12/26] Add indentation to gc sub categories --- .../FilterSection/CitizenshipPopover.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 4121d2708..21decd0e6 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -5,6 +5,7 @@ import { GridFilterItem, GridFilterOperator } from '@mui/x-data-grid'; import { UpdateFilterArg } from '../Results/Results'; import citizenshipFilterFormControlLabels from '../../Assets/citizenshipFilterFormControlLabels'; import type { CitizenLabels } from '../../Assets/citizenshipFilterFormControlLabels'; +import './CitizenshipPopover.css'; export const citizenshipFilterOperators: GridFilterOperator[] = [ { @@ -91,10 +92,17 @@ const CitizenshipPopover = ({ const renderCitizenshipFilters = (citizenshipFilters: Record) => { if (citizenshipFilters.green_card) { const allCitizenshipCheckboxes = typedCitizenshipFilterIsChecked.map((citizenshipType) => { + //here we need to add an sx prop to indent them if they're the gc_filters + const isGreenCardSubCitizenshipType = + citizenshipType === 'gc_5plus' || + citizenshipType === 'gc_18plus_no5' || + citizenshipType === 'gc_under18_no5' || + citizenshipType === 'gc_under19_pregnant_no5'; + return ( + - {renderCitizenshipFilters(citizenshipFilterIsChecked)} + {renderCitizenshipFilters(citizenshipFilterIsChecked)} ); }; From 6f8dbd50be684e4f91e3b6f74911a9e4b6ea9459 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 14:48:34 -0600 Subject: [PATCH 13/26] Add if stmt to handleFilterSelect when citType is green_card --- .../FilterSection/CitizenshipPopover.css | 2 +- .../FilterSection/CitizenshipPopover.tsx | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.css b/src/Components/FilterSection/CitizenshipPopover.css index ea81b2378..abc06d425 100644 --- a/src/Components/FilterSection/CitizenshipPopover.css +++ b/src/Components/FilterSection/CitizenshipPopover.css @@ -1,3 +1,3 @@ .MuiFormControlLabel-root.gc-subcitizen-indentation { margin-left: 1.25rem; -} \ No newline at end of file +} diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 21decd0e6..85f5e7180 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -52,15 +52,28 @@ const CitizenshipPopover = ({ const handleFilterSelect = (citizenshipType: CitizenLabels) => { const isChecked = citizenshipFilterIsChecked[citizenshipType]; - const updatedCitizenshipFilterIsChecked: Record = { + let updatedCitizenshipFilterIsChecked: Record = { ...citizenshipFilterIsChecked, [citizenshipType]: !isChecked, }; + + if (citizenshipType === 'green_card') { + // if the citizenshipType is `green_card`, then set green_card and all the gc_options to true or false + // i.e. green_card and all the gc_options should be the same when citizenshipType is `green_card` + updatedCitizenshipFilterIsChecked = { + ...updatedCitizenshipFilterIsChecked, + gc_5plus: !isChecked, + gc_18plus_no5: !isChecked, + gc_under18_no5: !isChecked, + gc_under19_pregnant_no5: !isChecked, + }; + } const typedUpdatedCitizenshipFilterIsChecked = Object.keys(updatedCitizenshipFilterIsChecked) as CitizenLabels[]; const selectedCitizenshipFilters = typedUpdatedCitizenshipFilterIsChecked.filter((citizenshipType) => { return updatedCitizenshipFilterIsChecked[citizenshipType]; }); + //update the MUI filter that is being passed to the citizenship column if (hasAtLeastOneCitizenshipFilter(updatedCitizenshipFilterIsChecked)) { updateFilter({ name: 'citizen', @@ -84,6 +97,7 @@ const CitizenshipPopover = ({ }); } + //update citizenshipFilterIsChecked state setCitizenshipFilterIsChecked(updatedCitizenshipFilterIsChecked); }; From af89b0ae52b39342a6dee009c8e6bf38f68bb306 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 15:48:04 -0600 Subject: [PATCH 14/26] Refactor isGreenCardSubCitizenshipType variable --- src/Components/FilterSection/CitizenshipPopover.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index 85f5e7180..ef6c39a59 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -107,11 +107,7 @@ const CitizenshipPopover = ({ if (citizenshipFilters.green_card) { const allCitizenshipCheckboxes = typedCitizenshipFilterIsChecked.map((citizenshipType) => { //here we need to add an sx prop to indent them if they're the gc_filters - const isGreenCardSubCitizenshipType = - citizenshipType === 'gc_5plus' || - citizenshipType === 'gc_18plus_no5' || - citizenshipType === 'gc_under18_no5' || - citizenshipType === 'gc_under19_pregnant_no5'; + const isGreenCardSubCitizenshipType = ['gc_5plus', 'gc_18plus_no5', 'gc_under18_no5','gc_under19_pregnant_no5'].includes(citizenshipType); return ( - + + - {renderCitizenshipFilters(citizenshipFilterIsChecked)} + {renderCitizenshipFilters(citizenshipFilterIsChecked)} ); }; From a0e00b3a9335db5bc6d59d394a0b460bad8159e3 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 15:54:31 -0600 Subject: [PATCH 15/26] Fix formatting --- src/Components/FilterSection/CitizenshipPopover.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index ef6c39a59..a6566d5fb 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -107,7 +107,12 @@ const CitizenshipPopover = ({ if (citizenshipFilters.green_card) { const allCitizenshipCheckboxes = typedCitizenshipFilterIsChecked.map((citizenshipType) => { //here we need to add an sx prop to indent them if they're the gc_filters - const isGreenCardSubCitizenshipType = ['gc_5plus', 'gc_18plus_no5', 'gc_under18_no5','gc_under19_pregnant_no5'].includes(citizenshipType); + const isGreenCardSubCitizenshipType = [ + 'gc_5plus', + 'gc_18plus_no5', + 'gc_under18_no5', + 'gc_under19_pregnant_no5', + ].includes(citizenshipType); return ( Date: Thu, 12 Oct 2023 16:04:22 -0600 Subject: [PATCH 16/26] Refactored renderCitizenshipFilters if/else stmt --- .../FilterSection/CitizenshipPopover.tsx | 87 ++++++++++--------- 1 file changed, 44 insertions(+), 43 deletions(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index a6566d5fb..ad58e3882 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -103,52 +103,53 @@ const CitizenshipPopover = ({ const typedCitizenshipFilterIsChecked = Object.keys(citizenshipFilterIsChecked) as CitizenLabels[]; + const renderMainAndSubFilters = (citizenshipFilters: Record) => { + return typedCitizenshipFilterIsChecked.map((citizenshipType) => { + //here we need to add an sx prop to indent them if they're the gc_filters + const isGreenCardSubCitizenshipType = [ + 'gc_5plus', + 'gc_18plus_no5', + 'gc_under18_no5', + 'gc_under19_pregnant_no5', + ].includes(citizenshipType); + + return ( + handleFilterSelect(citizenshipType)} + /> + } + /> + ); + }); + }; + + const renderMainFilters = (citizenshipFilters: Record) => { + //green_card is false + const initialThreeFilters = ['non_citizen', 'green_card', 'refugee'] as CitizenLabels[]; + return initialThreeFilters.map((initialFilter) => { + return ( + handleFilterSelect(initialFilter)} /> + } + /> + ); + }); + }; + const renderCitizenshipFilters = (citizenshipFilters: Record) => { if (citizenshipFilters.green_card) { - const allCitizenshipCheckboxes = typedCitizenshipFilterIsChecked.map((citizenshipType) => { - //here we need to add an sx prop to indent them if they're the gc_filters - const isGreenCardSubCitizenshipType = [ - 'gc_5plus', - 'gc_18plus_no5', - 'gc_under18_no5', - 'gc_under19_pregnant_no5', - ].includes(citizenshipType); - - return ( - handleFilterSelect(citizenshipType)} - /> - } - /> - ); - }); - - return allCitizenshipCheckboxes; + return renderMainAndSubFilters(citizenshipFilters); } else { - //green_card is false - const initialThreeFilters = ['non_citizen', 'green_card', 'refugee'] as CitizenLabels[]; - const initialCitizenshipCheckboxes = initialThreeFilters.map((initialFilter) => { - return ( - handleFilterSelect(initialFilter)} - /> - } - /> - ); - }); - - return initialCitizenshipCheckboxes; + return renderMainFilters(citizenshipFilters); } }; From a86c83ba53f82e788af3217e587d1eb82f1861c6 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 17:23:55 -0600 Subject: [PATCH 17/26] Update the header calculations --- src/Components/Results/Results.tsx | 28 ++++++++++++++++------------ src/Types/Results.ts | 2 +- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 60f4d172e..2c8e6c9bb 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -125,18 +125,22 @@ const Results = () => { const apiRef = useGridApiRef(); useEffect(() => { - //use the visible row count so that we don't have to calculate the total eligible programs - //because doing so would require rewriting all of DGPro's filtering logic - //but the mui docs say that if you try to reference apiRef before the datagrid is rendered then it'll crash the app - //hence the if statements prevent us from accessing the apiRef before it's ready - if (apiRef && apiRef.current && Object.keys(apiRef.current).length) { - setVisibleRowCount(gridVisibleRowCountSelector(apiRef)); - - const updatedTotalEligibleDollarValue = gridVisibleSortedRowEntriesSelector(apiRef).reduce((acc, row) => { - return (acc += row.model.value.value); - }, 0); - setTotalEligibleDollarValue(updatedTotalEligibleDollarValue); - } + let count = 0; + let dollarAmount = 0; + const eligiblePrograms = results.programs.filter((program) => program.eligible); + eligiblePrograms.forEach((program) => { + const hasOverlap = program.legal_status_required.some((legalStatusType) => { + return filt.citizen.value.includes(legalStatusType); + }); + + if (hasOverlap) { + count += 1; + dollarAmount += program.estimated_value; + } + }); + + setVisibleRowCount(count); + setTotalEligibleDollarValue(dollarAmount); }, [results, filt]); const filtList = (filt: FilterState) => { diff --git a/src/Types/Results.ts b/src/Types/Results.ts index 2972606ad..e56d50532 100644 --- a/src/Types/Results.ts +++ b/src/Types/Results.ts @@ -28,7 +28,7 @@ export type Program = { value_type: Translation; learn_more_link: Translation; apply_button_link: Translation; - legal_status_required: string; + legal_status_required: string[]; category: Translation; eligible: boolean; failed_tests: TestMessage[]; From 18cbff1d4c7b7cfcf59f1db071a7ecc287415731 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 17:33:47 -0600 Subject: [PATCH 18/26] Change variable names --- src/Components/Results/Results.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 2c8e6c9bb..6871ba281 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -120,8 +120,8 @@ const Results = () => { category: false, }); - const [visibleRowCount, setVisibleRowCount] = useState(1); - const [totalEligibleDollarValue, setTotalEligibleDollarValue] = useState(0); + const [citizenshipRowCount, setCitizenshipRowCount] = useState(1); + const [totalCitizenshipDollarValue, setTotalCitizenshipDollarValue] = useState(0); const apiRef = useGridApiRef(); useEffect(() => { @@ -139,8 +139,8 @@ const Results = () => { } }); - setVisibleRowCount(count); - setTotalEligibleDollarValue(dollarAmount); + setCitizenshipRowCount(count); + setTotalCitizenshipDollarValue(dollarAmount); }, [results, filt]); const filtList = (filt: FilterState) => { @@ -326,7 +326,7 @@ const Results = () => { }; const displaySubheader = () => { - if (visibleRowCount === 0) { + if (citizenshipRowCount === 0) { return (

@@ -338,14 +338,14 @@ const Results = () => { return (

- {visibleRowCount} + {citizenshipRowCount} - ${totalEligibleDollarValue.toLocaleString()} + ${totalCitizenshipDollarValue.toLocaleString()} $ - {Math.round(totalEligibleDollarValue / 12).toLocaleString()} + {Math.round(totalCitizenshipDollarValue / 12).toLocaleString()} { failed_tests: TestMessage[]; category: string; navigators: ProgramNavigator[]; - citizenship: string; + citizenship: string[]; eligible: boolean; }; const DataGridRows = (programs: Program[]): DataRow[] => { @@ -405,7 +405,7 @@ const Results = () => { application_time: programs[i].estimated_application_time, delivery_time: programs[i].estimated_delivery_time, description: programs[i].description, - citizenship: '', + citizenship: [], application_link: programs[i].apply_button_link, passed_tests: programs[i].passed_tests, failed_tests: programs[i].failed_tests, @@ -654,7 +654,7 @@ const Results = () => { - ${totalEligibleDollarValue.toLocaleString()}{' '} + ${totalCitizenshipDollarValue.toLocaleString()}{' '} From c887fbf7281aebf4a5be7b15457c0448984b0234 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Thu, 12 Oct 2023 17:42:13 -0600 Subject: [PATCH 19/26] Add totalVisibleRowDollarValue for categories --- src/Components/Results/Results.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 6871ba281..d86006ac0 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -23,7 +23,6 @@ import { GridValueFormatterParams, GridFilterItem, GridAlignment, - gridVisibleRowCountSelector, useGridApiRef, gridVisibleSortedRowEntriesSelector, } from '@mui/x-data-grid-pro'; @@ -122,6 +121,7 @@ const Results = () => { const [citizenshipRowCount, setCitizenshipRowCount] = useState(1); const [totalCitizenshipDollarValue, setTotalCitizenshipDollarValue] = useState(0); + const [totalVisibleRowDollarValue, setTotalVisibleRowDollarValue] = useState(0); const apiRef = useGridApiRef(); useEffect(() => { @@ -138,9 +138,15 @@ const Results = () => { dollarAmount += program.estimated_value; } }); - setCitizenshipRowCount(count); setTotalCitizenshipDollarValue(dollarAmount); + + if (apiRef && apiRef.current && Object.keys(apiRef.current).length) { + const updatedTotalEligibleDollarValue = gridVisibleSortedRowEntriesSelector(apiRef).reduce((acc, row) => { + return (acc += row.model.value.value); + }, 0); + setTotalVisibleRowDollarValue(updatedTotalEligibleDollarValue); + } }, [results, filt]); const filtList = (filt: FilterState) => { @@ -654,7 +660,7 @@ const Results = () => { - ${totalCitizenshipDollarValue.toLocaleString()}{' '} + ${totalVisibleRowDollarValue.toLocaleString()}{' '} From 46f2bbb7921d7578d712dc7a4a63b3defca10355 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Fri, 13 Oct 2023 09:42:10 -0600 Subject: [PATCH 20/26] Refactor initialThreeFilters TS declaration --- src/Components/FilterSection/CitizenshipPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/FilterSection/CitizenshipPopover.tsx b/src/Components/FilterSection/CitizenshipPopover.tsx index ad58e3882..d08eca3c7 100644 --- a/src/Components/FilterSection/CitizenshipPopover.tsx +++ b/src/Components/FilterSection/CitizenshipPopover.tsx @@ -131,7 +131,7 @@ const CitizenshipPopover = ({ const renderMainFilters = (citizenshipFilters: Record) => { //green_card is false - const initialThreeFilters = ['non_citizen', 'green_card', 'refugee'] as CitizenLabels[]; + const initialThreeFilters: CitizenLabels[] = ['non_citizen', 'green_card', 'refugee']; return initialThreeFilters.map((initialFilter) => { return ( Date: Fri, 13 Oct 2023 10:50:11 -0600 Subject: [PATCH 21/26] Update the categoryValues function --- src/Components/Results/Results.tsx | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index d86006ac0..33703ae04 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -199,30 +199,34 @@ const Results = () => { const preschoolProgramCategory = 'Child Care, Youth, and Education'; const categoryValues = (programs: Program[]) => { - const preschoolPrograms = [0, 0]; + // const preschoolPrograms = [0, 0]; //i=0 => num of preschool prog, i=1 => prog.est.value + const preschoolPrograms = { numOfPreSchoolPrograms: 0, totalEstVal: 0}; //i=0 => num of preschool prog, i=1 => prog.est.value const categoryValues: { [key: string]: number } = {}; for (let program of programs) { + + //add this category to the categoryValues dictionary if the key doesn't already exist if (categoryValues[program.category.default_message] === undefined) { categoryValues[program.category.default_message] = 0; } - if (program.legal_status_required.includes(filt.citizen.value)) { + const hasOverlap = program.legal_status_required.some((status) => { + return filt.citizen.value.includes(status); + }); + + + if (hasOverlap) { categoryValues[program.category.default_message] += program.estimated_value; - if (preschoolProgramCategory == program.category.default_message) { - preschoolPrograms[0]++; - preschoolPrograms[1] += program.estimated_value; + if (program.category.default_message === preschoolProgramCategory) { + preschoolPrograms.numOfPreSchoolPrograms++; + preschoolPrograms.totalEstVal += program.estimated_value; } } } - for (const category in preschoolPrograms) { - if (Object.keys(preschoolPrograms).includes(category)) { - if (preschoolPrograms[1] > 8640 && preschoolPrograms[0] > 1) { - categoryValues[category] = 8640; - } - } + if (preschoolPrograms.totalEstVal > 8640 && preschoolPrograms.numOfPreSchoolPrograms > 1) { + categoryValues[preschoolProgramCategory] = 8640; } - + return categoryValues; }; From 3a37af43ea883998a6b79c4974bf3da62e1e4927 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Fri, 13 Oct 2023 10:51:10 -0600 Subject: [PATCH 22/26] Remove comment and space --- src/Components/Results/Results.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 33703ae04..00e84bc3e 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -199,11 +199,9 @@ const Results = () => { const preschoolProgramCategory = 'Child Care, Youth, and Education'; const categoryValues = (programs: Program[]) => { - // const preschoolPrograms = [0, 0]; //i=0 => num of preschool prog, i=1 => prog.est.value const preschoolPrograms = { numOfPreSchoolPrograms: 0, totalEstVal: 0}; //i=0 => num of preschool prog, i=1 => prog.est.value const categoryValues: { [key: string]: number } = {}; for (let program of programs) { - //add this category to the categoryValues dictionary if the key doesn't already exist if (categoryValues[program.category.default_message] === undefined) { categoryValues[program.category.default_message] = 0; @@ -213,7 +211,6 @@ const Results = () => { return filt.citizen.value.includes(status); }); - if (hasOverlap) { categoryValues[program.category.default_message] += program.estimated_value; if (program.category.default_message === preschoolProgramCategory) { From ea0223808472f009811a7295fbc0236665813bc2 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Fri, 13 Oct 2023 11:06:35 -0600 Subject: [PATCH 23/26] Add cappedCatValuesTotalDollarAmount in useEffect --- src/Components/Results/Results.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 00e84bc3e..f5dea34fa 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -126,8 +126,8 @@ const Results = () => { useEffect(() => { let count = 0; - let dollarAmount = 0; const eligiblePrograms = results.programs.filter((program) => program.eligible); + eligiblePrograms.forEach((program) => { const hasOverlap = program.legal_status_required.some((legalStatusType) => { return filt.citizen.value.includes(legalStatusType); @@ -135,11 +135,17 @@ const Results = () => { if (hasOverlap) { count += 1; - dollarAmount += program.estimated_value; } }); + + //used this instead of the real total to take into account the preschool category value cap at 8640 + const categoryValuesArray = Object.values(categoryValues(eligiblePrograms)); + const cappedCatValuesTotalDollarAmount = categoryValuesArray.reduce((acc, categoryAmt) => { + return acc += categoryAmt; + }, 0); + setCitizenshipRowCount(count); - setTotalCitizenshipDollarValue(dollarAmount); + setTotalCitizenshipDollarValue(cappedCatValuesTotalDollarAmount); if (apiRef && apiRef.current && Object.keys(apiRef.current).length) { const updatedTotalEligibleDollarValue = gridVisibleSortedRowEntriesSelector(apiRef).reduce((acc, row) => { @@ -223,7 +229,7 @@ const Results = () => { if (preschoolPrograms.totalEstVal > 8640 && preschoolPrograms.numOfPreSchoolPrograms > 1) { categoryValues[preschoolProgramCategory] = 8640; } - + return categoryValues; }; From 57a9ada73970aafc884652accc5d9daf88d14ddd Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Fri, 13 Oct 2023 11:27:21 -0600 Subject: [PATCH 24/26] Added a cap to total dollar val when filt.category is childcare --- src/Components/Results/Results.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index f5dea34fa..bcc283443 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -128,6 +128,7 @@ const Results = () => { let count = 0; const eligiblePrograms = results.programs.filter((program) => program.eligible); + //this will calculate the number of eligible programs/rows eligiblePrograms.forEach((program) => { const hasOverlap = program.legal_status_required.some((legalStatusType) => { return filt.citizen.value.includes(legalStatusType); @@ -147,10 +148,19 @@ const Results = () => { setCitizenshipRowCount(count); setTotalCitizenshipDollarValue(cappedCatValuesTotalDollarAmount); + //this is for the category header if (apiRef && apiRef.current && Object.keys(apiRef.current).length) { const updatedTotalEligibleDollarValue = gridVisibleSortedRowEntriesSelector(apiRef).reduce((acc, row) => { return (acc += row.model.value.value); }, 0); + + //this is only to cap the totalVisibleRowDollarValue for preschool + const typedFiltCategory = filt.category as GridFilterItem; + if (typedFiltCategory.value === 'Child Care, Preschool, and Youth' && updatedTotalEligibleDollarValue > 8640) { + setTotalVisibleRowDollarValue(8640); + return; + } + setTotalVisibleRowDollarValue(updatedTotalEligibleDollarValue); } }, [results, filt]); @@ -203,7 +213,7 @@ const Results = () => { }); }; - const preschoolProgramCategory = 'Child Care, Youth, and Education'; + const preschoolProgramCategory = 'Child Care, Preschool, and Youth'; const categoryValues = (programs: Program[]) => { const preschoolPrograms = { numOfPreSchoolPrograms: 0, totalEstVal: 0}; //i=0 => num of preschool prog, i=1 => prog.est.value const categoryValues: { [key: string]: number } = {}; From 8705a83f2a133e9216d3d9ca22db5e5f6a160147 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Fri, 13 Oct 2023 11:36:55 -0600 Subject: [PATCH 25/26] Fix formatting --- src/Components/Results/Results.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index bcc283443..4193d74ac 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -142,7 +142,7 @@ const Results = () => { //used this instead of the real total to take into account the preschool category value cap at 8640 const categoryValuesArray = Object.values(categoryValues(eligiblePrograms)); const cappedCatValuesTotalDollarAmount = categoryValuesArray.reduce((acc, categoryAmt) => { - return acc += categoryAmt; + return (acc += categoryAmt); }, 0); setCitizenshipRowCount(count); @@ -215,7 +215,7 @@ const Results = () => { const preschoolProgramCategory = 'Child Care, Preschool, and Youth'; const categoryValues = (programs: Program[]) => { - const preschoolPrograms = { numOfPreSchoolPrograms: 0, totalEstVal: 0}; //i=0 => num of preschool prog, i=1 => prog.est.value + const preschoolPrograms = { numOfPreSchoolPrograms: 0, totalEstVal: 0 }; //i=0 => num of preschool prog, i=1 => prog.est.value const categoryValues: { [key: string]: number } = {}; for (let program of programs) { //add this category to the categoryValues dictionary if the key doesn't already exist From ecdfd9aacaf6a57f0dcecdbe6d45cdffc82f0363 Mon Sep 17 00:00:00 2001 From: Ivonne Hernandez Date: Fri, 13 Oct 2023 11:49:56 -0600 Subject: [PATCH 26/26] Update and use the preschoolProgramCategory var --- src/Components/Results/Results.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx index 4193d74ac..ee47e3690 100644 --- a/src/Components/Results/Results.tsx +++ b/src/Components/Results/Results.tsx @@ -156,7 +156,7 @@ const Results = () => { //this is only to cap the totalVisibleRowDollarValue for preschool const typedFiltCategory = filt.category as GridFilterItem; - if (typedFiltCategory.value === 'Child Care, Preschool, and Youth' && updatedTotalEligibleDollarValue > 8640) { + if (typedFiltCategory.value === preschoolProgramCategory && updatedTotalEligibleDollarValue > 8640) { setTotalVisibleRowDollarValue(8640); return; } @@ -213,7 +213,7 @@ const Results = () => { }); }; - const preschoolProgramCategory = 'Child Care, Preschool, and Youth'; + const preschoolProgramCategory = 'Child Care, Youth, and Education'; const categoryValues = (programs: Program[]) => { const preschoolPrograms = { numOfPreSchoolPrograms: 0, totalEstVal: 0 }; //i=0 => num of preschool prog, i=1 => prog.est.value const categoryValues: { [key: string]: number } = {};