From c14a08f57e84ffa70272573644bdf830db4ed158 Mon Sep 17 00:00:00 2001
From: Iain Coughtrie <iaincoughtrie@gmail.com>
Date: Fri, 2 Nov 2018 17:01:00 +0200
Subject: [PATCH] Making it functional

---
 app/components/contactForm.jsx | 129 ++++++++++++++++++++++++---------
 1 file changed, 96 insertions(+), 33 deletions(-)

diff --git a/app/components/contactForm.jsx b/app/components/contactForm.jsx
index 0b29ef1..24b3605 100644
--- a/app/components/contactForm.jsx
+++ b/app/components/contactForm.jsx
@@ -1,41 +1,104 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
+import fetchWP from '../utils/fetchWP';
 
 export default class ContactForm extends React.Component {
- 
-  render() {    
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false,
+      submitted: false,
+      name: '',
+      email: '',
+      message: '',
+    };
+
+    this.fetchWP = new fetchWP({
+      restURL: this.props.wpObject.api_url,
+      restNonce: this.props.wpObject.api_nonce,
+    });
+  }
+
+  handleInputChange = (event) => {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+
+    this.fetchWP.post( 'submission', {
+      name: this.state.name, 
+      email: this.state.email,
+      message: this.state.message, 
+    } )
+    .then(
+      (json) => {
+        this.setState({
+          submitted: true,
+          error: false
+        }),
+        console.log(`New Contact Submission: ${json.value}`)
+      },
+      (err) => this.setState({
+        error: err.message
+      }),
+    );
+  }
+
+  render() {
+    const contactForm = this.state.submitted ? <p>Thanks for getting in touch!</p> :
+      <form onSubmit={this.handleSubmit}>
+        <label>
+        Name:
+          <input
+            type="text"
+            name="name"
+            onChange={this.handleInputChange}
+          />
+        </label>
+
+        <label>
+        Email:
+          <input
+            type="email"
+            name="email"
+            onChange={this.handleInputChange}
+          />
+        </label>
+
+        <label>
+        Message:
+          <textarea 
+            name="message"
+            onChange={this.handleInputChange}
+          />
+        </label>
+
+        <button
+          className="button button-primary"
+          onClick={this.handleSubmit}
+        >Submit</button>
+
+      </form>;
+
+    const error = this.state.error ? <p className="error">{this.state.error}</p> : '';
+      
     return (
       <div>
-        <form>
-          <label>
-          Name:
-            <input
-              type="text"
-              name="name"
-            />
-          </label>
-
-          <label>
-          Email:
-            <input
-              type="email"
-              name="email"
-            />
-          </label>
-
-          <label>
-          Message:
-            <textarea 
-              name="message"
-            />
-          </label>
-
-          <button
-            id="submit"
-            className="button button-primary"
-          >Submit</button>
-
-        </form>;
+        {contactForm}
+        {error}
       </div>
     );
   }
-}
\ No newline at end of file
+}
+
+ContactForm.propTypes = {
+  wpObject: PropTypes.object
+};
\ No newline at end of file