update to react-router 1.0.0-rc1

client/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import Fetchr from 'fetchr';
 import debugFactory from 'debug';
 import { Router } from 'react-router';
-import { history } from 'react-router/lib/BrowserHistory';
+import { createLocation, createHistory } from 'history';
 import { hydrate } from 'thundercats';
 import { Render } from 'thundercats-react';
 
@@ -18,21 +18,28 @@ const services = new Fetchr({
 });
 
 Rx.config.longStackSupport = !!debug.enabled;
-
+const history = createHistory();
+const appLocation = createLocation(
+  location.pathname + location.search
+);
 // returns an observable
-app$(history)
+app$({ history, location: appLocation })
   .flatMap(
     ({ AppCat }) => {
+      // instantiate the cat with service
       const appCat = AppCat(null, services);
+      // hydrate the stores
       return hydrate(appCat, catState)
         .map(() => appCat);
     },
-    ({ initialState }, appCat) => ({ initialState, appCat })
+    // not using nextLocation at the moment but will be used for
+    // redirects in the future
+    ({ nextLocation, props }, appCat) => ({ nextLocation, props, appCat })
   )
-  .flatMap(({ initialState, appCat }) => {
+  .flatMap(({ props, appCat }) => {
     return Render(
       appCat,
-      React.createElement(Router, initialState),
+      React.createElement(Router, props),
       DOMContianer
     );
   })

common/app/app-stream.jsx

@@ -1,17 +1,17 @@
 import Rx from 'rx';
-import { Router } from 'react-router';
+import { match } from 'react-router';
 import App from './App.jsx';
 import AppCat from './Cat';
 
 import childRoutes from './routes';
 
-const router$ = Rx.Observable.fromNodeCallback(Router.run, Router);
+const route$ = Rx.Observable.fromNodeCallback(match);
 
 const routes = Object.assign({ components: App }, childRoutes);
 
-export default function app$(location) {
+export default function app$({ location, history }) {
-  return router$(routes, location)
+  return route$({ routes, location, history })
-    .map(([initialState, transistion]) => {
+    .map(([nextLocation, props]) => {
-      return { initialState, transistion, AppCat };
+      return { nextLocation, props, AppCat };
     });
 }

common/app/routes/Jobs/components/Jobs.jsx

@@ -1,6 +1,6 @@
 import React, { cloneElement, PropTypes } from 'react';
 import { contain } from 'thundercats-react';
-import { Navigation } from 'react-router';
+import { History } from 'react-router';
 import { Button, Jumbotron, Row } from 'react-bootstrap';
 import ListJobs from './List.jsx';
 
@@ -18,7 +18,7 @@ export default contain(
       jobActions: PropTypes.object,
       jobs: PropTypes.array
     },
-    mixins: [Navigation],
+    mixins: [History],
 
     handleJobClick(id) {
       const { jobActions } = this.props;
@@ -26,7 +26,7 @@ export default contain(
         return null;
       }
       jobActions.findJob(id);
-      this.transitionTo(`/jobs/${id}`);
+      this.history.pushState(null, `/jobs/${id}`);
     },
 
     renderList(handleJobClick, jobs) {

package.json

@@ -58,6 +58,7 @@
     "gulp-webpack": "^1.5.0",
     "helmet": "~0.9.0",
     "helmet-csp": "^0.2.3",
+    "history": "^1.9.0",
     "jade": "~1.8.0",
     "json-loader": "^0.5.2",
     "less": "~1.7.5",
@@ -89,7 +90,7 @@
     "react": "^0.13.3",
     "react-bootstrap": "~0.23.7",
     "react-motion": "~0.1.0",
-    "react-router": "https://github.com/BerkeleyTrue/react-router#freecodecamp",
+    "react-router": "^1.0.0-rc1",
     "react-vimeo": "^0.0.3",
     "request": "~2.53.0",
     "rev-del": "^1.0.5",

server/boot/a-react.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Router from 'react-router';
+import { RoutingContext } from 'react-router';
 import Fetchr from 'fetchr';
-import Location from 'react-router/lib/Location';
+import { createLocation } from 'history';
 import debugFactory from 'debug';
 import { app$ } from '../../common/app';
 import { RenderToString } from 'thundercats-react';
@@ -30,25 +30,25 @@ export default function reactSubRouter(app) {
 
   function serveReactApp(req, res, next) {
     const services = new Fetchr({ req });
-    const location = new Location(req.path, req.query);
+    const location = createLocation(req.path);
 
     // returns a router wrapped app
-    app$(location)
+    app$({ location })
       // if react-router does not find a route send down the chain
-      .filter(function({ initialState }) {
+      .filter(function({ props}) {
-        if (!initialState) {
+        if (!props) {
           debug('react tried to find %s but got 404', location.pathname);
           return next();
         }
-        return !!initialState;
+        return !!props;
       })
-      .flatMap(function({ initialState, AppCat }) {
+      .flatMap(function({ props, AppCat }) {
         // call thundercats renderToString
         // prefetches data and sets up it up for current state
         debug('rendering to string');
         return RenderToString(
           AppCat(null, services),
-          React.createElement(Router, initialState)
+          React.createElement(RoutingContext, props)
         );
       })
       // makes sure we only get one onNext and closes subscription