From efed6c0a820c5c47e097fa29455157bbd318ffca Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 17 Dec 2021 23:28:17 +0100
Subject: chore: create mutation to send mail from contact form

---
 src/pages/contact.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

(limited to 'src/pages/contact.tsx')

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"
-- 
cgit v1.2.3

