diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-22 19:34:01 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:23:48 +0200 |
| commit | a6ff5eee45215effb3344cb5d631a27a7c0369aa (patch) | |
| tree | 5051747acf72318b4fc5c18d603e3757fbefdfdb /src/components/organisms/forms/contact-form.tsx | |
| parent | 651ea4fc992e77d2f36b3c68f8e7a70644246067 (diff) | |
refactor(components): rewrite form components
Diffstat (limited to 'src/components/organisms/forms/contact-form.tsx')
| -rw-r--r-- | src/components/organisms/forms/contact-form.tsx | 154 |
1 files changed, 0 insertions, 154 deletions
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx deleted file mode 100644 index ca84c25..0000000 --- a/src/components/organisms/forms/contact-form.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { FC, ReactNode, useState } from 'react'; -import { useIntl } from 'react-intl'; -import { Button, Form, Spinner } from '../../atoms'; -import { LabelledField } from '../../molecules'; -import styles from './contact-form.module.scss'; - -export type ContactFormData = { - email: string; - message: string; - name: string; - subject: string; -}; - -export type ContactFormProps = { - /** - * Set additional classnames to the form wrapper. - */ - className?: string; - /** - * Pass a component to print a success/error message. - */ - Notice?: ReactNode; - /** - * A callback function to send mail. - */ - sendMail: (data: ContactFormData, reset: () => void) => Promise<void>; -}; - -/** - * ContactForm component - * - * Render a contact form. - */ -export const ContactForm: FC<ContactFormProps> = ({ - className = '', - Notice, - sendMail, -}) => { - const intl = useIntl(); - const [name, setName] = useState<string>(''); - const [email, setEmail] = useState<string>(''); - const [object, setObject] = useState<string>(''); - const [message, setMessage] = useState<string>(''); - const [isSubmitting, setIsSubmitting] = useState<boolean>(false); - - /** - * Reset all the form fields. - */ - const resetForm = () => { - setName(''); - setEmail(''); - setObject(''); - setMessage(''); - setIsSubmitting(false); - }; - - const formName = intl.formatMessage({ - defaultMessage: 'Contact form', - description: 'ContactForm: form accessible name', - id: 'HFdzae', - }); - - const nameLabel = intl.formatMessage({ - defaultMessage: 'Name:', - description: 'ContactForm: name label', - id: '1dCuCx', - }); - - const emailLabel = intl.formatMessage({ - defaultMessage: 'Email:', - description: 'ContactForm: email label', - id: 'w4B5PA', - }); - - const objectLabel = intl.formatMessage({ - defaultMessage: 'Object:', - description: 'ContactForm: object label', - id: 's8/tyz', - }); - - const messageLabel = intl.formatMessage({ - defaultMessage: 'Message:', - description: 'ContactForm: message label', - id: 'yN5P+m', - }); - - const submitHandler = async () => { - setIsSubmitting(true); - sendMail({ email, message, name, subject: object }, resetForm).then(() => - setIsSubmitting(false) - ); - }; - - return ( - <Form aria-label={formName} className={className} onSubmit={submitHandler}> - <LabelledField - className={styles.field} - id="contact-name" - label={nameLabel} - name="contact-name" - required={true} - setValue={setName} - type="text" - value={name} - /> - <LabelledField - className={styles.field} - id="contact-email" - label={emailLabel} - name="contact-email" - required={true} - setValue={setEmail} - type="email" - value={email} - /> - <LabelledField - className={styles.field} - id="contact-object" - label={objectLabel} - name="contact-object" - setValue={setObject} - type="text" - value={object} - /> - <LabelledField - className={styles.field} - id="contact-message" - label={messageLabel} - name="contact-message" - required={true} - setValue={setMessage} - type="textarea" - value={message} - /> - <Button type="submit" kind="primary" className={styles.button}> - {intl.formatMessage({ - defaultMessage: 'Send', - description: 'ContactForm: send button', - id: 'VkAnvv', - })} - </Button> - {isSubmitting && ( - <Spinner - message={intl.formatMessage({ - defaultMessage: 'Sending mail...', - description: 'ContactForm: spinner message on submit', - id: 'xaqaYQ', - })} - /> - )} - {Notice} - </Form> - ); -}; |
