Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Publisher] Add "Other" textbox to race breakdown #1557

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+80 −7
Open

[Publisher] Add "Other" textbox to race breakdown #1557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8387bba
Add Other textbox to race breakdown
nasaownsky Oct 17, 2024
3094f81
Merge branch 'main' of https://github.com/Recidiviz/justice-counts in…
nasaownsky Dec 10, 2024
15664f4
Update other textbox logic
nasaownsky Dec 10, 2024
915cadf
Handle Other race checking behavior
nasaownsky Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 65 additions & 6 deletions publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
} from "@justice-counts/common/components/RadioButton";
import { Tooltip } from "@justice-counts/common/components/Tooltip";
import { observer } from "mobx-react-lite";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

import { useStore } from "../../stores";
Expand Down Expand Up @@ -118,12 +118,56 @@ function RaceEthnicitiesModalForm({
}
: undefined;

const currentOtherDescription =
Object.values(
Object.entries(ethnicitiesByRace).find(
([race]) => race === "Other"
)?.[1] || {}
).find((ethnicity) => {
if (!canSpecifyEthnicity && !specifiesHispanicAsRace)
return ethnicity.key === "Other / Unknown Ethnicity";

if (!canSpecifyEthnicity && specifiesHispanicAsRace)
return ethnicity.key === "Other / Not Hispanic or Latino";

return ethnicity.key === "Other / Hispanic or Latino";
})?.other_description || "";

const [otherDescription, setOtherDescription] = useState(
currentOtherDescription
);
const [isOtherChecked, setOtherChecked] = useState(Boolean(otherDescription));

useEffect(() => {
setRacesStatusObject((prev) => ({
...prev,
Other: Boolean(otherDescription),
}));
}, [otherDescription]);

const raceEthnicityOptions: CheckboxOption[] = [
...(hispanicOrLatinoOption ? [hispanicOrLatinoOption] : []),
...Object.entries(racesStatusObject).map(([race, enabled]) => {
const disabledUnknownRace =
race === "Unknown" && specifiesHispanicAsRace && !canSpecifyEthnicity;

if (race === "Other") {
const otherDescriptionParams = {
isEnabled: race === "Other" && isOtherChecked,
placeholder:
"Please describe additional definition/clarification of the 'Other' selection.",
value: currentOtherDescription,
onChange: (value: string) => setOtherDescription(value),
};

return {
key: race,
label: race,
checked: Boolean(otherDescription),
otherDescription: otherDescriptionParams,
};
}

return {
key: race,
label: race,
Expand Down Expand Up @@ -160,7 +204,8 @@ function RaceEthnicitiesModalForm({
currentState,
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
metricSearchParam,
otherDescription
);
saveMetricSettings(updatedDimensions, agencyId);
};
Expand Down Expand Up @@ -210,10 +255,24 @@ function RaceEthnicitiesModalForm({
<CheckboxOptions
options={raceEthnicityOptions}
onChange={({ key, checked }) => {
setRacesStatusObject({
...racesStatusObject,
[key]: !checked,
});
if (key === "Other") {
setOtherChecked(!checked);

if (checked) {
// Clear otherDescription if "Other" is unchecked
setOtherDescription("");
}

setRacesStatusObject((prev) => ({
...prev,
Other: Boolean(otherDescription),
}));
} else {
setRacesStatusObject({
...racesStatusObject,
[key]: !checked,
});
}
}}
/>
<Tooltip
Expand Down
2 changes: 2 additions & 0 deletions publisher/src/components/MetricsConfiguration/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export type Dimensions = {
enabled?: boolean | null;
label?: string;
description?: string;
other_description?: string;
key?: string;
race?: Races;
ethnicity?: Ethnicities;
Expand All @@ -101,6 +102,7 @@ export type UpdatedDimension = {
enabled: boolean;
race: Races;
ethnicity: Ethnicities;
other_description?: string;
};

export type UpdatedDisaggregation = {
Expand Down
14 changes: 13 additions & 1 deletion publisher/src/stores/MetricConfigStore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1149,7 +1149,8 @@ class MetricConfigStore {
state: StateKeys,
gridStates: RaceEthnicitiesGridStates,
system: AgencySystem,
metricKey: string
metricKey: string,
otherDescription?: string
): UpdatedDisaggregation => {
const ethnicitiesByRace = this.getEthnicitiesByRace(system, metricKey);

Expand Down Expand Up @@ -1192,6 +1193,17 @@ class MetricConfigStore {
raceEthnicitiesDimensions &&
(Object.values(raceEthnicitiesDimensions) as UpdatedDimension[]);

if (otherDescription !== undefined) {
dimensions
.filter((dimension) => dimension.race === "Other")
.forEach((otherDimension) => {
const updatedDimension = otherDimension;
updatedDimension.other_description = otherDimension.enabled
? otherDescription
: "";
});
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me think about this section a bit more - I think it's right, but just want to make sure it's mapping to the correct Other/Ethnicity.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK - I took a closer look. This is almost there -- so basically there are 3 "Other" fields in the background of this feature:

  1. "Other" race + "Unknown Ethnicity"
  2. "Other" race + "Not Hispanic or Latino" ethnicity
  3. "Other" race + "Hispanic or Latino" ethnicity

What gets updated should match the grid that's displayed in the UI. So, when a user is in the...

  • "Unknown Ethnicity" state (they answered "No" for being able to record an individual's ethnicity, and "Hispanic Or Latino" is NOT selected) - then it should update the "Other / Unknown Ethnicity"
  • "Hispanic or Latino" state (they answered "No" for being able to record an individual's ethnicity, and "Hispanic Or Latino" IS SELECTED) - then it should update the "Other / Not Hispanic or Latino"
  • "Not Hispanic or Latino" state (they answered "Yes" for being able to record an individual's ethnicity) - then it should update all 3 - "Other / Unknown Ethnicity" AND "Other / Not Hispanic or Latino" AND "Other / Hispanic or Latino"

LMK if this is confusing (because it is) and I can give some more context as to why these fields work this way! But the TLDR is - the other_description should be set matching the blue dots in the UI depending on the state we're in if it's easier to think about it this way?


/** Return an object w/ all dimensions in the desired backend data structure for saving purposes */
return {
key: metricKey,
Expand Down
Loading