Implement ProxyRoute

js/components/ascribe_app.js

@@ -2,8 +2,6 @@
 
 import React from 'react';
 
-import TransactionManager from './ascribe_transaction_manager/transaction_manager';
-
 import Header from '../components/header';
 import Footer from '../components/footer';
 import GlobalNotification from './global_notification';
@@ -22,8 +20,6 @@ let AscribeApp = React.createClass({
         let { children, routes } = this.props;
 
         return (
-            <TransactionManager
-                routes={routes}>
             <div className="container ascribe-default-app">
                 <Header routes={routes} />
                 {/* Routes are injected here */}
@@ -32,7 +28,6 @@ let AscribeApp = React.createClass({
                 <GlobalNotification />
                 <div id="modal" className="container"></div>
             </div>
-            </TransactionManager>
         );
     }
 });

js/components/ascribe_routes/auth_component.js

@@ -0,0 +1,33 @@
+'use strict';
+
+import React from 'react';
+
+import UserStore from '../../stores/user_store';
+import UserActions from '../../actions/user_actions';
+
+export function AuthComponent(Component) {
+    return React.createClass({
+        getInitialState() {
+            return UserStore.getState();
+        },
+
+        componentDidMount() {
+            UserStore.listen(this.onChange);
+            UserActions.fetchCurrentUser();
+        },
+
+        componentWillUnmount() {
+            UserStore.unlisten(this.onChange);
+        },
+
+        onChange(state) {
+            this.setState(state);
+        },
+
+        render() {
+            return (
+                <Component {...this.props}/>
+            );
+        }
+    });
+}

js/components/ascribe_routes/proxy_route.js

@@ -0,0 +1,41 @@
+'use strict';
+
+import React from 'react';
+import invariant from 'invariant';
+import { createRoutes } from 'react-router';
+
+const { string, bool, func, object, oneOfType } = React.PropTypes;
+
+const ProxyRoute = React.createClass({
+    propTypes: {
+        path: string,
+        ignoreScrollBehavior: bool,
+        handler: oneOfType([ func, string ]),
+        component: oneOfType([ func, string ]),
+        components: oneOfType([ oneOfType([ func, string ]), object ]),
+        getComponents: func,
+        proxyHandler: func
+    },
+
+    statics: {
+        createRouteFromReactElement(element) {
+            element.type.createRouteFromReactElement = false;
+            const [ route ] = createRoutes(element);
+
+            const Component = route.component;
+            const { proxyHandler } = element.props;
+            route.component = proxyHandler(Component);
+
+            return route;
+        }
+    },
+
+    render() {
+        invariant(
+          false,
+          'Some error message'
+        );
+    }
+});
+
+export default ProxyRoute;

js/routes.js

@@ -25,6 +25,9 @@ import ErrorNotFoundPage from './components/error_not_found_page';
 
 import RegisterPiece from './components/register_piece';
 
+import ProxyRoute from './components/ascribe_routes/proxy_route';
+import { AuthComponent } from './components/ascribe_routes/auth_component';
+
 import AppConstants from './constants/application_constants';
 
 
@@ -32,8 +35,12 @@ let baseUrl = AppConstants.baseUrl;
 
 const COMMON_ROUTES = (
     <Route path={baseUrl} component={App}>
+        <ProxyRoute
+            proxyHandler={AuthComponent}
+            path="collection"
+            component={PieceList}
+            headerTitle="COLLECTION"/>
         <Route path="register_piece" component={RegisterPiece} headerTitle="+ NEW WORK" />
-        <Route path="collection" component={PieceList} headerTitle="COLLECTION"/>
         <Route path="signup" component={SignupContainer} />
         <Route path="login" component={LoginContainer} />
         <Route path="logout" component={LogoutContainer} />