Pass onClick instead of state handler and keys

Recidiviz · Nov 29, 2022 · 3d732e0 · 3d732e0
1 parent f965c14
commit 3d732e0
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 44 deletions.
diff --git a/publisher/src/components/MetricConfiguration/Configuration.tsx b/publisher/src/components/MetricConfiguration/Configuration.tsx
@@ -236,6 +236,7 @@ export const Configuration: React.FC<MetricConfigurationProps> = observer(
                       RACE_ETHNICITY_DISAGGREGATION_KEY
                     ]?.enabled
                   )}
+                  onClick={() => setActiveDimensionKey(activeDimensionKeys[0])}
                 />
               ) : (
                 activeDimensionKeys?.map((dimensionKey) => {

diff --git a/publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx b/publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx
@@ -36,50 +36,52 @@ import {
   RaceEthnicitiesTable,
 } from ".";
 
-export const RaceEthnicitiesGrid: React.FC<{ disaggregationEnabled: boolean }> =
-  observer(({ disaggregationEnabled }) => {
-    const { metricConfigStore } = useStore();
-    const { ethnicitiesByRace } = metricConfigStore;
+export const RaceEthnicitiesGrid: React.FC<{
+  disaggregationEnabled: boolean;
+  onClick: () => void;
+}> = observer(({ disaggregationEnabled, onClick }) => {
+  const { metricConfigStore } = useStore();
+  const { ethnicitiesByRace } = metricConfigStore;
 
-    return (
-      <RaceEthnicitiesBreakdownContainer
-        disaggregationEnabled={disaggregationEnabled}
-      >
-        <CalloutBox>
-          <Description>
-            Answer the questions on the <span>Race and Ethnicity</span> form;
-            the grid below will reflect your responses.
-          </Description>
-          <RightArrowIcon />
-        </CalloutBox>
+  return (
+    <RaceEthnicitiesBreakdownContainer
+      disaggregationEnabled={disaggregationEnabled}
+    >
+      <CalloutBox onClick={onClick}>
+        <Description>
+          Answer the questions on the <span>Race and Ethnicity</span> form; the
+          grid below will reflect your responses.
+        </Description>
+        <RightArrowIcon />
+      </CalloutBox>
 
-        <GridHeaderContainer>
-          <GridRaceHeader>Race</GridRaceHeader>
-          <GridEthnicitiesHeader>
-            <EthnicityLabel>
-              Ethnicity <RightArrowIcon />
-            </EthnicityLabel>
-            <Ethnicity>Hispanic</Ethnicity>
-            <Ethnicity>Not Hispanic</Ethnicity>
-            <Ethnicity>Unknown</Ethnicity>
-          </GridEthnicitiesHeader>
-        </GridHeaderContainer>
+      <GridHeaderContainer>
+        <GridRaceHeader>Race</GridRaceHeader>
+        <GridEthnicitiesHeader>
+          <EthnicityLabel>
+            Ethnicity <RightArrowIcon />
+          </EthnicityLabel>
+          <Ethnicity>Hispanic</Ethnicity>
+          <Ethnicity>Not Hispanic</Ethnicity>
+          <Ethnicity>Unknown</Ethnicity>
+        </GridEthnicitiesHeader>
+      </GridHeaderContainer>
 
-        <RaceEthnicitiesTable>
-          {Object.entries(ethnicitiesByRace).map(([race, ethnicities]) => (
-            <RaceEthnicitiesRow key={race}>
-              <RaceCell>{race}</RaceCell>
-              <EthnicitiesRow>
-                {Object.values(ethnicities).map((ethnicity) => (
-                  <EthnicityCell
-                    key={ethnicity.key}
-                    enabled={ethnicity.enabled}
-                  />
-                ))}
-              </EthnicitiesRow>
-            </RaceEthnicitiesRow>
-          ))}
-        </RaceEthnicitiesTable>
-      </RaceEthnicitiesBreakdownContainer>
-    );
-  });
+      <RaceEthnicitiesTable>
+        {Object.entries(ethnicitiesByRace).map(([race, ethnicities]) => (
+          <RaceEthnicitiesRow key={race}>
+            <RaceCell>{race}</RaceCell>
+            <EthnicitiesRow>
+              {Object.values(ethnicities).map((ethnicity) => (
+                <EthnicityCell
+                  key={ethnicity.key}
+                  enabled={ethnicity.enabled}
+                />
+              ))}
+            </EthnicitiesRow>
+          </RaceEthnicitiesRow>
+        ))}
+      </RaceEthnicitiesTable>
+    </RaceEthnicitiesBreakdownContainer>
+  );
+});