Universal React forms

client-render.js

@@ -4,8 +4,6 @@ import { Router, browserHistory } from 'react-router';
 
 import { routes } from './routes';
 
-// import createBrowserHistory from 'history/lib/createBrowserHistory';
-
 ReactDOM.render(
   <Router routes={routes} history={browserHistory} />,
   document.getElementById('app')

components/about.js

@@ -1,10 +1,23 @@
 import React from 'react';
+import EmailForm from './email-form';
 
 export default class AboutComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    const { success, errors, value } = this.props.location.query;
+    if (success) {
+      this.emailFormProps = {
+        success: success === "true",
+        errors: errors && errors.split(',') || [],
+        value
+      }
+    }
+  }
   render() {
     return (
       <div>
         <p>A little bit about me.</p>
+        <EmailForm {...this.emailFormProps} />
       </div>
     );
   }

components/email-form.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Link } from 'react-router';
+import validateEmailForm from './validate-email-form';
+
+export default class EmailForm extends React.Component {
+  constructor(props) {
+    super(props);
+    const { success, errors, value } = props;
+    this.state = {
+      success,
+      errors,
+      value: value || ''
+    };
+    this.formSubmit = this.formSubmit.bind(this);
+    this.inputChange = this.inputChange.bind(this);
+    this.resetForm = this.resetForm.bind(this);
+  }
+
+  formSubmittedSuccessfully() {
+    return this.state.success === true;
+  }
+
+  inputChange(e) {
+    this.setState({
+      value: e.target.value
+    });
+  }
+
+  resetForm(e) {
+    e.preventDefault();
+    this.setState({
+      success: undefined,
+      errors: [],
+      value: ''
+    });
+  }
+
+  formSubmit(e) {
+    e.preventDefault();
+    const emailValue = this.state.value;
+    // note how this is the same validator we ran on the server!
+    const result = validateEmailForm(emailValue);
+    // at this point you could POST to an endpoint to save
+    // this to the database, or do whatever you need to
+    this.setState({
+      errors: result.errors,
+      success: result.valid
+    });
+  }
+
+  renderErrorsList() {
+    return this.state.errors.map((err) => {
+      return (
+        <li className="form-error" key={err}>
+          <p>{err}</p>
+        </li>
+      );
+    });
+  }
+
+  renderForm() {
+    return (
+      <form method="post" action="/submit-email-form" onSubmit={this.formSubmit}>
+
+        <div className="field">
+          <label>Your email address</label>
+          <input
+            onChange={this.inputChange}
+            type="text" 
+            value={this.state.value} 
+            name="email" 
+            placeholder="[email protected]"
+            ref="emailInput" />
+        </div>
+        <button type="submit">Send</button>
+      </form>
+    );
+  }
+
+  renderSuccess() {
+    return (
+      <div>
+        <p>Thanks, {this.state.value} has been added to our totally cool list.</p>
+        <a href="/about" onClick={this.resetForm}>Reset page</a>
+      </div>
+    )
+  }
+
+  renderErrors() {
+    if (this.state.errors && this.state.errors.length > 0) {
+      return (
+        <div>
+          <h5>There were errors submitting this form.</h5>
+          <ul>{this.renderErrorsList()}</ul>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        { this.renderErrors() }
+        { this.formSubmittedSuccessfully() ? this.renderSuccess() : this.renderForm() }
+      </div>
+    )
+  }
+}
+
+EmailForm.propTypes = {
+  success: React.PropTypes.bool,
+  errors: React.PropTypes.arrayOf(React.PropTypes.string)
+};

components/validate-email-form.js

@@ -0,0 +1,20 @@
+// write any logic for your form in one file that can be used on both the client and the server
+
+export default function(email) {
+  // IRL you probably want a better check!
+  if (email.indexOf('@') > -1) {
+    return {
+      valid: true,
+      email,
+      errors: []
+    }
+  } else {
+    return {
+      valid: false,
+      email,
+      errors: [
+        `Email address ${email} is not valid`
+      ]
+    }
+  }
+}

package.json

@@ -21,6 +21,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.15.0",
     "ejs": "^2.3.4",
     "express": "^4.13.3",
     "history": "^1.13.1",
@@ -34,6 +35,7 @@
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
+    "nodemon": "^1.9.1",
     "webpack": "^1.12.9"
   }
 }

server.js

@@ -3,12 +3,17 @@ import express from 'express';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { match, RouterContext } from 'react-router';
+import bodyParser from 'body-parser';
 
 import { routes } from './routes';
 
+import validateEmailForm from './components/validate-email-form';
+
 const app = express();
 
 app.use(express.static('public'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
 
 app.set('view engine', 'ejs');
 
@@ -36,7 +41,22 @@ app.get('*', (req, res) => {
     }
   });
 });
-app.listen(3003, 'localhost', function(err) {
+
+app.post('/submit-email-form', (req, res) => {
+  const { email } = req.body;
+  const result = validateEmailForm(email);
+
+  if (result.valid === true) {
+    // here you would save this to a database, or whatever you want
+    // db.addEmail(email)
+
+    res.redirect(`/about?success=true&value=${email}`);
+  } else {
+    res.redirect(`/about?errors=${result.errors.join(',')}&success=false&value=${email}`);
+  }
+});
+
+app.listen(3003, 'localhost', (err) => {
   if (err) {
     console.log(err);
     return;