diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-12-17 23:28:17 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-12-17 23:28:17 +0100 |
| commit | efed6c0a820c5c47e097fa29455157bbd318ffca (patch) | |
| tree | 0c52968f8619ce62ba6f442c84dec10fbce4214d /src/pages/contact.tsx | |
| parent | 42315639d14ead79b5fac04508df8be793bbbc0b (diff) | |
chore: create mutation to send mail from contact form
Diffstat (limited to 'src/pages/contact.tsx')
| -rw-r--r-- | src/pages/contact.tsx | 24 |
1 files changed, 22 insertions, 2 deletions
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index 15e1ad5..bfdd681 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -3,17 +3,19 @@ import { Form, FormItem, Input, TextArea } from '@components/Form'; import Layout from '@components/Layouts/Layout'; import { seo } from '@config/seo'; import { t } from '@lingui/macro'; +import { sendMail } from '@services/graphql/contact'; import { NextPageWithLayout } from '@ts/types/app'; import { loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; -import { ReactElement, useState } from 'react'; +import { FormEvent, ReactElement, useState } from 'react'; const ContactPage: NextPageWithLayout = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [subject, setSubject] = useState(''); const [message, setMessage] = useState(''); + const [status, setStatus] = useState(''); const resetForm = () => { setName(''); @@ -22,6 +24,23 @@ const ContactPage: NextPageWithLayout = () => { setMessage(''); }; + const submitHandler = async (e: FormEvent) => { + e.preventDefault(); + const body = `Message received from ${name} <${email}> on ArmandPhilippot.com.\n\n${message}`; + const replyTo = `${name} <${email}>`; + const mail = await sendMail(subject, body, replyTo, 'contact'); + + if (mail.sent) { + setStatus( + t`Thanks. Your message was successfully sent. I will answer it as soon as possible.` + ); + resetForm(); + } else { + const error = `${t`An error occurred:`} ${mail.message}`; + setStatus(error); + } + }; + return ( <> <Head> @@ -34,7 +53,8 @@ const ContactPage: NextPageWithLayout = () => { </header> <div> <p>{t`All fields marked with * are required.`}</p> - <Form> + {status && <p>{status}</p>} + <Form submitHandler={submitHandler}> <FormItem> <Input id="contact-name" |