70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { Form, HandleUseFormCallback, useForm } from 'react-component-form'
|
|
import useTranslation from 'next-translate/useTranslation'
|
|
|
|
import { Input } from './design/Input'
|
|
import { Button } from './design/Button'
|
|
import { useFormTranslation } from '../hooks/useFormTranslation'
|
|
import { userSchema } from '../models/User'
|
|
import { FormState } from './design/FormState'
|
|
|
|
const simulateServerRequest = async (ms: number): Promise<void> => {
|
|
return await new Promise((resolve) => {
|
|
setTimeout(resolve, ms)
|
|
})
|
|
}
|
|
|
|
export const FormExample: React.FC = () => {
|
|
const { handleUseForm, errors, fetchState, message } = useForm(userSchema)
|
|
const { getFirstErrorTranslation } = useFormTranslation()
|
|
const { t } = useTranslation()
|
|
|
|
const onSubmit: HandleUseFormCallback<typeof userSchema> = async (
|
|
formData,
|
|
formElement
|
|
) => {
|
|
await simulateServerRequest(2000)
|
|
console.log('onSubmit:', formData)
|
|
formElement.reset()
|
|
return {
|
|
type: 'success',
|
|
value: 'common:success-message'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<Form
|
|
className='mt-6 w-[90%] max-w-xs'
|
|
noValidate
|
|
onSubmit={handleUseForm(onSubmit)}
|
|
>
|
|
<Input
|
|
type='text'
|
|
placeholder={t('common:name')}
|
|
name='name'
|
|
label={t('common:name')}
|
|
error={getFirstErrorTranslation(errors.name)}
|
|
/>
|
|
|
|
<Input
|
|
type='text'
|
|
placeholder='Email'
|
|
name='email'
|
|
label='Email'
|
|
error={getFirstErrorTranslation(errors.email)}
|
|
/>
|
|
|
|
<Button className='mt-6 w-full' type='submit' data-cy='submit'>
|
|
Submit
|
|
</Button>
|
|
</Form>
|
|
|
|
<FormState
|
|
id='message'
|
|
state={fetchState}
|
|
message={message != null ? t(message) : undefined}
|
|
/>
|
|
</section>
|
|
)
|
|
}
|