Contact Page Finally Implemented

public/input/Input.jsx

@@ -25,13 +25,44 @@ import React from 'react';
 
 import Button from './button/Button';
 import ButtonGroup from './button/ButtonGroup';
-import Form from './form/Form';
+import Form, { FormManager } from './form/Form';
 import InputGroup from './group/InputGroup';
 import Label from './label/Label';
 
 export default class Input extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      value: props.value
+    };
+  }
+
+  onChange(e, a, b) {
+    //Self explanitory
+    if(this.props.onChange) {
+      if(this.props.onChange(e) === false) return false;
+    }
+
+    if(this.props.manager) {
+      if(this.props.manager.onChange(this, e) === false) return false;
+    }
+
+    this.setState({
+      value: e.target.value
+    });
+  }
+
+  componentDidMount() {
+    if(this.props.manager) {
+      this.props.manager.addInput(this);
+    }
+  }
+
+  componentWillUnmount() {
+    if(this.props.manager) {
+      this.props.manager.removeInput(this);
+    }
   }
 
   render() {
@@ -80,11 +111,28 @@ export default class Input extends React.Component {
 
     //First we need to switch things like submit and reset
     if(type == "submit" || type == "reset" || type == "button") {
-      return <Button {...this.props} />;
+      return (<Button
+        {...this.props}
+        className={this.props.className}
+        value={this.state.value}
+      />);
+
     } else if(type == "textarea") {
-      element = <textarea {...this.props} className={innerClazzes}>{ value }</textarea>
+      element = (<textarea
+          {...this.props}
+          className={innerClazzes}
+          onChange={this.onChange.bind(this)}
+        >{ this.state.value }</textarea>
+      );
+
     } else {
-      element = <ElementType {...this.props} type={type} className={innerClazzes} />
+      element = (<ElementType
+        {...this.props}
+        onChange={this.onChange.bind(this)}
+        type={type}
+        value={ this.state.value }
+        className={innerClazzes}
+      />);
     }
 
     return (
@@ -103,6 +151,7 @@ export {
   Button,
   ButtonGroup,
   Form,
+  FormManager,
   InputGroup,
   TextArea,
   Label

public/input/form/Form.jsx

@@ -23,6 +23,7 @@
 
 import React from 'react';
 import Loader, { LoaderBackdrop } from './../../loading/Loader';
+import Input, { InputGroup, TextArea } from './../Input';
 
 export default class Form extends React.Component {
   constructor(props) {
@@ -34,7 +35,8 @@ export default class Form extends React.Component {
       loader: props.loader || false,
       loading: false,
       onSubmit: props.onSubmit,
-      contentType: props.contentType || props.encType || "application/x-www-form-urlencoded"
+      contentType: props.contentType || props.encType || "application/x-www-form-urlencoded",
+      manager: props.manager
     };
 
     //Determine action and method based off the internals
@@ -71,10 +73,25 @@ export default class Form extends React.Component {
       submitting: true
     });
 
+    //Prepare our data
+    let data;
+    if(this.props.manager) {
+      data = this.props.manager.getFormData();
+    }
+
+    if(this.state.contentType == "application/json") {
+      let dataJson = {};
+      data.forEach(function(value, key) {
+        dataJson[key] = value;
+      });
+      data = JSON.stringify(dataJson);
+    }
+
     //Prepare our request.
     fetch(this.state.action, {
       method: this.state.method,
       mode: this.state.mode,
+      body: data,
       headers: {
         "Content-Type": this.state.contentType
       }
@@ -87,21 +104,40 @@ export default class Form extends React.Component {
   }
 
   onSubmitted(response) {
+    let method = 'text';
+    let isJson = response.headers.get("Content-Type").toLowerCase().indexOf("application/json") !== -1;
+    if(isJson) method = 'json';
+
     if(!response.ok) {
-      throw Error(response.statusText);
+      let is4xx = Math.floor(response.status / 400) === 1;
+      if(is4xx) {
+        return response[method]()
+          .then(this.onErrorText.bind(this))
+          .catch(this.onError.bind(this))
+        ;
+      } else {
+        throw Error(response.statusText);
+      }
     }
 
     if(this.props.onData) return this.props.onData(response);
 
     //Handle the old fashioned way (expect json)
-    response.json().then(this.onJSON.bind(this)).catch(this.onError.bind(this));
+    response[method]()
+      .then(this.onData.bind(this))
+      .catch(this.onError.bind(this))
+    ;
   }
 
-  onJSON(response) {
-    if(this.props.onJSON) return this.props.onJSON(response);
+  onData(response) {
+    if(this.props.onSuccess) return this.props.onSuccess(response);
     console.log(response);
   }
 
+  onErrorText(e,a,b) {
+    this.onError(e,a,b);
+  }
+
   onError(e, a, b) {
     this.setState({
       loading: false,
@@ -142,3 +178,39 @@ export default class Form extends React.Component {
     );
   }
 }
+
+//FormManager
+class FormManager {
+  constructor() {
+    this.forms = [];
+    this.inputs = [];
+  }
+
+  addInput(input) {
+    this.inputs.push(input);
+  }
+
+  removeInput(input) {
+    let i = this.forms.indexOf(input);
+    if(i === -1) return;
+    this.inputs.splice(i, 1);
+  }
+
+  onChange(input, event) {
+  }
+
+  getFormData() {
+    let data = new FormData();
+
+    for(let i = 0; i < this.inputs.length; i++) {
+      let input = this.inputs[i];
+      data.append(input.props.name, input.state.value);
+    }
+
+    return data;
+  }
+}
+
+export {
+  FormManager
+};