Fix issue with transitioning between routes

client/index.js

@@ -22,6 +22,19 @@ const history = createHistory();
 const appLocation = createLocation(
   location.pathname + location.search
 );
+
+function location$(history) {
+  return Rx.Observable.create(function(observer) {
+    const dispose = history.listen(function(location) {
+      observer.onNext(location.pathname);
+    });
+
+    return Rx.Disposable.create(() => {
+      dispose();
+    });
+  });
+}
+
 // returns an observable
 app$({ history, location: appLocation })
   .flatMap(
@@ -37,18 +50,25 @@ app$({ history, location: appLocation })
     ({ nextLocation, props }, appCat) => ({ nextLocation, props, appCat })
   )
   .doOnNext(({ appCat }) => {
-    const appStore = appCat.getStore('appStore');
     const appActions = appCat.getActions('appActions');
 
-    appStore
+    location$(history)
+      .pluck('pathname')
       .distinctUntilChanged()
-      .subscribe(function({ route = appLocation.pathname }) {
-        history.pushState(null, route);
-      });
+      .doOnNext(route => debug('route change', route))
+      .subscribe(route => appActions.updateRoute(route));
 
     appActions.goBack.subscribe(function() {
       history.goBack();
     });
+
+    appActions
+      .updateRoute
+      .pluck('route')
+      .doOnNext(route => debug('update route', route))
+      .subscribe(function(route) {
+        history.pushState(null, route);
+      });
   })
   .flatMap(({ props, appCat }) => {
     props.history = history;
@@ -63,7 +83,7 @@ app$({ history, location: appLocation })
       debug('react rendered');
     },
     err => {
-      debug('an error has occured', err.stack);
+      throw err;
     },
     () => {
       debug('react closed subscription');

common/app/flux/Actions.js

@@ -17,7 +17,7 @@ export default Actions({
   },
 
   getUser: null,
-  goTo(route) {
+  updateRoute(route) {
     return { route };
   },
   goBack: null

common/app/flux/Store.js

@@ -14,10 +14,10 @@ export default Store({
     value: initValue
   },
   init({ instance: appStore, args: [cat] }) {
-    const { goTo, setUser, setTitle } = cat.getActions('appActions');
+    const { updateRoute, setUser, setTitle } = cat.getActions('appActions');
     const register = createRegistrar(appStore);
 
-    register(setter(fromMany(setUser, setTitle, goTo)));
+    register(setter(fromMany(setUser, setTitle, updateRoute)));
 
     return appStore;
   }

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

@@ -57,7 +57,7 @@ export default contain(
 
     goToJobBoard() {
       const { appActions } = this.props;
-      appActions.goTo('/jobs');
+      appActions.updateRoute('/jobs');
     },
 
     renderDiscount(discountAmount) {

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

@@ -37,7 +37,7 @@ export default contain(
         return null;
       }
       jobActions.findJob(id);
-      appActions.goTo(`/jobs/${id}`);
+      appActions.updateRoute(`/jobs/${id}`);
     },
 
     renderList(handleJobClick, jobs) {
@@ -91,7 +91,7 @@ export default contain(
                     bsSize='large'
                     className='signup-btn btn-block'
                     onClick={ ()=> {
-                      appActions.goTo('/jobs/new');
+                      appActions.updateRoute('/jobs/new');
                     }}>
                     Post a job: $200 for 30 days + weekly tweets
                   </Button>

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

@@ -32,7 +32,7 @@ export default contain(
       const { appActions, job } = this.props;
       // redirect user in client
       if (!job || !job.position || !job.description) {
-        appActions.goTo('/jobs/new');
+        appActions.updateRoute('/jobs/new');
       }
     },
 

common/app/routes/Jobs/flux/Actions.js

@@ -151,7 +151,7 @@ export default Actions({
           return jobActions.setError(err);
         }
         jobActions.setJobs({ job });
-        appActions.goTo(goTo);
+        appActions.updateRoute(goTo);
       });
     });