Skip to content

Commit

Permalink
Instead of saving deltas - save all 24 dimensions
Browse files Browse the repository at this point in the history 
Further optimize by using inputs and onChange to prevent multiple calls when clicking on the active option

Debounce saving

Extend binary input radio buttons to mini buttons
  • Loading branch information
Mahmoud authored and Mahmoud committed Nov 29, 2022
1 parent a145288 commit 28ceb3a
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 111 deletions.
43 changes: 39 additions & 4 deletions publisher/src/components/Forms/BinaryRadioButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
typography,
} from "@justice-counts/common/components/GlobalStyles";
import React, { InputHTMLAttributes } from "react";
import styled from "styled-components/macro";
import styled, { css } from "styled-components/macro";

export const BinaryRadioGroupContainer = styled.div`
display: flex;
Expand All @@ -43,14 +43,30 @@ export const BinaryRadioGroupQuestion = styled.div`
color: ${palette.solid.darkgrey};
`;

export const RadioButtonWrapper = styled.div`
export const RadioButtonWrapper = styled.div<{ lastOptionBlue?: boolean }>`
display: flex;
flex: 1 1 0;
margin: 15px 0 0 0;
&:first-child {
margin: 15px 10px 0 0;
}
${({ lastOptionBlue }) =>
lastOptionBlue &&
css`
margin: 0;
&:first-child {
margin: 0px 10px 0 0;
}
&:first-child input:checked + label {
background-color: ${palette.highlight.grey9};
border-color: unset;
color: ${palette.solid.white};
}
`}
`;

export const RadioButtonElement = styled.input<{
Expand Down Expand Up @@ -83,6 +99,7 @@ export const RadioButtonElement = styled.input<{

export const RadioButtonLabel = styled.label<{
disabled?: boolean;
buttonSize?: string;
}>`
${typography.sizeCSS.medium}
width: 100%;
Expand All @@ -100,6 +117,16 @@ export const RadioButtonLabel = styled.label<{
background-color: ${({ disabled }) =>
disabled ? "none" : palette.highlight.grey2};
}
${({ buttonSize }) =>
buttonSize === "small" &&
css`
${typography.sizeCSS.normal}
width: unset;
height: unset;
min-width: 60px;
padding: 9px 16px;
`}
`;

export const BinaryRadioGroupClearButton = styled.div<{
Expand All @@ -119,6 +146,8 @@ interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
label: string;
context?: string;
metricKey?: string;
buttonSize?: string;
lastOptionBlue?: boolean;
}

/** Single radio button in the style of a regular button */
Expand All @@ -127,16 +156,22 @@ export const BinaryRadioButton: React.FC<RadioButtonProps> = ({
context,
metricKey,
disabled,
buttonSize,
lastOptionBlue,
...props
}): JSX.Element => {
return (
<RadioButtonWrapper>
<RadioButtonWrapper lastOptionBlue={lastOptionBlue}>
<RadioButtonElement
disabled={disabled}
{...props}
data-metric-key={metricKey}
/>
<RadioButtonLabel disabled={disabled} htmlFor={props.id}>
<RadioButtonLabel
disabled={disabled}
buttonSize={buttonSize}
htmlFor={props.id}
>
{label}
</RadioButtonLabel>
</RadioButtonWrapper>
Expand Down
174 changes: 94 additions & 80 deletions publisher/src/components/MetricConfiguration/RaceEthnicitiesForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

import { debounce } from "lodash";
import { observer } from "mobx-react-lite";
import React from "react";
import React, { useRef } from "react";

import { useStore } from "../../stores";
import { BinaryRadioButton } from "../Forms";
Expand All @@ -31,7 +32,6 @@ import {
RaceEthnicitiesTitle,
raceEthnicityGridStates,
RaceSelection,
RaceSelectionButton,
RadioButtonGroupWrapper,
SpecifyEthnicityWrapper,
Subheader,
Expand Down Expand Up @@ -79,6 +79,8 @@ export const RaceEthnicitiesForm = observer(() => {

const currentState = determineCurrentState();

const debouncedSave = useRef(debounce(saveMetricSettings, 1000)).current;

return (
<RaceEthnicitiesContainer>
<RaceEthnicitiesDisplay>
Expand Down Expand Up @@ -112,7 +114,7 @@ export const RaceEthnicitiesForm = observer(() => {
"CAN_SPECIFY_ETHNICITY",
raceEthnicityGridStates
);
saveMetricSettings(updatedDimensions);
debouncedSave(updatedDimensions);
}}
/>
<BinaryRadioButton
Expand All @@ -128,7 +130,7 @@ export const RaceEthnicitiesForm = observer(() => {
"NO_ETHNICITY_HISPANIC_AS_RACE",
raceEthnicityGridStates
);
saveMetricSettings(updatedDimensions);
debouncedSave(updatedDimensions);
}}
/>
</RadioButtonGroupWrapper>
Expand All @@ -148,32 +150,44 @@ export const RaceEthnicitiesForm = observer(() => {
<Race>
<RaceDisplayName>Hispanic/Latino</RaceDisplayName>
<RaceSelection>
<RaceSelectionButton
selected={!specifiesHispanicAsRace}
onClick={() => {
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_NOT_SPECIFIED",
raceEthnicityGridStates
);
saveMetricSettings(updatedDimensions);
}}
>
No
</RaceSelectionButton>
<RaceSelectionButton
selected={specifiesHispanicAsRace}
onClick={() => {
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_AS_RACE",
raceEthnicityGridStates
);
saveMetricSettings(updatedDimensions);
}}
>
Yes
</RaceSelectionButton>
<RadioButtonGroupWrapper>
<BinaryRadioButton
type="radio"
id="hispanic-latino-no"
name="hispanic-latino"
label="No"
value="no"
checked={!specifiesHispanicAsRace}
lastOptionBlue
buttonSize="small"
onChange={() => {
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_NOT_SPECIFIED",
raceEthnicityGridStates
);
debouncedSave(updatedDimensions);
}}
/>
<BinaryRadioButton
type="radio"
id="hispanic-latino-yes"
name="hispanic-latino"
label="Yes"
value="yes"
checked={specifiesHispanicAsRace}
lastOptionBlue
buttonSize="small"
onChange={() => {
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_AS_RACE",
raceEthnicityGridStates
);
debouncedSave(updatedDimensions);
}}
/>
</RadioButtonGroupWrapper>
</RaceSelection>
</Race>
)}
Expand All @@ -188,62 +202,62 @@ export const RaceEthnicitiesForm = observer(() => {
<Race key={race}>
<RaceDisplayName>{race}</RaceDisplayName>
<RaceSelection>
<RaceSelectionButton
selected={!raceEnabled}
onClick={() => {
let switchedGridStateUpdatedDimensions;
/**
* When Unknown Race is disabled in NO_ETHNICITY_HISPANIC_AS_RACE state, we automatically switch
* to the NO_ETHNICITY_HISPANIC_NOT_SPECIFIED state because the Unknown Race (Hispanic/Latino Ethnicity)
* dimension is the only dimension an agency can specify their numbers for Hispanic/Latino as a Race (while
* in the NO_ETHNICITY_HISPANIC_AS_RACE state).
*/
if (
race === "Unknown" &&
currentState === "NO_ETHNICITY_HISPANIC_AS_RACE"
) {
switchedGridStateUpdatedDimensions =
<RadioButtonGroupWrapper>
<BinaryRadioButton
type="radio"
id={`${race}-no`}
name={`${race}`}
label="No"
value="no"
checked={!raceEnabled}
lastOptionBlue
buttonSize="small"
onChange={() => {
/**
* When Unknown Race is disabled in NO_ETHNICITY_HISPANIC_AS_RACE state, we automatically switch
* to the NO_ETHNICITY_HISPANIC_NOT_SPECIFIED state because the Unknown Race (Hispanic/Latino Ethnicity)
* dimension is the only dimension an agency can specify their numbers for Hispanic/Latino as a Race (while
* in the NO_ETHNICITY_HISPANIC_AS_RACE state).
*/
if (
race === "Unknown" &&
currentState === "NO_ETHNICITY_HISPANIC_AS_RACE"
) {
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_NOT_SPECIFIED",
raceEthnicityGridStates
);
}

const updatedDimensions = updateRaceDimensions(
race,
false,
currentState,
raceEthnicityGridStates
);

if (switchedGridStateUpdatedDimensions) {
/** Add the updated dimension from disabling the Unknown race to the switchedGridStateUpdatedDimensions */
switchedGridStateUpdatedDimensions.disaggregations[0].dimensions.push(
...updatedDimensions.disaggregations[0].dimensions
}

const updatedDimensions = updateRaceDimensions(
race,
false,
currentState,
raceEthnicityGridStates
);
return saveMetricSettings(
switchedGridStateUpdatedDimensions
debouncedSave(updatedDimensions);
}}
/>
<BinaryRadioButton
type="radio"
id={`${race}-yes`}
name={`${race}`}
label="Yes"
value="yes"
checked={raceEnabled}
lastOptionBlue
buttonSize="small"
onChange={() => {
const updatedDimensions = updateRaceDimensions(
race,
true,
currentState,
raceEthnicityGridStates
);
}
saveMetricSettings(updatedDimensions);
}}
>
No
</RaceSelectionButton>
<RaceSelectionButton
selected={raceEnabled}
onClick={() => {
const updatedDimensions = updateRaceDimensions(
race,
true,
currentState,
raceEthnicityGridStates
);
saveMetricSettings(updatedDimensions);
}}
>
Yes
</RaceSelectionButton>
debouncedSave(updatedDimensions);
}}
/>
</RadioButtonGroupWrapper>
</RaceSelection>
</Race>
);
Expand Down
Loading

0 comments on commit 28ceb3a

Please sign in to comment.