Skip to content

Commit

Permalink
Remove dependency on store activeMetricKey and activeSystem and use p…
Browse files Browse the repository at this point in the history 
…arams
  • Loading branch information
Mahmoud authored and Mahmoud committed Nov 29, 2022
1 parent 42aa6b6 commit 3d4766d
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 47 deletions.
45 changes: 37 additions & 8 deletions publisher/src/components/MetricConfiguration/RaceEthnicitiesForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import React from "react";

import { useStore } from "../../stores";
import { BinaryRadioButton } from "../Forms";
import { useSettingsSearchParams } from "../Settings";
import {
Header,
Race,
Expand All @@ -38,13 +39,21 @@ import {
} from ".";

export const RaceEthnicitiesForm = observer(() => {
const [settingsSearchParams] = useSettingsSearchParams();
const { metricConfigStore } = useStore();
const {
ethnicitiesByRace,
getEthnicitiesByRace,
updateAllRaceEthnicitiesToDefaultState,
updateRaceDimensions,
saveMetricSettings,
} = metricConfigStore;
const { system: systemSearchParam, metric: metricSearchParam } =
settingsSearchParams;
const ethnicitiesByRace =
(systemSearchParam &&
metricSearchParam &&
getEthnicitiesByRace(systemSearchParam, metricSearchParam)) ||
{};
const ethnicitiesByRaceArray = Object.entries(ethnicitiesByRace);

const canSpecifyEthnicity =
Expand Down Expand Up @@ -107,10 +116,13 @@ export const RaceEthnicitiesForm = observer(() => {
value="yes"
checked={canSpecifyEthnicity}
onChange={() => {
if (!systemSearchParam || !metricSearchParam) return;
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"CAN_SPECIFY_ETHNICITY",
raceEthnicityGridStates
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
);
saveMetricSettings(updatedDimensions);
}}
Expand All @@ -123,10 +135,13 @@ export const RaceEthnicitiesForm = observer(() => {
value="no"
checked={!canSpecifyEthnicity}
onChange={() => {
if (!systemSearchParam || !metricSearchParam) return;
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_AS_RACE",
raceEthnicityGridStates
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
);
saveMetricSettings(updatedDimensions);
}}
Expand All @@ -151,10 +166,13 @@ export const RaceEthnicitiesForm = observer(() => {
<RaceSelectionButton
selected={!specifiesHispanicAsRace}
onClick={() => {
if (!systemSearchParam || !metricSearchParam) return;
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_NOT_SPECIFIED",
raceEthnicityGridStates
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
);
saveMetricSettings(updatedDimensions);
}}
Expand All @@ -164,10 +182,13 @@ export const RaceEthnicitiesForm = observer(() => {
<RaceSelectionButton
selected={specifiesHispanicAsRace}
onClick={() => {
if (!systemSearchParam || !metricSearchParam) return;
const updatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_AS_RACE",
raceEthnicityGridStates
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
);
saveMetricSettings(updatedDimensions);
}}
Expand All @@ -191,6 +212,7 @@ export const RaceEthnicitiesForm = observer(() => {
<RaceSelectionButton
selected={!raceEnabled}
onClick={() => {
if (!systemSearchParam || !metricSearchParam) return;
let switchedGridStateUpdatedDimensions;
/**
* When Unknown Race is disabled in NO_ETHNICITY_HISPANIC_AS_RACE state, we automatically switch
Expand All @@ -205,15 +227,19 @@ export const RaceEthnicitiesForm = observer(() => {
switchedGridStateUpdatedDimensions =
updateAllRaceEthnicitiesToDefaultState(
"NO_ETHNICITY_HISPANIC_NOT_SPECIFIED",
raceEthnicityGridStates
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
);
}

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

if (switchedGridStateUpdatedDimensions) {
Expand All @@ -233,11 +259,14 @@ export const RaceEthnicitiesForm = observer(() => {
<RaceSelectionButton
selected={raceEnabled}
onClick={() => {
if (!systemSearchParam || !metricSearchParam) return;
const updatedDimensions = updateRaceDimensions(
race,
true,
currentState,
raceEthnicityGridStates
raceEthnicityGridStates,
systemSearchParam,
metricSearchParam
);
saveMetricSettings(updatedDimensions);
}}
Expand Down
12 changes: 11 additions & 1 deletion publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import React from "react";

import { useStore } from "../../stores";
import { ReactComponent as RightArrowIcon } from "../assets/right-arrow.svg";
import { useSettingsSearchParams } from "../Settings";
import {
CalloutBox,
Description,
Expand All @@ -40,8 +41,17 @@ export const RaceEthnicitiesGrid: React.FC<{
disaggregationEnabled: boolean;
onClick: () => void;
}> = observer(({ disaggregationEnabled, onClick }) => {
const [settingsSearchParams] = useSettingsSearchParams();
const { metricConfigStore } = useStore();
const { ethnicitiesByRace } = metricConfigStore;
const { getEthnicitiesByRace } = metricConfigStore;

const { system: systemSearchParam, metric: metricSearchParam } =
settingsSearchParams;
const ethnicitiesByRace =
(systemSearchParam &&
metricSearchParam &&
getEthnicitiesByRace(systemSearchParam, metricSearchParam)) ||
{};

return (
<RaceEthnicitiesBreakdownContainer
Expand Down
75 changes: 37 additions & 38 deletions publisher/src/stores/MetricConfigStore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@ class MetricConfigStore {

api: API;

activeSystem: AgencySystems | undefined;

activeMetricKey: string | undefined;

metrics: {
[systemMetricKey: string]: {
enabled?: boolean;
Expand Down Expand Up @@ -125,8 +121,6 @@ class MetricConfigStore {
this.api = api;
this.userStore = userStore;
this.metrics = {};
this.activeSystem = undefined;
this.activeMetricKey = undefined;
this.metricDefinitionSettings = {};
this.disaggregations = {};
this.dimensions = {};
Expand Down Expand Up @@ -676,12 +670,10 @@ class MetricConfigStore {
};
};

get ethnicitiesByRace() {
if (!this.activeSystem || !this.activeMetricKey) return {};

getEthnicitiesByRace = (system: AgencySystems, metricKey: string) => {
const systemMetricKey = MetricConfigStore.getSystemMetricKey(
this.activeSystem,
this.activeMetricKey
system,
metricKey
);
const raceEthnicitiesDimensions =
this.dimensions[systemMetricKey][RACE_ETHNICITY_DISAGGREGATION_KEY];
Expand All @@ -705,19 +697,23 @@ class MetricConfigStore {
);

return ethnicitiesByRaceMap || {};
}
};

updateAllRaceEthnicitiesToDefaultState = (
state: StateKeys,
gridStates: RaceEthnicitiesGridStates
gridStates: RaceEthnicitiesGridStates,
system: AgencySystems,
metricKey: string
): UpdatedDisaggregation => {
const ethnicitiesByRace = this.getEthnicitiesByRace(system, metricKey);
const systemMetricKey = MetricConfigStore.getSystemMetricKey(
this.activeSystem as AgencySystems,
this.activeMetricKey as string
system,
metricKey
);

const unknownRaceDisabled = !Object.values(ethnicitiesByRace.Unknown).find(
(ethnicity) => ethnicity.enabled
);
const unknownRaceDisabled = !Object.values(
this.ethnicitiesByRace.Unknown
).find((ethnicity) => ethnicity.enabled);
let sanitizedState =
state === "NO_ETHNICITY_HISPANIC_AS_RACE" && unknownRaceDisabled
? "NO_ETHNICITY_HISPANIC_NOT_SPECIFIED"
Expand All @@ -729,16 +725,16 @@ class MetricConfigStore {
* re-enable the Unknown Race dimensions for the NO_ETHNICITY_HISPANIC_AS_RACE state.
*/
if (unknownRaceDisabled && state === "NO_ETHNICITY_HISPANIC_AS_RACE") {
this.ethnicitiesByRace.Unknown.Hispanic.enabled = true;
this.ethnicitiesByRace.Unknown["Not Hispanic"].enabled = true;
ethnicitiesByRace.Unknown.Hispanic.enabled = true;
ethnicitiesByRace.Unknown["Not Hispanic"].enabled = true;
updatedDimensions.push(
...[
{
...this.ethnicitiesByRace.Unknown.Hispanic,
...ethnicitiesByRace.Unknown.Hispanic,
enabled: true,
},
{
...this.ethnicitiesByRace.Unknown["Not Hispanic"],
...ethnicitiesByRace.Unknown["Not Hispanic"],
enabled: true,
},
]
Expand All @@ -747,10 +743,10 @@ class MetricConfigStore {
}

/** Update dimensions to match the specified default grid state */
Object.keys(this.ethnicitiesByRace).forEach((race) => {
Object.keys(ethnicitiesByRace).forEach((race) => {
const raceIsEnabled = Boolean(
ethnicities.find(
(ethnicity) => this.ethnicitiesByRace[race][ethnicity].enabled
(ethnicity) => ethnicitiesByRace[race][ethnicity].enabled
)
);
const disaggregationIsEnabled =
Expand All @@ -762,29 +758,29 @@ class MetricConfigStore {

ethnicities.forEach((ethnicity) => {
if (
this.ethnicitiesByRace[race][ethnicity].enabled ===
ethnicitiesByRace[race][ethnicity].enabled ===
gridStates[sanitizedState][race][ethnicity]
)
return;

this.updateDimensionEnabledStatus(
this.activeSystem as AgencySystems,
this.activeMetricKey as string,
system,
metricKey,
RACE_ETHNICITY_DISAGGREGATION_KEY,
this.ethnicitiesByRace[race][ethnicity].key,
ethnicitiesByRace[race][ethnicity].key,
gridStates[sanitizedState][race][ethnicity]
);

updatedDimensions.push({
...this.ethnicitiesByRace[race][ethnicity],
...ethnicitiesByRace[race][ethnicity],
enabled: gridStates[sanitizedState][race][ethnicity],
});
});
});

/** Return array of dimensions that were updated */
return {
key: this.activeMetricKey as string,
key: metricKey,
disaggregations: [
{
key: RACE_ETHNICITY_DISAGGREGATION_KEY,
Expand All @@ -798,35 +794,38 @@ class MetricConfigStore {
race: string,
enabled: boolean,
state: StateKeys,
gridStates: RaceEthnicitiesGridStates
gridStates: RaceEthnicitiesGridStates,
system: AgencySystems,
metricKey: string
): UpdatedDisaggregation => {
const ethnicitiesByRace = this.getEthnicitiesByRace(system, metricKey);
const updatedDimensions = [] as UpdatedDimension[];

ethnicities.forEach((ethnicity) => {
/** No update if intended update matches the current state (e.g. enabling an already enabled dimension) */
if (this.ethnicitiesByRace[race][ethnicity].enabled === enabled) return;
if (ethnicitiesByRace[race][ethnicity].enabled === enabled) return;
/** No update if enabling a disabled dimension that is not available to the user to edit (determined by current grid state) */
if (
enabled &&
this.ethnicitiesByRace[race][ethnicity].enabled ===
ethnicitiesByRace[race][ethnicity].enabled ===
gridStates[state][race][ethnicity]
)
return;

this.updateDimensionEnabledStatus(
this.activeSystem as AgencySystems,
this.activeMetricKey as string,
system,
metricKey,
RACE_ETHNICITY_DISAGGREGATION_KEY,
this.ethnicitiesByRace[race][ethnicity].key,
ethnicitiesByRace[race][ethnicity].key,
enabled
);

updatedDimensions.push(this.ethnicitiesByRace[race][ethnicity]);
updatedDimensions.push(ethnicitiesByRace[race][ethnicity]);
});

/** Return array of dimensions that were updated */
return {
key: this.activeMetricKey as string,
key: metricKey,
disaggregations: [
{
key: RACE_ETHNICITY_DISAGGREGATION_KEY,
Expand Down

0 comments on commit 3d4766d

Please sign in to comment.