Pre-deployment

web/src/pages/ContactPage/ContactPage.js

@@ -0,0 +1,95 @@
+import {
+  Form,
+  TextField,
+  TextAreaField,
+  Submit,
+  FieldError,
+  Label,
+  FormError,
+} from '@redwoodjs/forms'
+import { Flash,useFlash,useMutation } from '@redwoodjs/web'
+import { useForm } from 'react-hook-form'
+import BlogLayout from 'src/layouts/BlogLayout'
+
+const CREATE_CONTACT = gql`
+  mutation CreateContactMutation($input: CreateContactInput!) {
+    createContact(input: $input) {
+      id
+    }
+  }
+`
+
+const ContactPage = () => {
+  const formMethods = useForm()
+  const { addMessage } = useFlash()
+
+  const [create,{ loading,error }] = useMutation(CREATE_CONTACT,{
+    onCompleted: () => {
+      addMessage('Thank you for your submission!',{
+        style: { backgroundColor: 'green',color: 'white',padding: '1rem' },
+      })
+      formMethods.reset()
+    },
+  })
+
+  const onSubmit = (data) => {
+    create({ variables: { input: data } })
+    console.log(data)
+  }
+
+  return (
+    <BlogLayout>
+      <Flash timeout={1000} />
+      <Form
+        onSubmit={onSubmit}
+        validation={{ mode: 'onBlur' }}
+        error={error}
+        formMethods={formMethods}
+      >
+        <FormError
+          error={error}
+          wrapperStyle={{ color: 'red',backgroundColor: 'lavenderblush' }}
+        />
+        <Label name="name" errorClassName="error">
+          Name
+        </Label>
+        <TextField
+          name="name"
+          validation={{ required: true }}
+          errorClassName="error"
+        />
+        <FieldError name="name" className="error" />
+
+        <Label name="name" errorClassName="error">
+          Email
+        </Label>
+        <TextField
+          name="email"
+          validation={{
+            required: true,
+            pattern: {
+              value: /[^@]+@[^.]+\..+/,
+              message: 'Please enter a valid email address',
+            },
+          }}
+          errorClassName="error"
+        />
+        <FieldError name="email" className="error" />
+
+        <Label name="name" errorClassName="error">
+          Message
+        </Label>
+        <TextAreaField
+          name="message"
+          validation={{ required: true }}
+          errorClassName="error"
+        />
+        <FieldError name="message" className="error" />
+
+        <Submit disabled={loading}>Save</Submit>
+      </Form>
+    </BlogLayout>
+  )
+}
+
+export default ContactPage