ericclemmons · ericclemmons · Sep 7, 2015 · Sep 7, 2015 · Sep 7, 2015 · Sep 11, 2015
diff --git a/examples/spa/README.md b/examples/spa/README.md
@@ -0,0 +1,22 @@
+# React Resolver - SPA Example
+
+
+### Technologies
+
+- `react` (v0.13.3)
+- `react-router` (v0.13.3)
+
+
+### Usage
+
+Development:
+
+```shell
+$ npm start
+```
+
+Production:
+
+```shell
+$ NODE_ENV=production npm start
+```
diff --git a/examples/spa/package.json b/examples/spa/package.json
@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "webpack",
+    "clean": "rm -rf dist",
+    "start": "npm install; if [[ ${NODE_ENV} == \"production\" ]]; then npm run start:prod; else npm run start:dev; fi",
+    "start:dev": "npm run clean && webpack-dev-server --content-base public/ --hot --inline",
+    "start:prod": "npm run clean && npm run build && (cd public; python -m SimpleHTTPServer 3000)"
+  },
+  "dependencies": {
+    "axios": "0.5.4",
+    "babel-core": "5.8.23",
+    "babel-loader": "5.3.2",
+    "es6-promise": "3.0.2",
+    "react": "0.13.3",
+    "react-router": "0.13.3",
+    "webpack": "1.12.1"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "1.10.1"
+  }
+}
diff --git a/examples/spa/public/favicon.ico b/examples/spa/public/favicon.ico
diff --git a/examples/spa/public/index.html b/examples/spa/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Stargazers Demo – React Resolver</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
+  </head>
+  <body>
+    <div id="app">
+      <noscript>
+        Yo dawg! I heard you like Javascripts so
+        I'm not very good with memes &amp; need you
+        to turn on Javascript please :)
+      </noscript>
+    </div>
+
+    <script src="/client.min.js"></script>
+  </body>
+</html>
diff --git a/examples/spa/src/client.js b/examples/spa/src/client.js
@@ -0,0 +1,11 @@
+import ES6Promise from "es6-promise";
+import React from "react";
+import Router, { HashLocation } from "react-router";
+
+import routes from "./routes";
+
+ES6Promise.polyfill();
+
+Router.run(routes, HashLocation, (Root, state) => {
+  React.render(<Root {...state} />, document.getElementById("app"));
+});
diff --git a/examples/spa/src/components/App.js b/examples/spa/src/components/App.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+import { resolveError } from "react-resolver";
+import { RouteHandler } from "react-router";
+
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import PrettyError from "../components/PrettyError";
+
+
+@resolveError()
+export default class App extends React.Component {
+  static displayName = "App"
+
+  render() {
+    const { error } = this.props;
+
+    return (
+      <section className="blue-grey lighten-5">
+        <Header />
+
+        <main className="container">
+          {error ? <PrettyError error={error} /> : <RouteHandler />}
+        </main>
+
+        <Footer />
+      </section>
+    );
+  }
+}
diff --git a/examples/spa/src/components/Footer.js b/examples/spa/src/components/Footer.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default class Footer extends React.Component {
+  static displayName = "Footer"
+
+  render() {
+    return (
+      <footer className="page-footer orange">
+        <div className="footer-copyright center-align">
+          &copy; 2015 Eric Clemmons
+        </div>
+      </footer>
+    );
+  }
+}
diff --git a/examples/spa/src/components/Header.js b/examples/spa/src/components/Header.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+import Nav from "./Nav";
+
+export default class Header extends React.Component {
+  static displayName = "Header"
+
+  render() {
+    return (
+      <header>
+        <Nav />
+      </header>
+    );
+  }
+}
diff --git a/examples/spa/src/components/Home.js b/examples/spa/src/components/Home.js
@@ -0,0 +1,107 @@
+import React from "react";
+
+import { context, resolve } from "react-resolver";
+
+@context("router")
+@resolve("submit", function({ router }) {
+  return ({ user, repo }) => {
+    router.transitionTo("repo", { user, repo });
+  };
+})
+export default class Home extends React.Component {
+  static displayName = "Home"
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      action: props.router.makeHref("query.repo"),
+      user: "ericclemmons",
+      repo: "react-resolver",
+    };
+  }
+
+  componentDidMount() {
+    this.setState(this.computeState());
+  }
+
+  computeState(state) {
+    const nextState = {
+      ...this.state,
+      ...state,
+    };
+
+    const { user, repo } = nextState;
+    const { router } = this.props;
+
+    nextState.action = router.makeHref("repo", { user, repo });
+
+    return nextState;
+  }
+
+  handleChange(event) {
+    const { name, value } = event.target;
+
+    this.setState(this.computeState({ [name]: value }));
+  }
+
+  handleSubmit(event) {
+    const { submit } = this.props;
+    const { user, repo } = this.state;
+
+    submit({ user, repo });
+
+    event.preventDefault();
+  }
+
+  render() {
+    const { action, user, repo } = this.state;
+
+    return (
+      <section>
+        <div className="card">
+          <div className="card-content">
+            <span className="card-title deep-purple-text">
+              View a Project's Stargazers
+            </span>
+          </div>
+          <div className="card-action">
+            <div className="row">
+              <form
+                action={action}
+                method="GET"
+                onChange={::this.handleChange}
+                onSubmit={::this.handleSubmit}
+                className="col s12"
+              >
+                <div className="row">
+                  <div className="input-field col s6">
+                    <input id="user" name="user" type="text" className="validate" defaultValue={user} />
+                    <label htmlFor="user" className="active">
+                      Github User or Organization
+                    </label>
+                  </div>
+
+                  <div className="input-field col s6">
+                    <input id="repo" name="repo" type="text" className="validate" defaultValue={repo} />
+                    <label htmlFor="repo" className="active">
+                      Repository
+                    </label>
+                  </div>
+                </div>
+
+                <div className="row right-align">
+                  <div className="col s12">
+                    <button className="btn waves-effect waves-light" type="submit">
+                      Submit
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
diff --git a/examples/spa/src/components/Nav.js b/examples/spa/src/components/Nav.js
@@ -0,0 +1,18 @@
+import { Link } from "react-router";
+import React from "react";
+
+export default class Nav extends React.Component {
+  static displayName = "Nav"
+
+  render() {
+    return (
+      <nav className="deep-purple darken-2">
+        <div className="nav-wrapper">
+          <div className="container">
+            <Link to="home" className="brand-logo">React Resolver Demo</Link>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+}
diff --git a/examples/spa/src/components/NotFound.js b/examples/spa/src/components/NotFound.js
@@ -0,0 +1,29 @@
+import React from "react";
+
+export default class NotFound extends React.Component {
+  static displayName = "NotFound"
+
+  render() {
+    const { splat } = this.props.params;
+
+    return (
+      <div className="row">
+        <div className="card">
+          <div className="card-content">
+            <span className="card-title deep-purple-text">
+              404
+            </span>
+
+            <p>
+              Unfortunately, this URL does not exist.
+            </p>
+
+            <blockquote>
+              <pre>{splat}</pre>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/examples/spa/src/components/PrettyError.js b/examples/spa/src/components/PrettyError.js
@@ -0,0 +1,32 @@
+import React from "react";
+
+export default class PrettyError extends React.Component {
+  static displayName = "PrettyError"
+
+  render() {
+    const { error } = this.props;
+
+    return (
+      <div className="card red darken-4">
+        <div className="card-content white-text">
+          <span className="card-title">
+            {error.name}
+          </span>
+          <pre>
+            {error.message}
+            {error.data ? `\n\n${JSON.stringify(error.data, null, 2)}` : null}
+          </pre>
+        </div>
+
+        <div className="card-action white-text">
+          <span className="card-title">
+            Stack Trace
+          </span>
+          <pre>
+            {error.stack}
+          </pre>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/examples/spa/src/components/Stargazer.js b/examples/spa/src/components/Stargazer.js
@@ -0,0 +1,56 @@
+import axios from "axios";
+import { Link } from "react-router";
+import React from "react";
+
+import { resolve } from "react-resolver";
+
+@resolve("stargazer", function({ params }) {
+  const { user } = params;
+  const url = `https://api.github.com/users/${user}`;
+
+  return axios.get(url).then(({ data }) => data);
+})
+export default class Stargazer extends React.Component {
+  static displayName = "Stargazer"
+
+  render() {
+    const { stargazer } = this.props;
+
+    return (
+      <div className="container">
+        <div className="card blue-grey darken-1">
+          <div className="card-content">
+            <span className="card-title">
+              {stargazer.login}
+            </span>
+
+            <ul className="collection z-depth-1">
+              <li className="collection-item avatar">
+                <img src={stargazer.avatar_url} className="circle" />
+                <span className="title">
+                  {stargazer.name}
+                </span>
+                <p>
+                  {stargazer.company}
+                  <br />
+                  {stargazer.location}
+                </p>
+              </li>
+            </ul>
+          </div>
+
+          <div className="card-action">
+            <Link to="home" className="align-right">
+              <i className="mdi-navigation-chevron-left" />
+              Back
+            </Link>
+
+            <a href={stargazer.html_url} target="_blank">
+              View on Github
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}