add contact page

web/src/Routes.js

@@ -12,6 +12,7 @@ import { Router, Route } from '@redwoodjs/router'
 const Routes = () => {
   return (
     <Router>
+      <Route path="/contact" page={ContactPage} name="contact" />
       <Route path="/parts/new" page={NewPartPage} name="newPart" />
       <Route path="/parts/{id:Int}/edit" page={EditPartPage} name="editPart" />
       <Route path="/parts/{id:Int}" page={PartPage} name="part" />

web/src/index.css

@@ -0,0 +1,17 @@
+
+button, input, label, textarea {
+  display: block;
+  outline: none;
+}
+
+label {
+  margin-top: 1rem;
+}
+
+.error {
+  color: red;
+}
+
+input.error, textarea.error {
+  border: 1px solid red;
+}

web/src/index.js

@@ -5,11 +5,11 @@ import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
 import './scaffold.css'
-import './index.css'
 import 'golden-layout/src/css/goldenlayout-base.css'
 import 'golden-layout/src/css/goldenlayout-dark-theme.css'
 import './cascade/css/main.css'
 import 'monaco-editor/min/vs/editor/editor.main.css'
+import './index.css'
 
 ReactDOM.render(
   <FatalErrorBoundary page={FatalErrorPage}>

web/src/layouts/MainLayout/MainLayout.js

@@ -15,6 +15,9 @@ const MainLayout = ({ children }) => {
             <li>
               <Link to={routes.parts()}>Parts</Link>
             </li>
+            <li>
+              <Link to={routes.contact()}>Contact</Link>
+            </li>
           </ul>
         </nav>
       </header>

web/src/pages/ContactPage/ContactPage.js

@@ -0,0 +1,59 @@
+import { Form, TextField, Submit, TextAreaField, FieldError, FormError } from '@redwoodjs/forms'
+import { useMutation, Flash, useFlash } from '@redwoodjs/web'
+import MainLayout from 'src/layouts/MainLayout'
+import { useForm } from 'react-hook-form'
+
+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 = async (data) => {
+    try {
+      await create({ variables: { input: data } })
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return (
+    <MainLayout>
+      <Flash timeout={2000} />
+      <Form onSubmit={onSubmit} validation={{ mode: 'onBlur' }} error={error} formMethods={formMethods}>
+        <FormError
+          error={error}
+          wrapperStyle={{ color: 'red', backgroundColor: 'lavenderblush' }}
+        />
+        <label htmlFor="name">Name</label>
+        <TextField name="name" validation={{required: true}} errorClassName="error" />
+        <FieldError name="name" className="error" />
+
+        <label htmlFor="email">Email</label>
+        <TextField name="email" validation={{required: true}} errorClassName="error" />
+        <FieldError name="email" className="error" />
+
+        <label htmlFor="message">Message</label>
+        <TextAreaField name="message" validation={{required: true}} errorClassName="error" />
+        <FieldError name="message" className="error" />
+
+        <Submit disabled={loading}>Save</Submit>
+      </Form>
+    </MainLayout>
+  )
+}
+
+export default ContactPage

web/src/pages/ContactPage/ContactPage.stories.js

@@ -0,0 +1,7 @@
+import ContactPage from './ContactPage'
+
+export const generated = () => {
+  return <ContactPage />
+}
+
+export default { title: 'Pages/ContactPage' }

web/src/pages/ContactPage/ContactPage.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import ContactPage from './ContactPage'
+
+describe('ContactPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ContactPage />)
+    }).not.toThrow()
+  })
+})