fix: partners highlight field on backend error (bloom-housing#3448)

* fix: partners highlight field on backend error * fix: community type and disableUnitsAccordion fix * fix: unit type fix for partial units * fix: review comment addressed * fix: phone number fix
housingbayarea · May 17, 2023 · 28f2870 · 28f2870
1 parent 95d181b
commit 28f2870
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 41 deletions.
diff --git a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx
@@ -189,6 +189,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
 
   type FormSubmitAction = "saveNew" | "saveExit" | "save"
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const formatFormData = (data: { [x: string]: any }) => {
     if (data.amiChart?.id) {
       const chart = amiCharts.find((chart) => chart.id === data.amiChart.id)
@@ -343,10 +344,15 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
     if (defaultUnit) {
       setValue("amiChart.id", defaultUnit.amiChart?.id)
       setValue("priorityType.id", defaultUnit.priorityType?.id)
-      setValue("unitType.id", defaultUnit.unitType?.id)
     }
   }, [defaultUnit, setValue])
 
+  useEffect(() => {
+    if (defaultUnit && options.unitTypes) {
+      setValue("unitType.id", defaultUnit.unitType?.id)
+    }
+  }, [defaultUnit, options, setValue])
+
   useEffect(() => {
     if (defaultUnit) {
       if (rentType === "fixed") {

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalEligibility.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalEligibility.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import { t, GridSection, Textarea, GridCell } from "@bloom-housing/ui-components"
-import { fieldMessage } from "../../../../lib/helpers"
+import { fieldHasError, fieldMessage } from "../../../../lib/helpers"
 import { useJurisdiction } from "../../../../lib/hooks"
 
 type AdditionalEligibilityProps = {
@@ -81,7 +81,8 @@ const AdditionalEligibility = (props: AdditionalEligibilityProps) => {
             }
             errorMessage={fieldMessage(errors?.rentalAssistance)}
             inputProps={{
-              onChange: () => clearErrors("rentalAssistance"),
+              onChange: () =>
+                fieldHasError(errors?.rentalAssistance) && clearErrors("rentalAssistance"),
             }}
           />
         </GridCell>

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx
@@ -171,7 +171,8 @@ const BuildingDetails = ({
             )}
             placeholder={t("application.contact.streetAddress")}
             inputProps={{
-              onChange: () => clearErrors("buildingAddress"),
+              onChange: () =>
+                fieldHasError(errors?.buildingAddress?.street) && clearErrors("buildingAddress"),
             }}
             register={register}
           />
@@ -202,7 +203,8 @@ const BuildingDetails = ({
             )}
             placeholder={t("application.contact.city")}
             inputProps={{
-              onChange: () => clearErrors("buildingAddress"),
+              onChange: () =>
+                fieldHasError(errors?.buildingAddress?.city) && clearErrors("buildingAddress"),
             }}
             register={register}
           />
@@ -234,7 +236,8 @@ const BuildingDetails = ({
               options={stateKeys}
               keyPrefix="states"
               inputProps={{
-                onChange: () => clearErrors("buildingAddress"),
+                onChange: () =>
+                  fieldHasError(errors?.buildingAddress?.state) && clearErrors("buildingAddress"),
               }}
             />
           </ViewItem>
@@ -256,7 +259,8 @@ const BuildingDetails = ({
               fieldMessage(errors?.buildingAddress?.zipCode)
             )}
             inputProps={{
-              onChange: () => clearErrors("buildingAddress"),
+              onChange: () =>
+                fieldHasError(errors?.buildingAddress?.zipCode) && clearErrors("buildingAddress"),
             }}
             register={register}
           />

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/CommunityType.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/CommunityType.tsx
@@ -14,9 +14,14 @@ const CommunityType = ({ listing }: CommunityTypeProps) => {
   const formMethods = useFormContext()
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { register, reset } = formMethods
+  const { register, setValue, watch } = formMethods
+
+  const reservedCommunityType = watch("reservedCommunityType.id")
 
   const [options, setOptions] = useState([])
+  const [currentCommunityType, setCurrentCommunityType] = useState(
+    listing?.reservedCommunityType?.id
+  )
 
   const { data: reservedCommunityTypes = [] } = useReservedCommunityTypeList()
 
@@ -25,8 +30,17 @@ const CommunityType = ({ listing }: CommunityTypeProps) => {
       return { ...communityType, name: t(`listings.reservedCommunityTypes.${communityType.name}`) }
     })
     setOptions(["", ...arrayToFormOptions<ReservedCommunityType>(optionsTranslated, "name", "id")])
-    reset()
-  }, [reservedCommunityTypes, reset])
+  }, [reservedCommunityTypes])
+
+  useEffect(() => {
+    setValue("reservedCommunityType.id", currentCommunityType)
+  }, [options, setValue, currentCommunityType])
+
+  useEffect(() => {
+    if (![listing?.reservedCommunityType?.id, undefined, ""].includes(reservedCommunityType)) {
+      setCurrentCommunityType(reservedCommunityType)
+    }
+  }, [reservedCommunityType, listing?.reservedCommunityType?.id])
 
   return (
     <GridSection
@@ -38,16 +52,22 @@ const CommunityType = ({ listing }: CommunityTypeProps) => {
     >
       <GridSection columns={2}>
         <ViewItem label={t("listings.reservedCommunityType")}>
-          <Select
-            id={`reservedCommunityType.id`}
-            name={`reservedCommunityType.id`}
-            label={t("listings.reservedCommunityType")}
-            labelClassName="sr-only"
-            register={register}
-            controlClassName="control"
-            options={options}
-            defaultValue={listing?.reservedCommunityType?.id}
-          />
+          {options && (
+            <Select
+              id={`reservedCommunityType.id`}
+              name={`reservedCommunityType.id`}
+              label={t("listings.reservedCommunityType")}
+              labelClassName="sr-only"
+              register={register}
+              controlClassName="control"
+              options={options}
+              inputProps={{
+                onChange: () => {
+                  setCurrentCommunityType(reservedCommunityType)
+                },
+              }}
+            />
+          )}
         </ViewItem>
       </GridSection>
       <GridSection columns={3}>

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/LeasingAgent.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/LeasingAgent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
 import {
   t,
@@ -20,6 +20,7 @@ const LeasingAgent = () => {
   const { register, control, errors, clearErrors, watch, getValues } = formMethods
 
   const leasingAgentPhoneField: string = watch("leasingAgentPhone")
+  const [phoneField, setPhoneField] = useState(leasingAgentPhoneField)
 
   const getErrorMessage = (fieldKey: string) => {
     if (fieldHasError(errors?.leasingAgentAddress) && !getValues(fieldKey)) {
@@ -28,8 +29,12 @@ const LeasingAgent = () => {
   }
 
   useEffect(() => {
-    clearErrors("leasingAgentPhone")
-  }, [leasingAgentPhoneField, clearErrors])
+    // only clear the leasingAgentPhone if the user has changed the field
+    if (leasingAgentPhoneField && leasingAgentPhoneField !== phoneField) {
+      clearErrors("leasingAgentPhone")
+    }
+    setPhoneField(leasingAgentPhoneField)
+  }, [leasingAgentPhoneField, clearErrors, phoneField])
 
   return (
     <div>

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx
@@ -29,6 +29,7 @@ const ListingIntro = (props: ListingIntroProps) => {
     })),
   ]
   const defaultJurisdiction = props.jurisdictions.length === 1 ? props.jurisdictions[0].id : ""
+
   return (
     <GridSection
       columns={3}
@@ -60,7 +61,12 @@ const ListingIntro = (props: ListingIntroProps) => {
             keyPrefix={"jurisdictions"}
             options={jurisdictionOptions}
             inputProps={{
-              onChange: () => clearErrors("jurisdiction"),
+              onChange: () => {
+                console.log("jurisdiction change")
+                ;(fieldHasError(errors?.jurisdiction) ||
+                  fieldHasError(errors?.["jurisdiction.id"])) &&
+                  clearErrors("jurisdiction")
+              },
             }}
           />
         </ViewItem>
@@ -72,7 +78,9 @@ const ListingIntro = (props: ListingIntroProps) => {
           label={t("listings.listingName")}
           placeholder={t("listings.listingName")}
           inputProps={{
-            onChange: () => clearErrors("name"),
+            onChange: () => {
+              fieldHasError(errors?.name) && clearErrors("name")
+            },
           }}
           subNote={t("listings.requiredToPublish")}
           register={register}
@@ -90,7 +98,7 @@ const ListingIntro = (props: ListingIntroProps) => {
         error={fieldHasError(errors?.developer)}
         errorMessage={fieldMessage(errors?.developer)}
         inputProps={{
-          onChange: () => clearErrors("developer"),
+          onChange: () => fieldHasError(errors?.developer) && clearErrors("developer"),
         }}
         register={register}
       />

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
@@ -33,7 +33,7 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
 
   const formMethods = useFormContext()
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { register, errors, clearErrors, reset, getValues, control } = formMethods
+  const { register, errors, clearErrors, getValues, control, setValue } = formMethods
   const listing = getValues()
 
   const listingAvailability = useWatch({
@@ -54,7 +54,12 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
   }
 
   useEffect(() => {
-    reset({ ...getValues(), disableUnitsAccordion: disableUnitsAccordion ? "true" : "false" })
+    if (
+      getValues("disableUnitsAccordion") === undefined ||
+      getValues("disableUnitsAccordion") === null
+    ) {
+      setValue("disableUnitsAccordion", disableUnitsAccordion ? "true" : "false")
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

diff --git a/sites/public/package.json b/sites/public/package.json
@@ -50,7 +50,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^6.15.5",
-    "swr": "^0.5.5",
+    "swr": "^2.1.5",
     "tailwindcss": "2.2.10",
     "tough-cookie": "4.1.2"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -7562,11 +7562,6 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-dequal@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz"
-  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
-
 destr@^1.1.1, destr@^1.2.0, destr@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/destr/-/destr-1.2.2.tgz"
@@ -17182,20 +17177,20 @@ swagger-ui-express@^4.1.4:
   dependencies:
     swagger-ui-dist "^3.18.1"
 
-swr@^0.5.5:
-  version "0.5.5"
-  resolved "https://registry.npmjs.org/swr/-/swr-0.5.5.tgz"
-  integrity sha512-u4mUorK9Ipt+6LEITvWRWiRWAQjAysI6cHxbMmMV1dIdDzxMnswWo1CyGoyBHXX91CchxcuoqgFZ/ycx+YfhCA==
-  dependencies:
-    dequal "2.0.2"
-
 swr@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/swr/-/swr-2.1.2.tgz#15841cf5bbb8b20f24e2408193f616a41b6734a0"
   integrity sha512-ocfaD2rnYZKqTDplCEX2bH5Z1++n2JSej9oYi7hVfXXWYm+0RP+H6fVrogWB0mtMclv1guk9kEnAzNLygOy9Hw==
   dependencies:
     use-sync-external-store "^1.2.0"
 
+swr@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.1.5.tgz#688effa719c03f6d35c66decbb0f8e79c7190399"
+  integrity sha512-/OhfZMcEpuz77KavXST5q6XE9nrOBOVcBLWjMT+oAE/kQHyE3PASrevXCtQDZ8aamntOfFkbVJp7Il9tNBQWrw==
+  dependencies:
+    use-sync-external-store "^1.2.0"
+
 symbol-observable@4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz"