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] <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