app.js

/** @jsx React.DOM */
var React = require('react');
var Router = require('react-router');
var whenKeys = require('when/keys');
var EventEmitter = require('events').EventEmitter;
var { Route, DefaultRoute, NotFoundRoute, ActiveRouteHandler } = Router;
var { Link, Navigation, ActiveState } = Router;

var API = 'http://addressbook-api.herokuapp.com';
var loadingEvents = new EventEmitter();

var App = React.createClass({

  statics: {
    fetchData (params) {
      return getJSON(`${API}/contacts`).then((res) => res.contacts);
    }
  },

  getInitialState () {
    return { loading: false };
  },

  componentDidMount () {
    loadingEvents.on('loadstart',() => this.setState({loading: true}));
    loadingEvents.on('loadend', () => this.setState({loading: false}));
  },

  renderContacts () {
    return this.props.data.contacts.map((contact) => {
      return (
        <li>
          <Link to="contact" params={contact}>{contact.first} {contact.last}</Link>
        </li>
      );
    });
  },

  render () {
    return (
      <div className={this.state.loading ? 'loading' : ''}>
        <ul>
          {this.renderContacts()}
        </ul>
        <ActiveRouteHandler {...this.props}/>
      </div>
    );
  }
});

var Contact = React.createClass({
  statics: {
    fetchData (params) {
      return getJSON(`${API}/contacts/${params.id}`).then((res) => res.contact);
    }
  },

  render () {
    var { contact } = this.props.data;
    return (
      <div>
        <h1>{contact.first} {contact.last}</h1>
        <img key={contact.avatar} src={contact.avatar}/>
      </div>
    );
  }
});

var routes = (
  <Route name="contacts" path="/" handler={App}>
    <Route name="contact" path="contact/:id" handler={Contact}/>
  </Route>
);

Router.run(routes, function (Handler, state) {
  // problem here is that this emits, but all the contexts have changed for `Handler`
  // so rerenders aren't correct, need an event or something before we do any work
  // in the router
  loadingEvents.emit('loadstart');
  fetchData(state.matches, state.activeParams).then((data) => {
    React.render(<Handler data={data} />, document.getElementById('example'), function() {
      loadingEvents.emit('loadend');
    });
  });
});

function fetchData(matches, params) {
  return whenKeys.all(matches.filter((match) => {
    return match.route.handler.fetchData;
  }).reduce((data, match) => {
    var {name, handler} = match.route;
    data[name] = handler.fetchData(params);
    return data;
  }, {}));
}

function getJSON(url) {
  return new Promise((resolve, reject) => {
    var req = new XMLHttpRequest();
    req.onload = function () {
      if (req.status === 404) {
        reject(new Error('not found'));
      } else {
        resolve(JSON.parse(req.response));
      }
    };
    req.open('GET', url);
    req.send();
  });
}