Skip to content

Commit

Permalink
feat: improve client-side field validation on Partners listings (#4331)
Browse files Browse the repository at this point in the history 
* feat: improve client-side field validation on Partners listings

* feat: additional error reporting

* fix: make lottery dates/times required

* fix: use time error values for time fields

* test: update demographics queries not to use title attribute
  • Loading branch information
@jaredcwhite
jaredcwhite authored Oct 23, 2024
1 parent 98e3047 commit 94b4ef3
Show file tree
Hide file tree
Showing 11 changed files with 80 additions and 54 deletions.
2 changes: 1 addition & 1 deletion shared-helpers/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"prettier": "prettier --write \"**/*.ts\""
},
"dependencies": {
"@bloom-housing/ui-components": "12.1.0",
"@bloom-housing/ui-components": "12.4.0",
"@bloom-housing/ui-seeds": "1.17.0",
"@heroicons/react": "^2.1.1",
"axios-cookiejar-support": "4.0.6",
Expand Down
2 changes: 1 addition & 1 deletion sites/partners/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
},
"dependencies": {
"@bloom-housing/shared-helpers": "^7.7.1",
"@bloom-housing/ui-components": "12.1.0",
"@bloom-housing/ui-components": "12.4.0",
"@bloom-housing/ui-seeds": "1.17.0",
"@heroicons/react": "^2.1.1",
"@mapbox/mapbox-sdk": "^0.13.0",
Expand Down
2 changes: 2 additions & 0 deletions ...artners/src/components/applications/PaperApplicationForm/sections/FormApplicationData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const FormApplicationData = () => {
register={register}
error={errors?.dateSubmitted}
watch={watch}
setValue={setValue}
label={t("application.add.dateSubmitted")}
errorMessage={t("errors.dateError")}
required={!!isDateRequired}
Expand All @@ -50,6 +51,7 @@ const FormApplicationData = () => {
name="timeSubmitted"
label={t("application.add.timeSubmitted")}
register={register}
setValue={setValue}
watch={watch}
error={!!errors?.timeSubmitted}
disabled={!isDateFilled}
Expand Down
5 changes: 4 additions & 1 deletion sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const OpenHouseForm = ({ onSubmit, currentEvent }: OpenHouseFormProps) => {
})()

// eslint-disable-next-line @typescript-eslint/unbound-method
const { register, watch, trigger, getValues, errors } = useForm<OpenHouseFormValues>({
const { register, setValue, watch, trigger, getValues, errors } = useForm<OpenHouseFormValues>({
defaultValues,
})

Expand Down Expand Up @@ -107,6 +107,7 @@ const OpenHouseForm = ({ onSubmit, currentEvent }: OpenHouseFormProps) => {
name="date"
id="date"
register={register}
setValue={setValue}
watch={watch}
error={errors?.date}
errorMessage={t("errors.requiredFieldError")}
Expand All @@ -120,6 +121,7 @@ const OpenHouseForm = ({ onSubmit, currentEvent }: OpenHouseFormProps) => {
name="startTime"
id="startTime"
register={register}
setValue={setValue}
watch={watch}
error={!!errors?.startTime}
required
Expand All @@ -132,6 +134,7 @@ const OpenHouseForm = ({ onSubmit, currentEvent }: OpenHouseFormProps) => {
name="endTime"
id="endTime"
register={register}
setValue={setValue}
watch={watch}
error={!!errors?.endTime}
required
Expand Down
70 changes: 38 additions & 32 deletions sites/partners/src/components/listings/PaperListingForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,44 +190,50 @@ const ListingForm = ({ listing, editMode, setListingName }: ListingFormProps) =>
try {
setLoading(true)
clearErrors()

const dataPipeline = new ListingDataPipeline(formData, {
preferences,
programs,
units,
openHouseEvents,
profile: profile,
latLong,
customMapPositionChosen,
})
const formattedData = await dataPipeline.run()
let result
if (editMode) {
result = await listingsService.update({
id: listing.id,
body: { id: listing.id, ...(formattedData as unknown as ListingUpdate) },
})
} else {
result = await listingsService.create({
body: formattedData as unknown as ListingCreate,
const successful = await formMethods.trigger()

if (successful) {
const dataPipeline = new ListingDataPipeline(formData, {
preferences,
programs,
units,
openHouseEvents,
profile: profile,
latLong,
customMapPositionChosen,
})
}
const formattedData = await dataPipeline.run()
let result
if (editMode) {
result = await listingsService.update({
id: listing.id,
body: { id: listing.id, ...(formattedData as unknown as ListingUpdate) },
})
} else {
result = await listingsService.create({
body: formattedData as unknown as ListingCreate,
})
}

reset(formData)
reset(formData)

if (result) {
addToast(getToast(listing, listing?.status, formattedData?.status), {
variant: "success",
})
if (result) {
addToast(getToast(listing, listing?.status, formattedData?.status), {
variant: "success",
})

if (continueEditing) {
setAlert(null)
setListingName(result.name)
} else {
await router.push(`/listings/${result.id}`)
if (continueEditing) {
setAlert(null)
setListingName(result.name)
} else {
await router.push(`/listings/${result.id}`)
}
}
setLoading(false)
} else {
setLoading(false)
setAlert("form")
}
setLoading(false)
} catch (err) {
reset(formData)
setLoading(false)
Expand Down
4 changes: 4 additions & 0 deletions sites/partners/src/components/listings/PaperListingForm/sections/ApplicationAddress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -705,7 +705,9 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
name={"postmarkByDateDateField"}
id={"postmarkByDateDateField"}
register={register}
setValue={setValue}
watch={watch}
error={errors?.postmarkByDateDateField}
defaultDate={{
month: listing?.postmarkedApplicationsReceivedByDate
? dayjsDate.format("MM")
Expand All @@ -728,7 +730,9 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
name={"postmarkByDateTimeField"}
id={"postmarkByDateTimeField"}
register={register}
setValue={setValue}
watch={watch}
error={errors?.postmarkByDateTimeField}
defaultValues={{
hours: listing?.postmarkedApplicationsReceivedByDate
? dayjsDate.format("hh")
Expand Down
6 changes: 5 additions & 1 deletion sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const ApplicationDates = ({
const formMethods = useFormContext()

// eslint-disable-next-line @typescript-eslint/unbound-method
const { register, watch } = formMethods
const { errors, register, setValue, watch } = formMethods

const [drawerOpenHouse, setDrawerOpenHouse] = useState<TempEvent | boolean>(false)
const [modalDeleteOpenHouse, setModalDeleteOpenHouse] = useState<TempEvent | null>(null)
Expand Down Expand Up @@ -108,7 +108,9 @@ const ApplicationDates = ({
name={"applicationDueDateField"}
id={"applicationDueDateField"}
register={register}
setValue={setValue}
watch={watch}
error={errors?.applicationDueDateField}
note={t("listings.whenApplicationsClose")}
defaultDate={{
month: listing?.applicationDueDate
Expand All @@ -129,7 +131,9 @@ const ApplicationDates = ({
name={"applicationDueTimeField"}
id={"applicationDueTimeField"}
register={register}
setValue={setValue}
watch={watch}
error={errors?.applicationDueTimeField}
defaultValues={{
hours: listing?.applicationDueDate
? dayjs(new Date(listing?.applicationDueDate)).format("hh")
Expand Down
17 changes: 12 additions & 5 deletions sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const RankingsAndResults = ({ listing, isAdmin }: RankingsAndResultsProps) => {
const formMethods = useFormContext()

// eslint-disable-next-line @typescript-eslint/unbound-method
const { register, watch, control, errors } = formMethods
const { register, setValue, watch, control, errors } = formMethods

const lotteryEvent = getLotteryEvent(listing as unknown as Listing)

Expand Down Expand Up @@ -61,6 +61,7 @@ const RankingsAndResults = ({ listing, isAdmin }: RankingsAndResultsProps) => {
value: YesNoEnum.no,
},
]

return (
<>
<SectionWithGrid
Expand Down Expand Up @@ -146,6 +147,8 @@ const RankingsAndResults = ({ listing, isAdmin }: RankingsAndResultsProps) => {
name={"lotteryDate"}
id={"lotteryDate"}
register={register}
required
setValue={setValue}
watch={watch}
error={
errors?.lotteryDate
Expand Down Expand Up @@ -181,10 +184,12 @@ const RankingsAndResults = ({ listing, isAdmin }: RankingsAndResultsProps) => {
name={"lotteryStartTime"}
id={"lotteryStartTime"}
register={register}
required
setValue={setValue}
watch={watch}
error={errors?.lotteryDate ? true : false}
error={errors?.lotteryStartTime ? true : false}
strings={{
timeError: errors?.lotteryDate ? t("errors.dateError") : null,
timeError: errors?.lotteryStartTime ? t("errors.timeError") : null,
}}
defaultValues={
errors?.lotteryDate
Expand All @@ -211,10 +216,12 @@ const RankingsAndResults = ({ listing, isAdmin }: RankingsAndResultsProps) => {
name={"lotteryEndTime"}
id={"lotteryEndTime"}
register={register}
required
setValue={setValue}
watch={watch}
error={errors?.lotteryDate ? true : false}
error={errors?.lotteryEndTime ? true : false}
strings={{
timeError: errors?.lotteryDate ? t("errors.dateError") : null,
timeError: errors?.lotteryEndTime ? t("errors.timeError") : null,
}}
defaultValues={
errors?.lotteryDate
Expand Down
16 changes: 8 additions & 8 deletions sites/public/__tests__/pages/applications/review/demographics.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,25 +75,25 @@ describe("applications pages", () => {
})

it("should show other text fields when other options are checked", async () => {
const { getByText, queryByTitle, findByTitle } = render(<ApplicationDemographics />)
const { getByText, queryByTestId, findAllByTestId } = render(<ApplicationDemographics />)

expect(queryByTitle("asian-otherAsian")).not.toBeInTheDocument()
expect(queryByTestId("asian-otherAsian")).not.toBeInTheDocument()
fireEvent.click(getByText("Asian"))
fireEvent.click(getByText("Other Asian"))
expect(await findByTitle("asian-otherAsian")).toBeInTheDocument()
expect(await findAllByTestId("asian-otherAsian")).toHaveLength(2)

expect(
queryByTitle("nativeHawaiianOtherPacificIslander-otherPacificIslander")
queryByTestId("nativeHawaiianOtherPacificIslander-otherPacificIslander")
).not.toBeInTheDocument()
fireEvent.click(getByText("Native Hawaiian / Other Pacific Islander"))
fireEvent.click(getByText("Other Pacific Islander"))
expect(
await findByTitle("nativeHawaiianOtherPacificIslander-otherPacificIslander")
).toBeInTheDocument()
await findAllByTestId("nativeHawaiianOtherPacificIslander-otherPacificIslander")
).toHaveLength(2)

expect(queryByTitle("otherMultiracial")).not.toBeInTheDocument()
expect(await findAllByTestId("otherMultiracial")).toHaveLength(1)
fireEvent.click(getByText("Other / Multiracial"))
expect(await findByTitle("otherMultiracial")).toBeInTheDocument()
expect(await findAllByTestId("otherMultiracial")).toHaveLength(2)
})
})
})
2 changes: 1 addition & 1 deletion sites/public/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
},
"dependencies": {
"@bloom-housing/shared-helpers": "^7.7.1",
"@bloom-housing/ui-components": "12.1.0",
"@bloom-housing/ui-components": "12.4.0",
"@bloom-housing/ui-seeds": "1.17.0",
"@heroicons/react": "^2.1.1",
"@mapbox/mapbox-sdk": "^0.13.0",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1985,10 +1985,10 @@
resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

"@bloom-housing/ui-components@12.1.0":
version "12.1.0"
resolved "https://registry.yarnpkg.com/@bloom-housing/ui-components/-/ui-components-12.1.0.tgz#c6066ed097887820bf2195c748ac2862fb171eef"
integrity sha512-xFW4IlPw9v9OJCkEQiKdIiN4csJyHuuaz1GmZGD33+m2phU79f5he2zBw0/qZogqpmP8aYsuzzKHAigHKXNhdQ==
"@bloom-housing/ui-components@12.4.0":
version "12.4.0"
resolved "https://registry.yarnpkg.com/@bloom-housing/ui-components/-/ui-components-12.4.0.tgz#bc36172c4d500ecd632d440d58af4183904cf882"
integrity sha512-c67UsaZZF8LG3J5AzdbBcNfRf70+rLaQjjQxbH+dTHnH8GvPffKF9kL/vICldPHIm+qO+5Uc7paYXITzKFZp+w==
dependencies:
"@fortawesome/fontawesome-svg-core" "^6.1.1"
"@fortawesome/free-regular-svg-icons" "^6.1.1"
Expand Down

0 comments on commit 94b4ef3

Please sign in to comment.