example.js

import React from 'react';
import Router from 'react-router';
const { Route, DefaultRoute, RouteHandler, Link } = Router;

import MegaClient from '../mega-js';

const makePropTypes = function(schema) {
  switch (schema.type) {
  case 'string':
    return React.PropTypes.string.isRequired;
  case 'array':
    return React.PropTypes.arrayOf(makePropTypes(schema.items)).isRequired;
  case 'object':
    return React.PropTypes.shape(Object.keys(schema.properties).reduce((o, k) => Object.assign(o, {
      [k]: makePropTypes(schema.properties[k]),
    })), {}).isRequired;
  }
};

class MegaModels {
  constructor(client) {
    this._client = client;

    for (let k of client.repositories) {
      this[k] = new MegaModel(client[k]);
    }
  }
}

class MegaModel {
  constructor(repository) {
    this._repository = repository;

    for (let k of repository.links) {
      this[k] = (params) => ({
        model: repository.title,
        operation: k,
        params: params,
      });
    }
  }

  makePropTypes() {
    return makePropTypes(this._repository.schema);
  }
}

const schema = require('../mega-js/example/schema.json');
const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1c2VyX2lkIjoiNzZmNDAwMjctYjEwYi00MTNiLWEwYTYtN2EyNDI5MTQ4NThmIiwic3ViIjoiNzZmNDAwMjctYjEwYi00MTNiLWEwYTYtN2EyNDI5MTQ4NThmIiwiZXhwIjoxNDMwNDI4ODUyfQ.LM_oXHihjsDcJ4DD687JA1SekEdNkTXvu3SchvfJ6bFTHMzoos9k45qTEqdneo5jvOcdAf7IZjaozRHYQdZQXw';
const models = new MegaModels(new MegaClient(schema.definitions, token));

class Layout extends React.Component {
  render() {
    return <div>
      <Header />
      <RouteHandler />
    </div>;
  }
}

class Header extends React.Component {
  render() {
    return <header>
      <h1>what the what</h1>
    </header>;
  }
}

class Dashboard extends React.Component {
  render() {
    return <Link to="projectList">projects</Link>;
  }
}

class ProjectListItem extends React.Component {
  static propTypes = models.Project.makePropTypes();

  render() {
    return <li className="ProjectList--Item">
      <Link to="detail" params={{id: this.props.id}}>{this.props.name}</Link> ({this.props.description})
    </li>;
  }
}

class ProjectList extends React.Component {
  static propTypes = {
    projects: React.PropTypes.arrayOf(ProjectListItem.propTypes.project).isRequired,
  };

  static megaRequirements = {
    projects: models.Project.search(),
  };

  render() {
    return <ul className="ProjectList">{this.props.cats.map(cat =>
      <ProjectListItem key={cat.id} {...cat} />
    )}</ul>;
  }
}

class ProjectDetails extends React.Component {
  static propTypes = {
    project: models.Project.makePropTypes(),
  };

  static megaRequirements = {
    project: models.Project.read({id: 'projectId'}),
  };

  render() {
    return <table className="ProjectDetails">
      <tr>
        <td>Name</td>
        <td>{this.props.name}</td>
      </tr>
      <tr>
        <td>Description</td>
        <td>{this.props.description}</td>
      </tr>
      <tr>
        <td>Tags</td>
        <td>{this.props.tags.join(", ")}</td>
      </tr>
    </table>;
  }
}

class ErrorView extends React.Component {
  static propTypes = {
    err: React.PropTypes.string.isRequired,
  };

  render() {
    return <span>{this.props.err}</span>;
  }
}

const routes = (
  <Route name="layout" path="/" handler={Layout} >
    <DefaultRoute name="dashboard" handler={Dashboard} />
    <Route name="projects" path="/projects">
      <DefaultRoute name="projectList" handler={ProjectList} />
      <Route name="project" path="/projects/:projectId">
        <DefaultRoute name="projectDetails" handler={ProjectDetails} />
      </Route>
    </Route>
  </Route>
);

Router.run(routes, '/projects/77be97a8-fca1-4620-b267-d1adc0bedd5a', async function(Handler, state) {
  for (let route of state.routes) {
    if (!route.handler.megaRequirements) {
      continue;
    }

    for (let k in route.handler.megaRequirements) {
      let requirement = route.handler.megaRequirements[k];
      let params = requirement.params;
      console.log("%s:%s <- %s.%s(%j)", route.name, k, requirement.model, requirement.operation, params);

      try {
        let result = await models[requirement.model]._repository[requirement.operation](params);
        console.log("%s:%s <- %j", route.name, k, result);
      } catch (e) {
        console.log("%s:%s error", route.name, k, e);
      }
    }
  }

  console.log("rendering");

  console.log(React.renderToString(<Handler />));
});