New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
(feat) Migrating conditions form to use RHF and Zod #1248
Conversation
: null | ||
: null, | ||
clinicalStatus: condition?.cells?.find((cell) => cell?.info?.header === 'clinicalStatus')?.value ?? 'Active', | ||
search: condition?.cells?.find((cell) => cell?.info?.header === 'display')?.value, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
initilizing RHF with default values
search: z.string({ required_error: "A condition is required"}), | ||
}); | ||
|
||
export type ConditionFormData = z.infer<typeof conditionSchema>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
infering form data type from the zod schema
if (isSubmitting) { | ||
editing ? handleUpdate() : handleCreate(); | ||
if (formState?.errors?.search) { | ||
searchInputFocus(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
focuses on the conditon's search input if an invalid condition is entered
if (isSubmitting) { | ||
editing ? handleUpdate() : handleCreate(); | ||
if (formState?.errors?.search) { | ||
searchInputFocus(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
focuses on the conditon's search input if an invalid condition is entered
</ButtonSet> | ||
</div> | ||
</Form> | ||
<FormProvider {...methods}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Passing down form contexts and methods
api
}) => { | ||
const { t } = useTranslation(); | ||
const { conditions, mutate } = useConditions(patientUuid); | ||
const editing = formContext === 'editing'; | ||
const { control, watch, getValues, formState } = useFormContext<ConditionFormData>(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
using the formcontext and methods api
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good, let's merge it and test it more on dev3
Requirements
Summary
-migrated the conditions form to use RHF and Zod
Screenshots
www_screencapture_com_2023-6-29_09_10.mp4
current update
Related Issue
https://issues.openmrs.org/browse/O3-2139 current
needs merging first #1232
Other
cc @hadijahkyampeire @denniskigen