Skip to content

Commit

Permalink
Merge pull request #650 from Gary-Community-Ventures/feat/updated-cit…
Browse files Browse the repository at this point in the history
…izen-filters

Feat/updated citizen filters
  • Loading branch information
ivonne-hernandez authored Oct 13, 2023
2 parents ca4ca17 + ecdfd9a commit 3bf0cdb
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 89 deletions.
41 changes: 12 additions & 29 deletions src/Assets/citizenshipFilterFormControlLabels.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { FormattedMessage } from 'react-intl';

export type CitizenLabels =
| 'citizen'
| 'non_citizen'
| 'green_card'
| 'refugee'
Expand All @@ -11,52 +10,36 @@ export type CitizenLabels =
| 'gc_under19_pregnant_no5';

const citizenshipFilterFormControlLabels = {
citizen: (
<FormattedMessage
id="citizenshipFCtrlLabel-citizen"
defaultMessage="Show benefits that require citizenship or lawful U.S. presence"
/>
),
non_citizen: (
<FormattedMessage
id="citizenshipFCtrlLabel-non_citizen"
defaultMessage="Show benefits that do not require citizenship or lawful U.S. presence"
/>
),
green_card: (
<FormattedMessage
id="citizenshipFCtrlLabel-green_card"
defaultMessage="Show benefits available to green card holders"
/>
),
refugee: (
<FormattedMessage
id="citizenshipFCtrlLabel-refugee"
defaultMessage="Show benefits available to refugees or asylees (special rules or waiting periods may apply)"
/>
),
gc_5plus: (
<FormattedMessage
id="citizenshipFCtrlLabel-gc_5plus"
defaultMessage="Show benefits available to green card holders ONLY after 5+ years in the U.S."
defaultMessage="Individuals without citizenship or lawful U.S. presence"
/>
),
green_card: <FormattedMessage id="citizenshipFCtrlLabel-green_card" defaultMessage="Green card holders" />,
gc_5plus: <FormattedMessage id="citizenshipFCtrlLabel-gc_5plus" defaultMessage="ONLY after 5+ years in the U.S." />,
gc_18plus_no5: (
<FormattedMessage
id="citizenshipFCtrlLabel-gc_18plus_no5"
defaultMessage="Show benefits available to green card holders 18 or older without a 5-year waiting period"
defaultMessage="18 or older without a 5-year waiting period"
/>
),
gc_under18_no5: (
<FormattedMessage
id="citizenshipFCtrlLabel-gc_under18_no5"
defaultMessage="Show benefits available to green card holders younger than 18 without a 5-year waiting period"
defaultMessage="younger than 18 without a 5-year waiting period"
/>
),
gc_under19_pregnant_no5: (
<FormattedMessage
id="citizenshipFCtrlLabel-gc_under19_pregnant_no5"
defaultMessage="Show health care benefits available to green card holders younger than 19 or pregnant without a 5-year waiting period"
defaultMessage="for health care benefits - younger than 19 or pregnant without a 5-year waiting period"
/>
),
refugee: (
<FormattedMessage
id="citizenshipFCtrlLabel-refugee"
defaultMessage="Refugees or asylees (special rules or waiting periods may apply)"
/>
),
};
Expand Down
3 changes: 3 additions & 0 deletions src/Components/FilterSection/CitizenshipPopover.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.MuiFormControlLabel-root.gc-subcitizen-indentation {
margin-left: 1.25rem;
}
133 changes: 106 additions & 27 deletions src/Components/FilterSection/CitizenshipPopover.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
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';
import { UpdateFilterArg } from '../Results/Results';
import citizenshipFilterFormControlLabels from '../../Assets/citizenshipFilterFormControlLabels';
import type { CitizenLabels } from '../../Assets/citizenshipFilterFormControlLabels';
import './CitizenshipPopover.css';

export const citizenshipFilterOperators: GridFilterOperator[] = [
{
Expand Down Expand Up @@ -39,49 +41,126 @@ const CitizenshipPopover = ({
citizenshipFilterIsChecked,
setCitizenshipFilterIsChecked,
}: CitizenshipPopoverProps) => {
const hasAtLeastOneCitizenshipFilter = (currentCitizenshipFilters: Record<CitizenLabels, boolean>) => {
const citizenshipFilterValues = Object.values(currentCitizenshipFilters);

return citizenshipFilterValues.some((citizenshipFilterValue) => {
return citizenshipFilterValue === true;
});
};

const handleFilterSelect = (citizenshipType: CitizenLabels) => {
const isChecked = citizenshipFilterIsChecked[citizenshipType];

const updatedCitizenshipFilterIsChecked: Record<CitizenLabels, boolean> = {
let updatedCitizenshipFilterIsChecked: Record<CitizenLabels, boolean> = {
...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];
});

updateFilter({
name: 'citizen',
filter: {
id: 1,
columnField: 'citizenship',
operatorValue: 'customCitizenshipOperator',
value: selectedCitizenshipFilters,
},
});
//update the MUI filter that is being passed to the citizenship column
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'],
},
});
}

//update citizenshipFilterIsChecked state
setCitizenshipFilterIsChecked(updatedCitizenshipFilterIsChecked);
};

const typedCitizenshipFilterIsChecked = Object.keys(citizenshipFilterIsChecked) as CitizenLabels[];
const citizenshipCheckboxFilters = typedCitizenshipFilterIsChecked.map((citizenshipType) => {
return (
<FormControlLabel
key={citizenshipType}
className="popover"
label={citizenshipFilterFormControlLabels[citizenshipType]}
control={
<Checkbox
checked={citizenshipFilterIsChecked[citizenshipType]}
onChange={() => handleFilterSelect(citizenshipType)}
/>
}
/>
);
});

return <Stack>{citizenshipCheckboxFilters}</Stack>;

const renderMainAndSubFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
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 (
<FormControlLabel
key={citizenshipType}
className={isGreenCardSubCitizenshipType ? 'gc-subcitizen-indentation' : ''}
label={citizenshipFilterFormControlLabels[citizenshipType]}
control={
<Checkbox
checked={citizenshipFilters[citizenshipType]}
onChange={() => handleFilterSelect(citizenshipType)}
/>
}
/>
);
});
};

const renderMainFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
//green_card is false
const initialThreeFilters: CitizenLabels[] = ['non_citizen', 'green_card', 'refugee'];
return initialThreeFilters.map((initialFilter) => {
return (
<FormControlLabel
key={initialFilter}
label={citizenshipFilterFormControlLabels[initialFilter]}
control={
<Checkbox checked={citizenshipFilters[initialFilter]} onChange={() => handleFilterSelect(initialFilter)} />
}
/>
);
});
};

const renderCitizenshipFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
if (citizenshipFilters.green_card) {
return renderMainAndSubFilters(citizenshipFilters);
} else {
return renderMainFilters(citizenshipFilters);
}
};

return (
<Stack sx={{ padding: '0.5rem', gap: '0.25rem', ml: '0.5rem' }}>
<Stack sx={{ color: '#000000', fontWeight: 500, mt: '.5rem' }}>
<FormattedMessage id="citizenshipPopover.showBenefits" defaultMessage="Show benefits available to:" />
</Stack>
<Stack>{renderCitizenshipFilters(citizenshipFilterIsChecked)}</Stack>
</Stack>
);
};

export default CitizenshipPopover;
3 changes: 1 addition & 2 deletions src/Components/FilterSection/FilterSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,12 @@ const FilterSection = ({
//this resets the radio buttons
setCitizenshipFilterIsChecked({
non_citizen: false,
citizen: true,
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');
Expand Down
Loading

0 comments on commit 3bf0cdb

Please sign in to comment.