From 8e516df834b9b4369e4b094d8d74c946d994b883 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Wed, 24 Jan 2018 12:10:43 +1000
Subject: [PATCH 1/3] Add SimpleForm Ajax

---
 package.json                            |  1 +
 src/components/EnquiryFormSimpleAjax.js | 88 +++++++++++++++++++++++++
 src/views/Contact.js                    |  5 +-
 yarn.lock                               | 10 +++
 4 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EnquiryFormSimpleAjax.js

diff --git a/package.json b/package.json
index 653d974..260fe45 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@researchgate/react-intersection-observer": "^0.6.0",
     "core-js": "^2.5.3",
+    "dom-form-serializer": "^1.0.7",
     "intersection-observer": "^0.5.0",
     "lodash": "^4.17.4",
     "netlify-identity-widget": "^1.2.0",
diff --git a/src/components/EnquiryFormSimpleAjax.js b/src/components/EnquiryFormSimpleAjax.js
new file mode 100644
index 0000000..c8dd891
--- /dev/null
+++ b/src/components/EnquiryFormSimpleAjax.js
@@ -0,0 +1,88 @@
+import React from 'react'
+import { stringify } from 'qs'
+import { serialize } from 'dom-form-serializer'
+import './EnquiryForm.css'
+
+const handleSubmit = e => {
+  e.preventDefault()
+  const form = e.target
+  const data = serialize(form)
+  console.log(data)
+  fetch(form.action + '?' + stringify(data), {
+    method: 'POST'
+  })
+    .then(res => {
+      if (res.ok) {
+        return res
+      } else {
+        throw new Error('Network error')
+      }
+    })
+    .catch(console.error)
+}
+
+export default ({
+  name = 'Simple Form Ajax',
+  subject = '', // optional subject of the notification email
+  action = ''
+}) => (
+  <form
+    className='EnquiryForm'
+    name={name}
+    action={action}
+    onSubmit={handleSubmit}
+    data-netlify=''
+    data-netlify-honeypot='_gotcha'
+  >
+    <label className='EnquiryForm--Label'>
+      <input
+        className='EnquiryForm--Input'
+        type='text'
+        placeholder='Name'
+        name='name'
+        required
+      />
+    </label>
+    <label className='EnquiryForm--Label'>
+      <input
+        className='EnquiryForm--Input'
+        type='email'
+        placeholder='Email'
+        name='email'
+        required
+      />
+    </label>
+    <label className='EnquiryForm--Label has-arrow'>
+      <select
+        className='EnquiryForm--Input EnquiryForm--Select'
+        name='type'
+        placeholder='Type of enquiry'
+        required
+      >
+        <option selected disabled hidden>
+          Type of Enquiry
+        </option>
+        <option>Need to know more</option>
+        <option>Found a bug</option>
+        <option>Want to say hello</option>
+      </select>
+    </label>
+    <label className='EnquiryForm--Label'>
+      <textarea
+        className='EnquiryForm--Input EnquiryForm--Textarea'
+        placeholder='Message'
+        name='message'
+        rows='10'
+        required
+      />
+    </label>
+    <input type='text' name='_gotcha' style={{ display: 'none' }} />
+    {!!subject && <input type='hidden' name='subject' value={subject} />}
+    <input type='hidden' name='form-name' value={name} />
+    <input
+      className='Button EnquiryForm--SubmitButton'
+      type='submit'
+      value='Enquire'
+    />
+  </form>
+)
diff --git a/src/views/Contact.js b/src/views/Contact.js
index 87e6fc4..08b0a21 100644
--- a/src/views/Contact.js
+++ b/src/views/Contact.js
@@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
 import PageHeader from '../components/PageHeader'
 import EnquiryFormControlled from '../components/EnquiryFormControlled'
 import EnquiryFormSimple from '../components/EnquiryFormSimple'
+import EnquiryFormSimpleAjax from '../components/EnquiryFormSimpleAjax'
 import Content from '../components/Content'
 import './Contact.css'
 
@@ -17,8 +18,10 @@ export default ({ page, siteTitle }) => (
         <h3>{'<EnquiryFormControlled />'}</h3>
         <EnquiryFormControlled siteTitle={siteTitle} name={'Controlled Form'} />
         <br />
-        <h3>{'<EnquiryFormSimple />'}</h3>
+        <h3>{'<EnquiryFormSimpleAjax />'}</h3>
         <EnquiryFormSimple siteTitle={siteTitle} name='Simple Form' />
+        <h3>{'<EnquiryFormSimpleAjax />'}</h3>
+        <EnquiryFormSimpleAjax siteTitle={siteTitle} name='Simple Form Ajax' />
         <em>Note: these will only work when deployed on Netlify</em>
         <br />
         <em>Also, they are active and I will receive submissions</em> 😉
diff --git a/yarn.lock b/yarn.lock
index 73acab6..54b3e11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2141,6 +2141,12 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-form-serializer@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/dom-form-serializer/-/dom-form-serializer-1.0.7.tgz#19a90f56b4d342040bf9fcc78e4f380396d3baa5"
+  dependencies:
+    matches-selector "^1.0.0"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4630,6 +4636,10 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+matches-selector@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/matches-selector/-/matches-selector-1.2.0.tgz#d1814e7e8f43e69d22ac33c9af727dc884ecf12a"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"

From f9396213387626da044a9ff5815f16670707a6f1 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Wed, 24 Jan 2018 12:41:10 +1000
Subject: [PATCH 2/3] <EnquiryFormSimpleAjax /> alert state

---
 src/components/EnquiryForm.css           |   9 +-
 src/components/EnquiryFormControlled.css |   7 -
 src/components/EnquiryFormSimple.js      |   4 +-
 src/components/EnquiryFormSimpleAjax.js  | 200 ++++++++++++++---------
 4 files changed, 129 insertions(+), 91 deletions(-)

diff --git a/src/components/EnquiryForm.css b/src/components/EnquiryForm.css
index 893328e..b4987ba 100644
--- a/src/components/EnquiryForm.css
+++ b/src/components/EnquiryForm.css
@@ -62,7 +62,8 @@
   border-color: black;
 }
 
-.EnquiryForm--Input[disabled] {
+.EnquiryForm--Input[disabled],
+.EnquiryForm--SubmitButton[disabled] {
   opacity: 0.4;
   pointer-events: none;
   cursor: progress;
@@ -72,5 +73,9 @@
   text-transform: none;
 }
 
-.EnquiryForm--SubmitButton {
+.EnquiryForm--Alert {
+  background: var(--lightGrey);
+  width: 100%;
+  text-align: center;
+  padding: 2rem;
 }
diff --git a/src/components/EnquiryFormControlled.css b/src/components/EnquiryFormControlled.css
index a7ecdec..b1d199b 100644
--- a/src/components/EnquiryFormControlled.css
+++ b/src/components/EnquiryFormControlled.css
@@ -35,10 +35,3 @@
   stroke-dasharray: 40, 0;
   stroke-dashoffset: 0;
 }
-
-.EnquiryForm--Alert {
-  background: whitesmoke;
-  width: 100%;
-  text-align: center;
-  padding: 2rem;
-}
diff --git a/src/components/EnquiryFormSimple.js b/src/components/EnquiryFormSimple.js
index 7d81497..ee1bf04 100644
--- a/src/components/EnquiryFormSimple.js
+++ b/src/components/EnquiryFormSimple.js
@@ -36,10 +36,10 @@ export default ({
       <select
         className='EnquiryForm--Input EnquiryForm--Select'
         name='type'
-        placeholder='Type of enquiry'
+        defaultValue='Type of Enquiry'
         required
       >
-        <option selected disabled hidden>
+        <option disabled hidden>
           Type of Enquiry
         </option>
         <option>Need to know more</option>
diff --git a/src/components/EnquiryFormSimpleAjax.js b/src/components/EnquiryFormSimpleAjax.js
index c8dd891..c20d947 100644
--- a/src/components/EnquiryFormSimpleAjax.js
+++ b/src/components/EnquiryFormSimpleAjax.js
@@ -1,88 +1,128 @@
 import React from 'react'
 import { stringify } from 'qs'
 import { serialize } from 'dom-form-serializer'
+
 import './EnquiryForm.css'
 
-const handleSubmit = e => {
-  e.preventDefault()
-  const form = e.target
-  const data = serialize(form)
-  console.log(data)
-  fetch(form.action + '?' + stringify(data), {
-    method: 'POST'
-  })
-    .then(res => {
-      if (res.ok) {
-        return res
-      } else {
-        throw new Error('Network error')
-      }
+const fetch = window.fetch
+
+class Form extends React.Component {
+  static defaultProps = {
+    name: 'Simple Form Ajax',
+    subject: '', // optional subject of the notification email
+    action: '',
+    successMessage: 'Thanks for your enquiry, we will get back to you soon',
+    errorMessage:
+      'There is a problem, your message has not been sent, please try contacting us via email'
+  }
+
+  state = {
+    alert: '',
+    disabled: false
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    if (this.state.disabled) return
+
+    const form = e.target
+    const data = serialize(form)
+    this.setState({ disabled: true })
+    fetch(form.action + '?' + stringify(data), {
+      method: 'POST'
     })
-    .catch(console.error)
+      .then(res => {
+        if (res.ok) {
+          return res
+        } else {
+          throw new Error('Network error')
+        }
+      })
+      .then(() => {
+        form.reset()
+        this.setState({
+          alert: this.props.successMessage,
+          disabled: false
+        })
+      })
+      .catch(err => {
+        console.error(err)
+        this.setState({
+          disabled: false,
+          alert: this.props.errorMessage
+        })
+      })
+  }
+
+  render () {
+    const { name, subject, action } = this.props
+
+    return (
+      <form
+        className='EnquiryForm'
+        name={name}
+        action={action}
+        onSubmit={this.handleSubmit}
+        data-netlify=''
+        data-netlify-honeypot='_gotcha'
+      >
+        {this.state.alert && (
+          <div className='EnquiryForm--Alert'>{this.state.alert}</div>
+        )}
+        <label className='EnquiryForm--Label'>
+          <input
+            className='EnquiryForm--Input'
+            type='text'
+            placeholder='Name'
+            name='name'
+            required
+          />
+        </label>
+        <label className='EnquiryForm--Label'>
+          <input
+            className='EnquiryForm--Input'
+            type='email'
+            placeholder='Email'
+            name='email'
+            required
+          />
+        </label>
+        <label className='EnquiryForm--Label has-arrow'>
+          <select
+            className='EnquiryForm--Input EnquiryForm--Select'
+            name='type'
+            defaultValue='Type of Enquiry'
+            required
+          >
+            <option disabled hidden>
+              Type of Enquiry
+            </option>
+            <option>Need to know more</option>
+            <option>Found a bug</option>
+            <option>Want to say hello</option>
+          </select>
+        </label>
+        <label className='EnquiryForm--Label'>
+          <textarea
+            className='EnquiryForm--Input EnquiryForm--Textarea'
+            placeholder='Message'
+            name='message'
+            rows='10'
+            required
+          />
+        </label>
+        <input type='text' name='_gotcha' style={{ display: 'none' }} />
+        {!!subject && <input type='hidden' name='subject' value={subject} />}
+        <input type='hidden' name='form-name' value={name} />
+        <input
+          className='Button EnquiryForm--SubmitButton'
+          type='submit'
+          value='Enquire'
+          disabled={this.state.disabled}
+        />
+      </form>
+    )
+  }
 }
 
-export default ({
-  name = 'Simple Form Ajax',
-  subject = '', // optional subject of the notification email
-  action = ''
-}) => (
-  <form
-    className='EnquiryForm'
-    name={name}
-    action={action}
-    onSubmit={handleSubmit}
-    data-netlify=''
-    data-netlify-honeypot='_gotcha'
-  >
-    <label className='EnquiryForm--Label'>
-      <input
-        className='EnquiryForm--Input'
-        type='text'
-        placeholder='Name'
-        name='name'
-        required
-      />
-    </label>
-    <label className='EnquiryForm--Label'>
-      <input
-        className='EnquiryForm--Input'
-        type='email'
-        placeholder='Email'
-        name='email'
-        required
-      />
-    </label>
-    <label className='EnquiryForm--Label has-arrow'>
-      <select
-        className='EnquiryForm--Input EnquiryForm--Select'
-        name='type'
-        placeholder='Type of enquiry'
-        required
-      >
-        <option selected disabled hidden>
-          Type of Enquiry
-        </option>
-        <option>Need to know more</option>
-        <option>Found a bug</option>
-        <option>Want to say hello</option>
-      </select>
-    </label>
-    <label className='EnquiryForm--Label'>
-      <textarea
-        className='EnquiryForm--Input EnquiryForm--Textarea'
-        placeholder='Message'
-        name='message'
-        rows='10'
-        required
-      />
-    </label>
-    <input type='text' name='_gotcha' style={{ display: 'none' }} />
-    {!!subject && <input type='hidden' name='subject' value={subject} />}
-    <input type='hidden' name='form-name' value={name} />
-    <input
-      className='Button EnquiryForm--SubmitButton'
-      type='submit'
-      value='Enquire'
-    />
-  </form>
-)
+export default Form

From 0524bf3a3cbfda12310dde14adba1a3ef2394b44 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Wed, 24 Jan 2018 12:42:37 +1000
Subject: [PATCH 3/3] Reorder form components /contact/

---
 src/views/Contact.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/Contact.js b/src/views/Contact.js
index 08b0a21..7aa4b6b 100644
--- a/src/views/Contact.js
+++ b/src/views/Contact.js
@@ -14,14 +14,15 @@ export default ({ page, siteTitle }) => (
     <div className='Section thin'>
       <div className='Container'>
         <Content source={page.content} />
+        <h3>{'<EnquiryFormSimple />'}</h3>
+        <EnquiryFormSimple name='Simple Form' />
+        <br />
+        <h3>{'<EnquiryFormSimpleAjax />'}</h3>
+        <EnquiryFormSimpleAjax name='Simple Form Ajax' />
         <br />
         <h3>{'<EnquiryFormControlled />'}</h3>
         <EnquiryFormControlled siteTitle={siteTitle} name={'Controlled Form'} />
         <br />
-        <h3>{'<EnquiryFormSimpleAjax />'}</h3>
-        <EnquiryFormSimple siteTitle={siteTitle} name='Simple Form' />
-        <h3>{'<EnquiryFormSimpleAjax />'}</h3>
-        <EnquiryFormSimpleAjax siteTitle={siteTitle} name='Simple Form Ajax' />
         <em>Note: these will only work when deployed on Netlify</em>
         <br />
         <em>Also, they are active and I will receive submissions</em> 😉