Skip to content

refactored useForm for item dialog #1553

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: react-hook-form-system-dialog-fix
Choose a base branch
from
Open

refactored useForm for item dialog #1553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/catalogue/items/catalogueItemsDialog.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ import {
createFormControlWithRootErrorClearing,
sortDataList,
} from '../../utils';
import z from 'zod';

const RECENT_MANUFACTURER_CUTOFF_TIME = 10 * 60 * 1000;

Expand Down Expand Up @@ -127,7 +128,7 @@ export function convertToPropertyValueList(
}

export function convertToPropertyPost(
propertyValues: PropertyValue[]
propertyValues: z.output<typeof PropertiesStepSchema>['properties']
): PropertyPost[] {
return propertyValues.map((propertyValue) => {
return {
Expand Down
123 changes: 79 additions & 44 deletions src/items/itemDialog.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import Grid from '@mui/material/Grid2';
import { DatePicker, DateValidationError } from '@mui/x-date-pickers';
import { AxiosError } from 'axios';
import React from 'react';
import { Controller, Resolver, useForm } from 'react-hook-form';
import { Controller, FieldError, useForm } from 'react-hook-form';
import {
CatalogueCategory,
CatalogueCategoryProperty,
Expand All @@ -36,11 +36,7 @@ import {
import { usePatchItem, usePostItem, usePostItems } from '../api/items';
import { useGetSystems, useGetSystemsBreadcrumbs } from '../api/systems';
import { useGetUsageStatuses } from '../api/usageStatuses';
import {
ItemDetailsStep,
ItemDetailsStepPost,
PropertiesStep,
} from '../app.types';
import { ItemDetailsStep, ItemDetailsStepPost } from '../app.types';
import {
convertToPropertyPost,
convertToPropertyValueList,
Expand All @@ -57,8 +53,9 @@ import {
import handleIMS_APIError from '../handleIMS_APIError';
import handleTransferState from '../handleTransferState';
import { SystemsTableView } from '../systems/systemsTableView.component';
import { createFormControlWithRootErrorClearing } from '../utils';
import { createFormControlWithRootErrorClearingUpdated } from '../utils';
import Breadcrumbs from '../view/breadcrumbs.component';
import z from 'zod';

function toItemDetailsStep(item: Item | undefined): ItemDetailsStep {
if (!item) {
Expand Down Expand Up @@ -95,7 +92,7 @@ function toItemDetailsStep(item: Item | undefined): ItemDetailsStep {
}

function convertToItemDetailsStepPost(
item: ItemDetailsStep
item: z.output<ReturnType<typeof ItemDetailsStepSchema>>
): ItemDetailsStepPost {
return {
purchase_order_number: item.purchase_order_number ?? null,
Expand Down Expand Up @@ -131,14 +128,17 @@ const dateErrorMessageHandler = (props: {
}
};

const formControlPropertiesStep =
createFormControlWithRootErrorClearing<PropertiesStep>();
const formControlPropertiesStep = createFormControlWithRootErrorClearingUpdated<
z.input<typeof PropertiesStepSchema>,
z.output<typeof PropertiesStepSchema>
>();

const formControlDetailsStep =
createFormControlWithRootErrorClearing<ItemDetailsStep>({
customCallback: () =>
formControlPropertiesStep.clearErrors('root.formError'),
});
const formControlDetailsStep = createFormControlWithRootErrorClearingUpdated<
z.input<ReturnType<typeof ItemDetailsStepSchema>>,
z.output<ReturnType<typeof ItemDetailsStepSchema>>
>({
customCallback: () => formControlPropertiesStep.clearErrors('root.formError'),
});

export interface ItemDialogProps {
open: boolean;
Expand Down Expand Up @@ -195,11 +195,13 @@ function ItemDialog(props: ItemDialogProps) {
const { data: parentSystemBreadcrumbs } =
useGetSystemsBreadcrumbs(parentSystemId);

const ItemDetailsStepFormMethods = useForm<ItemDetailsStep>({
const ItemDetailsStepFormMethods = useForm<
z.input<ReturnType<typeof ItemDetailsStepSchema>>,
undefined,
z.output<ReturnType<typeof ItemDetailsStepSchema>>
>({
formControl: formControlDetailsStep,
resolver: zodResolver(
ItemDetailsStepSchema(requestType)
) as unknown as Resolver<ItemDetailsStep>,
resolver: zodResolver(ItemDetailsStepSchema(requestType)),
defaultValues: toItemDetailsStep(selectedItem),
});

Expand All @@ -214,11 +216,13 @@ function ItemDialog(props: ItemDialogProps) {
setError: setErrorDetailsStep,
} = ItemDetailsStepFormMethods;

const itemPropertiesStepFormMethods = useForm<PropertiesStep>({
const itemPropertiesStepFormMethods = useForm<
z.input<typeof PropertiesStepSchema>,
undefined,
z.output<typeof PropertiesStepSchema>
>({
formControl: formControlPropertiesStep,
resolver: zodResolver(
PropertiesStepSchema
) as unknown as Resolver<PropertiesStep>,
resolver: zodResolver(PropertiesStepSchema),
defaultValues: {
properties: convertToPropertyValueList(
catalogueCategory,
Expand Down Expand Up @@ -411,12 +415,16 @@ function ItemDialog(props: ItemDialogProps) {
event: React.SyntheticEvent
): Promise<{
hasErrors: boolean;
detailsStepData: ItemDetailsStep | undefined;
propertiesStepData: PropertiesStep | undefined;
detailsStepData:
| z.output<ReturnType<typeof ItemDetailsStepSchema>>
| undefined;
propertiesStepData: z.output<typeof PropertiesStepSchema> | undefined;
}> => {
let hasErrors: boolean = false;
let detailsStepData: ItemDetailsStep | undefined;
let propertiesStepData: PropertiesStep | undefined;
let detailsStepData:
| z.output<ReturnType<typeof ItemDetailsStepSchema>>
| undefined;
let propertiesStepData: z.output<typeof PropertiesStepSchema> | undefined;

// Handle the submission for Step 1
await handleSubmitDetailsStep((validData) => {
Expand Down Expand Up @@ -691,8 +699,8 @@ function ItemDialog(props: ItemDialogProps) {
size: 'small',
fullWidth: true,
error: !!errorsDetailsStep.warranty_end_date,
helperText:
errorsDetailsStep.warranty_end_date?.message,
helperText: errorsDetailsStep.warranty_end_date
?.message as string | undefined,
},
field: { clearable: true },
clearButton: { size: 'small' },
Expand Down Expand Up @@ -743,7 +751,8 @@ function ItemDialog(props: ItemDialogProps) {
size: 'small',
fullWidth: true,
error: !!errorsDetailsStep.delivered_date,
helperText: errorsDetailsStep.delivered_date?.message,
helperText: errorsDetailsStep.delivered_date
?.message as string | undefined,
}),
field: { clearable: true },
clearButton: { size: 'small' },
Expand Down Expand Up @@ -920,14 +929,27 @@ function ItemDialog(props: ItemDialogProps) {
{...params}
required={property.mandatory ?? false}
label={property.name}
// Typescript at runtime cannot infer the nested types of a discrimminated union (which is what errorsPropertiesStep is)
// so we need to cast the first findable value as FieldError, so that the nested value and message are findable.
error={
!!errorsPropertiesStep?.properties?.[
index
]?.value?.value
!!(
errorsPropertiesStep?.properties?.[
index
]?.value as
| { value?: FieldError }
| undefined
)?.value
}
helperText={
errorsPropertiesStep?.properties?.[index]
?.value?.value?.message as string
(
errorsPropertiesStep?.properties?.[
index
]?.value as
| { value?: FieldError }
| undefined
)?.value?.message
// errorsPropertiesStep?.properties?.[index]
// ?.value?.value?.message as string
}
/>
)}
Expand Down Expand Up @@ -968,13 +990,22 @@ function ItemDialog(props: ItemDialogProps) {
property.unit ? `(${property.unit})` : ''
}`}
error={
!!errorsPropertiesStep?.properties?.[
index
]?.value?.value
!!(
errorsPropertiesStep?.properties?.[
index
]?.value as
| { value?: FieldError }
| undefined
)?.value
}
helperText={
errorsPropertiesStep?.properties?.[index]
?.value?.value?.message as string
(
errorsPropertiesStep?.properties?.[
index
]?.value as
| { value?: FieldError }
| undefined
)?.value?.message as string
}
/>
)}
Expand All @@ -994,12 +1025,16 @@ function ItemDialog(props: ItemDialogProps) {
required={property.mandatory ?? false}
fullWidth
error={
!!errorsPropertiesStep?.properties?.[index]?.value
?.value
!!(
errorsPropertiesStep?.properties?.[index]
?.value as { value?: FieldError } | undefined
)?.value
}
helperText={
errorsPropertiesStep?.properties?.[index]?.value
?.value?.message as string
(
errorsPropertiesStep?.properties?.[index]
?.value as { value?: FieldError } | undefined
)?.value?.message as string
}
/>
)}
Expand Down
Loading