Skip to content

Conversation

@Naman-56-56
Copy link

<Typography variant="h4">Add New Company</Typography>

<FormProvider {...methods}>
<Paper sx={{ p: 3 }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Wrap fields in a <form> and submit properly
    (handleSubmit on a button onClick skips native form submit)
  • add noValidate -- as we are validating via zod -- may give inconsistency
Suggested change
<Paper sx={{ p: 3 }}>
<Paper sx={{ p: 3 }} component="form" noValidate onSubmit={methods.handleSubmit(onSubmit)}>

Comment on lines 86 to 92
<Button
variant="contained"
onClick={methods.handleSubmit(onSubmit)}
disabled={addCompany.isPending}
>
{addCompany.isPending ? 'Adding...' : 'Add Company'}
</Button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Button
variant="contained"
onClick={methods.handleSubmit(onSubmit)}
disabled={addCompany.isPending}
>
{addCompany.isPending ? 'Adding...' : 'Add Company'}
</Button>
<Button type="submit" variant="contained" disabled={loadingMeta || addCompany.isPending || methods.formState.isSubmitting}>

Comment on lines 42 to 49
export const adminCompanySchema = z.object({
name: z.string().min(2, 'Required'),
website: z.url('Invalid URL').optional().or(z.literal('')),
domain: z.string().min(1, 'Required'),
state: z.string().min(1, 'Required'),
city: z.string().min(2, 'Required'),
address: z.string().min(5, 'Required'),
})
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve Zod messages and empty-string handling for URL

Suggested change
export const adminCompanySchema = z.object({
name: z.string().min(2, 'Required'),
website: z.url('Invalid URL').optional().or(z.literal('')),
domain: z.string().min(1, 'Required'),
state: z.string().min(1, 'Required'),
city: z.string().min(2, 'Required'),
address: z.string().min(5, 'Required'),
})
const emptyToUndefined = <T extends z.ZodTypeAny>(schema: T) =>
z.preprocess((v) => (v === '' ? undefined : v), schema)
export const adminCompanySchema = z.object({
name: z.string().min(5, 'Must be at least 5 characters'),
website: emptyToUndefined(z.string().url('Invalid URL')).optional(),
domain: z.string().min(1, 'Required'),
state: z.string().min(1, 'Required'),
city: z.string().min(2, 'Must be at least 2 characters'),
address: z.string().min(5, 'Must be at least 5 characters'),
})

<FormProvider {...methods}>
<Paper sx={{ p: 3 }}>
{loadingMeta ? (
<Typography>Loading options…</Typography>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ux polish : Add a Skeleton instead of plain “Loading options…”.
https://mui.com/material-ui/react-skeleton/

}: { domains: string[]; states: { code: string; name: string }[] }) {
return (
<Stack spacing={2}>
<RHFTextField name="name" label="Company Name" fullWidth />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ux polish :
Autofocus first field

Suggested change
<RHFTextField name="name" label="Company Name" fullWidth />
<RHFTextField name="name" label="Company Name" fullWidth autoFocus />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants