mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-12-08 00:44:30 +01:00
90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import useTranslation from 'next-translate/useTranslation'
|
|
import { useState } from 'react'
|
|
import Form, { HandleForm } from 'react-component-form'
|
|
import axios from 'axios'
|
|
|
|
import { Input } from 'components/design/Input'
|
|
import { Button } from 'components/design/Button'
|
|
import { Textarea } from 'components/design/Textarea'
|
|
import { FormResult } from './FormResult'
|
|
|
|
export const resultState = [
|
|
'idle',
|
|
'success',
|
|
'loading',
|
|
'requiredFields',
|
|
'invalidEmail',
|
|
'serverError'
|
|
] as const
|
|
|
|
export type ResultState = typeof resultState[number]
|
|
|
|
export const Contact: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
const [state, setState] = useState<ResultState>('idle')
|
|
|
|
const handleSubmit: HandleForm = async (formData, formElement) => {
|
|
setState('loading')
|
|
try {
|
|
const { data } = await axios.post<{ type: ResultState }>(
|
|
'/api/send-email',
|
|
formData
|
|
)
|
|
if (data.type === 'success') {
|
|
setState('success')
|
|
return formElement.reset()
|
|
}
|
|
return setState('serverError')
|
|
} catch (error) {
|
|
const type = error.response.data.type
|
|
if (resultState.includes(type)) {
|
|
return setState(type)
|
|
}
|
|
return setState('serverError')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className='col-24'>
|
|
<Form onSubmit={handleSubmit}>
|
|
<Input
|
|
label={`${t('home:contact.nameField')} :`}
|
|
type='text'
|
|
name='name'
|
|
autoComplete='off'
|
|
required
|
|
/>
|
|
<Input
|
|
label='Email :'
|
|
type='email'
|
|
name='email'
|
|
autoComplete='off'
|
|
required
|
|
/>
|
|
<Input
|
|
label={`${t('home:contact.subjectField')} :`}
|
|
type='text'
|
|
name='subject'
|
|
autoComplete='off'
|
|
required
|
|
/>
|
|
|
|
<Textarea
|
|
label='Message :'
|
|
name='message'
|
|
autoComplete='off'
|
|
required
|
|
/>
|
|
|
|
<div className='text-center' style={{ marginBottom: 20 }}>
|
|
<Button type='submit'>{t('home:contact.sendEmail')}</Button>
|
|
</div>
|
|
</Form>
|
|
|
|
<FormResult state={state} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|