From 76b77ad65b60d64d9f5d7c626828333287ca7fc5 Mon Sep 17 00:00:00 2001
From: Eric McGarry <46828798+mcgarrye@users.noreply.github.com>
Date: Fri, 31 May 2024 10:30:10 -0400
Subject: [PATCH] fix: Demographics Race Field Render Issue (#4102)

* fix: use current values for race fields

* fix: remove unneeded dependencies

* fix: decoupling and simplifying
---
 shared-helpers/src/utilities/formKeys.ts      | 19 +++++++++
 .../sections/FormDemographics.tsx             | 39 +++++++----------
 .../applications/review/demographics.tsx      | 42 +++++++++++--------
 3 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/shared-helpers/src/utilities/formKeys.ts b/shared-helpers/src/utilities/formKeys.ts
index 8d62bb062f..b4f76b8dd1 100644
--- a/shared-helpers/src/utilities/formKeys.ts
+++ b/shared-helpers/src/utilities/formKeys.ts
@@ -191,6 +191,25 @@ export const raceKeys: subCheckboxes = {
   declineToRespond: [],
 }
 
+export const isKeyIncluded = (
+  searchKey: string,
+  originalValues: Array<string> | undefined
+): boolean => {
+  let keyExists = false
+  originalValues?.forEach((key) => {
+    if (key.includes(searchKey)) {
+      keyExists = true
+    }
+  })
+  return keyExists
+}
+
+// Get the value of a field that is storing a custom value, i.e. "otherAsian: Custom Race Input"
+export const getCustomValue = (subKey: string, formValues: Array<string> | undefined): string => {
+  const customValues = formValues?.find((value: string) => value.split(":")[0] === subKey)
+  return customValues?.length ? customValues.split(":")[1]?.substring(1) : ""
+}
+
 export const howDidYouHear = [
   {
     id: "jurisdictionWebsite",
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx
index bd0bacaf09..f4f6d6c49c 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx
@@ -2,7 +2,13 @@ import React, { useMemo } from "react"
 import { useFormContext } from "react-hook-form"
 import { t, Select, FieldGroup } from "@bloom-housing/ui-components"
 import { Grid } from "@bloom-housing/ui-seeds"
-import { ethnicityKeys, raceKeys, howDidYouHear } from "@bloom-housing/shared-helpers"
+import {
+  ethnicityKeys,
+  raceKeys,
+  isKeyIncluded,
+  getCustomValue,
+  howDidYouHear,
+} from "@bloom-housing/shared-helpers"
 import { Demographic } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import SectionWithGrid from "../../../shared/SectionWithGrid"
 
@@ -24,41 +30,24 @@ const FormDemographics = ({ formValues }: FormDemographicsProps) => {
     }))
   }, [register])
 
-  // Does a key exist in a root field or a sub array
-  const isKeyIncluded = (raceKey: string) => {
-    let keyExists = false
-    formValues?.race?.forEach((value) => {
-      if (value.includes(raceKey)) {
-        keyExists = true
-      }
-    })
-    return keyExists
-  }
-
-  // Get the value of a field that is storing a custom value, i.e. "otherAsian: Custom Race Input"
-  const getCustomValue = (subKey: string) => {
-    const customValues = formValues?.race?.filter((value) => value.split(":")[0] === subKey)
-    return customValues?.length ? customValues[0].split(":")[1]?.substring(1) : ""
-  }
-
   const raceOptions = useMemo(() => {
     return Object.keys(raceKeys).map((rootKey) => ({
       id: rootKey,
       label: t(`application.review.demographics.raceOptions.${rootKey}`),
       value: rootKey,
       additionalText: rootKey.indexOf("other") >= 0,
-      defaultChecked: isKeyIncluded(rootKey),
-      defaultText: getCustomValue(rootKey),
+      defaultChecked: isKeyIncluded(rootKey, formValues?.race),
+      defaultText: getCustomValue(rootKey, formValues?.race),
       subFields: raceKeys[rootKey].map((subKey) => ({
         id: subKey,
         label: t(`application.review.demographics.raceOptions.${subKey}`),
         value: subKey,
-        defaultChecked: isKeyIncluded(subKey),
+        defaultChecked: isKeyIncluded(subKey, formValues?.race),
         additionalText: subKey.indexOf("other") >= 0,
-        defaultText: getCustomValue(subKey),
+        defaultText: getCustomValue(subKey, formValues?.race),
       })),
     }))
-  }, [register, isKeyIncluded, getCustomValue])
+  }, [register])
 
   return (
     <>
@@ -72,9 +61,11 @@ const FormDemographics = ({ formValues }: FormDemographicsProps) => {
               type="checkbox"
               register={register}
               groupLabel={t("application.add.race")}
+              strings={{
+                description: "",
+              }}
             />
           </Grid.Cell>
-
           <Grid.Cell>
             <Select
               id="application.demographics.ethnicity"
diff --git a/sites/public/src/pages/applications/review/demographics.tsx b/sites/public/src/pages/applications/review/demographics.tsx
index 285e2e3d64..e846eda8d2 100644
--- a/sites/public/src/pages/applications/review/demographics.tsx
+++ b/sites/public/src/pages/applications/review/demographics.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext, useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 
 import { FieldGroup, Form, Select, t } from "@bloom-housing/ui-components"
@@ -7,6 +7,8 @@ import { MultiselectQuestionsApplicationSectionEnum } from "@bloom-housing/share
 import {
   ethnicityKeys,
   raceKeys,
+  isKeyIncluded,
+  getCustomValue,
   howDidYouHear,
   fieldGroupObjectToArray,
   OnClientSide,
@@ -61,6 +63,25 @@ const ApplicationDemographics = () => {
     }))
   }
 
+  const raceOptions = useMemo(() => {
+    return Object.keys(raceKeys).map((rootKey) => ({
+      id: rootKey,
+      label: t(`application.review.demographics.raceOptions.${rootKey}`),
+      value: rootKey,
+      additionalText: rootKey.indexOf("other") >= 0,
+      defaultChecked: isKeyIncluded(rootKey, application.demographics?.race),
+      defaultText: getCustomValue(rootKey, application.demographics?.race),
+      subFields: raceKeys[rootKey].map((subKey) => ({
+        id: subKey,
+        label: t(`application.review.demographics.raceOptions.${subKey}`),
+        value: subKey,
+        defaultChecked: isKeyIncluded(subKey, application.demographics?.race),
+        additionalText: subKey.indexOf("other") >= 0,
+        defaultText: getCustomValue(subKey, application.demographics?.race),
+      })),
+    }))
+  }, [register])
+
   useEffect(() => {
     pushGtmEvent<PageView>({
       event: "pageView",
@@ -94,26 +115,13 @@ const ApplicationDemographics = () => {
               </legend>
               <FieldGroup
                 name="race"
-                fields={Object.keys(raceKeys).map((rootKey) => ({
-                  id: rootKey,
-                  label: t(`application.review.demographics.raceOptions.${rootKey}`),
-                  value: rootKey,
-                  additionalText: rootKey.indexOf("other") >= 0,
-                  defaultChecked: application[`race-${rootKey}`],
-                  subFields: raceKeys[rootKey].map((subKey) => ({
-                    id: subKey,
-                    label: t(`application.review.demographics.raceOptions.${subKey}`),
-                    value: subKey,
-                    defaultChecked: application[`race-${subKey}`],
-                    additionalText: subKey.indexOf("other") >= 0,
-                  })),
-                }))}
+                fields={raceOptions}
+                type="checkbox"
+                register={register}
                 strings={{
                   description: "",
                 }}
-                type="checkbox"
                 dataTestId={"app-demographics-race"}
-                register={register}
               />
             </fieldset>
             <div className={"pt-4"}>