can add contacts now

Author: ryanflorence

app/components/NewContactForm.js

@@ -0,0 +1,31 @@
+/** @jsx React.DOM */
+var React = require('react');
+var Navigation = require('react-router').Navigation;
+
+var NewContactForm = module.exports = React.createClass({
+
+  mixins: [Navigation],
+
+  handleSubmit: function(event) {
+    event.preventDefault();
+    var first = this.refs.first.getDOMNode().value;
+    var last = this.refs.last.getDOMNode().value;
+    this.transitionTo('createContact', {}, {first: first, last: last});
+  },
+
+  render: function() {
+    return (
+      <form
+        action="/add-user"
+        onSubmit={this.handleSubmit}
+      >
+        <p>
+          <input ref="first" name="first" placeholder="first name"
+          /> <input ref="last" name="last" placeholder="last name"
+          /> <button type="submit">Add</button>
+        </p>
+      </form>
+    );
+  }
+});
+

app/handlers/CreateContact.js

@@ -0,0 +1,24 @@
+/** @jsx React.DOM */
+var React = require('react');
+var api = require('../utils/api');
+var ContactStore = require('../stores/ContactStore');
+
+var CreateContact = module.exports = React.createClass({
+
+  statics: {
+    willTransitionTo: function(transition, params, query) {
+      transition.wait(
+        api.post('/contacts', {contact: query}).then(function(data) {
+          ContactStore.add(data.contact);
+          transition.redirect('contact', {id: data.contact.id});
+        })
+      );
+    }
+  },
+
+  render: function() {
+    return null;
+  }
+
+});
+

app/handlers/Root.js

@@ -2,32 +2,59 @@
 var React = require('react');
 var api = require('../utils/api');
 var Link = require('react-router').Link;
+var NewContactForm = require('../components/NewContactForm');
+var ContactStore = require('../stores/ContactStore');
 
 var Root = module.exports = React.createClass({
 
   statics: {
     getRouteProps: function() {
-      var preloadedData = ENV.CLIENT && window.ROUTER_PROPS.root;
-      return preloadedData || {
-        contactData: api.get('/contacts')
+      return {
+        contacts: ContactStore.getAll()
       };
     }
   },
 
+  getInitialState: function() {
+    return {
+      contacts: this.props.contacts
+    };
+  },
+
+  componentWillReceiveProps: function(newProps) {
+    // because we have to put it on state, we have to get the new props
+    this.setState({contacts: newProps.contacts});
+  },
+
   renderContacts: function() {
-    if (!this.props.contactData) return null;
-    var contacts = this.props.contactData.contacts;
+    if (!this.props.contacts)
+      return null;
+
+    var contacts = this.state.contacts.records;
     return contacts.map(function(contact) {
       return <li key={contact.id}>
         <Link to="contact" params={{id: contact.id}}>{contact.first} {contact.last}</Link>
       </li>;
     });
   },
 
+  componentDidMount: function() {
+    ContactStore.addChangeListener(this.handleContactsChange);
+  },
+
+  componentWillUnmount: function() {
+    ContactStore.removeChangeListener(this.handleContactsChange);
+  },
+
+  handleContactsChange: function() {
+    this.setState({contactData: ContactStore.getAll()});
+  },
+
   render: function() {
     return (
       <div>
         <h1>Address Book</h1>
+        <NewContactForm/>
         <ul>
           {this.renderContacts()}
         </ul>

app/routes.js

@@ -10,6 +10,7 @@ module.exports = (
     <Route name="root" path="/" handler={require('./handlers/Root')}>
       <DefaultRoute handler={require('./handlers/Home')} />
       <Route name="contact" path="contact/:id" handler={require('./handlers/Contact')} />
+      <Route name="createContact" handler={require('./handlers/CreateContact')} />
     </Route>
   </Routes>
 );

app/stores/ContactStore.js

@@ -0,0 +1,44 @@
+var Promise = require('when');
+var api = require('../utils/api');
+var EventEmitter = require('events').EventEmitter;
+var k = function() {};
+var mergeInto = require('react/lib/mergeInto');
+
+var _events = new EventEmitter();
+
+var _state = {
+  loaded: false,
+  records: []
+};
+
+if (ENV.CLIENT && window.ROUTER_PROPS.root) {
+  mergeInto(_state, window.ROUTER_PROPS.root.contacts);
+}
+
+exports.getAll = function() {
+  if (_state.loaded) {
+    // MUST BE SYNC. Otherwise we render one the client once while waiting for
+    // the promise and then the checksum doesn't match up
+    return _state;
+  }
+
+  return api.get('/contacts').then(function(data) {
+    _state.loaded = true;
+    _state.records = data.contacts;
+    return _state;
+  });
+};
+
+exports.add = ENV.CLIENT ? function(contact) {
+  _state.records.push(contact);
+  _events.emit('change');
+} : k;
+
+exports.addChangeListener = function(fn) {
+  _events.on('change', fn);
+};
+
+exports.removeChangeListener = function(fn) {
+  _events.off('change', fn);
+};
+

app/utils/api.js

@@ -7,3 +7,9 @@ exports.get = function(url) {
   });
 };
 
+exports.post = function(url, data) {
+  return axios.post(HOST+url, data).then(function(res) {
+    return res.data;
+  });
+};
+