From 82e387d33fc296b1e5a08fef17bcd4595e0c7071 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 10 Feb 2022 16:51:08 +0100 Subject: refactor: extract contact form from contact page The contact page file was too long. By extracting the contact form the readability is improved. --- src/components/ContactForm/ContactForm.module.scss | 21 +++ src/components/ContactForm/ContactForm.tsx | 155 +++++++++++++++++++++ src/i18n/en.json | 62 ++++----- src/i18n/fr.json | 62 ++++----- src/pages/contact.tsx | 143 +------------------ src/styles/pages/Page.module.scss | 20 --- 6 files changed, 240 insertions(+), 223 deletions(-) create mode 100644 src/components/ContactForm/ContactForm.module.scss create mode 100644 src/components/ContactForm/ContactForm.tsx (limited to 'src') diff --git a/src/components/ContactForm/ContactForm.module.scss b/src/components/ContactForm/ContactForm.module.scss new file mode 100644 index 0000000..3f0e861 --- /dev/null +++ b/src/components/ContactForm/ContactForm.module.scss @@ -0,0 +1,21 @@ +@use "@styles/abstracts/functions" as fun; + +.status { + max-width: max-content; + margin: var(--spacing-md) 0; + padding: var(--spacing-sm); + border: fun.convert-px(3) solid var(--color-border-light); + border-radius: fun.convert-px(5); + + &--error { + border-color: var(--color-token-red); + } + + &--success { + border-color: var(--color-token-green); + } + + &--warning { + border-color: var(--color-token-orange); + } +} diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx new file mode 100644 index 0000000..6ab1e2b --- /dev/null +++ b/src/components/ContactForm/ContactForm.tsx @@ -0,0 +1,155 @@ +import { ButtonSubmit } from '@components/Buttons'; +import { Form, FormItem, Input, TextArea } from '@components/Form'; +import { sendMail } from '@services/graphql/mutations'; +import { settings } from '@utils/config'; +import { FormEvent, useState } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './ContactForm.module.scss'; + +type Status = 'success' | 'error' | 'warning'; + +const ContactForm = () => { + const intl = useIntl(); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [subject, setSubject] = useState(''); + const [message, setMessage] = useState(''); + const [status, setStatus] = useState(); + const [statusMessage, setStatusMessage] = useState(''); + + const resetForm = () => { + setName(''); + setEmail(''); + setSubject(''); + setMessage(''); + }; + + const submitHandler = async (e: FormEvent) => { + e.preventDefault(); + + if (!name || !email || !message) { + setStatus('warning'); + setStatusMessage( + intl.formatMessage({ + defaultMessage: + 'Warning: mail not sent. Some required fields are empty.', + description: 'ContactForm: missing fields message.', + }) + ); + return; + } + + const messageHTML = message.replace(/\r?\n/g, '
'); + const body = `Message received from ${name} <${email}> on ${settings.url}.

${messageHTML}`; + const replyTo = `${name} <${email}>`; + const data = { + body, + mutationId: 'contact', + replyTo, + subject, + }; + const mail = await sendMail(data); + + if (mail.sent) { + setStatus('success'); + setStatusMessage( + intl.formatMessage({ + defaultMessage: + 'Thanks. Your message was successfully sent. I will answer it as soon as possible.', + description: 'ContactForm: success message', + }) + ); + resetForm(); + } else { + const errorPrefix = intl.formatMessage({ + defaultMessage: 'An error occurred:', + description: 'ContactForm: error message', + }); + const error = `${errorPrefix} ${mail.message}`; + setStatus('error'); + setStatusMessage(error); + } + }; + + const getStatus = () => { + if (!status) return <>; + + const statusModifier = `status--${status}`; + + return ( +

+ {statusMessage} +

+ ); + }; + + return ( + <> +
+ + + + + + + + + + +