From eaeb432fe6bcef0c84346045004b438c08c19f42 Mon Sep 17 00:00:00 2001
From: Francesco Manzali <fmanzali@nextbit.it>
Date: Tue, 19 Oct 2021 10:43:42 +0200
Subject: [PATCH] Fix import on useForm + validate e-mail

---
 web/src/pages/ContactPage/ContactPage.js | 136 ++++++++++++-----------
 1 file changed, 71 insertions(+), 65 deletions(-)

diff --git a/web/src/pages/ContactPage/ContactPage.js b/web/src/pages/ContactPage/ContactPage.js
index 65a066e..f91cded 100644
--- a/web/src/pages/ContactPage/ContactPage.js
+++ b/web/src/pages/ContactPage/ContactPage.js
@@ -6,10 +6,10 @@ import {
   FieldError,
   Label,
   FormError,
+  useForm,
 } from '@redwoodjs/forms'
 import { useMutation } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
-import { useForm } from 'react-hook-form'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
@@ -34,75 +34,81 @@ const ContactPage = () => {
     console.log(data)
   }
 
-  return <>
-    <Toaster />
-    <Form
-      onSubmit={onSubmit}
-      config={{ mode: 'onBlur' }}
-      error={error}
-      formMethods={formMethods}
-    >
-      <FormError
+  return (
+    <>
+      <Toaster />
+      <Form
+        onSubmit={onSubmit}
+        config={{ mode: 'onBlur' }}
         error={error}
-        wrapperClassName="py-4 px-6 rounded-lg bg-red-100 text-red-700"
-        listClassName="list-disc ml-4"
-        listItemClassName=""
-      />
-      <Label
-        name="name"
-        className="block text-gray-700 uppercase text-sm"
-        errorClassName="block uppercase text-sm text-red-700"
+        formMethods={formMethods}
       >
-        Name
-      </Label>
-      <TextField
-        name="name"
-        validation={{ required: true }}
-        className="border rounded-sm px-2 py-1 outline-none"
-        errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
-      />
-      <FieldError name="name" className="block text-red-700" />
+        <FormError
+          error={error}
+          wrapperClassName="py-4 px-6 rounded-lg bg-red-100 text-red-700"
+          listClassName="list-disc ml-4"
+          listItemClassName=""
+        />
+        <Label
+          name="name"
+          className="block text-gray-700 uppercase text-sm"
+          errorClassName="block uppercase text-sm text-red-700"
+        >
+          Name
+        </Label>
+        <TextField
+          name="name"
+          validation={{ required: true }}
+          className="border rounded-sm px-2 py-1 outline-none"
+          errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
+        />
+        <FieldError name="name" className="block text-red-700" />
 
-      <Label
-        name="name"
-        className="block mt-8 text-gray-700 uppercase text-sm"
-        errorClassName="block mt-8 text-red-700 uppercase text-sm"
-      >
-        Email
-      </Label>
-      <TextField
-        name="email"
-        validation={{
-          required: true,
-        }}
-        className="border rounded-sm px-2 py-1"
-        errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
-      />
-      <FieldError name="email" className="block text-red-700" />
+        <Label
+          name="name"
+          className="block mt-8 text-gray-700 uppercase text-sm"
+          errorClassName="block mt-8 text-red-700 uppercase text-sm"
+        >
+          Email
+        </Label>
+        <TextField
+          name="email"
+          validation={{
+            required: true,
+            pattern: {
+              value: /[^@]+@[^.]+\..+/,
+              message: 'Please enter a valid email address',
+            },
+          }}
+          className="border rounded-sm px-2 py-1"
+          errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
+        />
+        <FieldError name="email" className="block text-red-700" />
 
-      <Label
-        name="name"
-        className="block mt-8 text-gray-700 uppercase text-sm"
-        errorClassName="block mt-8 text-red-700 uppercase text-sm"
-      >
-        Message
-      </Label>
-      <TextAreaField
-        name="message"
-        validation={{ required: true }}
-        className="block border rounded-sm px-2 py-1"
-        errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none"
-      />
-      <FieldError name="message" className="block text-red-700" />
+        <Label
+          name="name"
+          className="block mt-8 text-gray-700 uppercase text-sm"
+          errorClassName="block mt-8 text-red-700 uppercase text-sm"
+        >
+          Message
+        </Label>
+        <TextAreaField
+          name="message"
+          validation={{ required: true }}
+          className="block border rounded-sm px-2 py-1"
+          errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none"
+        />
+        <FieldError name="message" className="block text-red-700" />
 
-      <Submit
-        className="block bg-blue-700 text-white mt-8 px-4 py-2 rounded"
-        disabled={loading}
-      >
-        Save
-      </Submit>
-    </Form>
-  </>;
+        <Submit
+          className="block bg-blue-700 text-white mt-8 px-4 py-2 rounded"
+          disabled={loading}
+        >
+          Save
+        </Submit>
+      </Form>
+    </>
+  )
 }
 
 export default ContactPage