refactor(routes): use pojo route definitions

- move route definitions out of `Root` component
- use pojo routes
- split `authRouteResolver` into `requireAuth` and `requireUnauth`
- use selector to resolve auth state

Author: r-park

src/components/app/app.js

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { POST_SIGN_IN_PATH, POST_SIGN_OUT_PATH } from 'src/config';
 import { authActions, getAuth } from 'src/core/auth';
+import { paths } from '../routes';
 
 
 export class App extends Component {
@@ -27,16 +27,15 @@ export class App extends Component {
     const { auth } = this.props;
 
     if (auth.authenticated && !nextProps.auth.authenticated) {
-      router.replace(POST_SIGN_OUT_PATH);
+      router.replace(paths.SIGN_IN);
     }
     else if (!auth.authenticated && nextProps.auth.authenticated) {
-      router.replace(POST_SIGN_IN_PATH);
+      router.replace(paths.TASKS);
     }
   }
 
   signOut() {
     this.props.signOut();
-    window.location.replace('/');
   }
 
   render() {

src/components/root.js

@@ -1,31 +1,18 @@
 import React, { PropTypes } from 'react';
 import { Provider } from 'react-redux';
-import { Route, Router } from 'react-router';
+import { Router } from 'react-router';
+import { getRoutes } from './routes';
 
-// config
-import { SIGN_IN_PATH, TASKS_PATH } from 'src/config';
 
-// components
-import App from './app/app';
-import SignIn from './sign-in/sign-in';
-import Tasks from './tasks/tasks';
-
-
-export default function Root({history, onEnter, store}) {
+export default function Root({history, store}) {
   return (
     <Provider store={store}>
-      <Router history={history}>
-        <Route component={App} onEnter={onEnter} path="/">
-          <Route component={SignIn} path={SIGN_IN_PATH} />
-          <Route component={Tasks} path={TASKS_PATH} />
-        </Route>
-      </Router>
+      <Router history={history} routes={getRoutes(store.getState)} />
     </Provider>
   );
 }
 
 Root.propTypes = {
   history: PropTypes.object.isRequired,
-  onEnter: PropTypes.func.isRequired,
   store: PropTypes.object.isRequired
 };

src/components/routes.js

@@ -0,0 +1,49 @@
+import { isAuthenticated } from 'src/core/auth';
+import App from './app/app';
+import SignIn from './sign-in/sign-in';
+import Tasks from './tasks/tasks';
+
+
+export const paths = {
+  ROOT: '/',
+  SIGN_IN: '/sign-in',
+  TASKS: '/'
+};
+
+
+const requireAuth = getState => {
+  return (nextState, replace) => {
+    if (!isAuthenticated(getState())) {
+      replace(paths.SIGN_IN);
+    }
+  };
+};
+
+const requireUnauth = getState => {
+  return (nextState, replace) => {
+    if (isAuthenticated(getState())) {
+      replace(paths.TASKS);
+    }
+  };
+};
+
+
+export const getRoutes = getState => {
+  return {
+    path: paths.ROOT,
+    component: App,
+    childRoutes: [
+      {
+        indexRoute: {
+          component: Tasks,
+          onEnter: requireAuth(getState)
+        }
+      },
+      {
+        path: paths.SIGN_IN,
+        component: SignIn,
+        onEnter: requireUnauth(getState)
+      }
+    ]
+  };
+};

src/components/tasks/task-filters.js

@@ -6,9 +6,9 @@ import { Link } from 'react-router';
 export function TaskFilters({filter}) {
   return (
     <ul className="task-filters">
-      <li><Link className={classNames({active: !filter})} to="/tasks">View All</Link></li>
-      <li><Link activeClassName="active" to={{pathname: '/tasks', query: {filter: 'active'}}}>Active</Link></li>
-      <li><Link activeClassName="active" to={{pathname: '/tasks', query: {filter: 'completed'}}}>Completed</Link></li>
+      <li><Link className={classNames({active: !filter})} to="/">View All</Link></li>
+      <li><Link activeClassName="active" to={{pathname: '/', query: {filter: 'active'}}}>Active</Link></li>
+      <li><Link activeClassName="active" to={{pathname: '/', query: {filter: 'completed'}}}>Completed</Link></li>
     </ul>
   );
 }

src/config.js

@@ -4,10 +4,3 @@ export const FIREBASE_CONFIG = {
   databaseURL: 'https://todo-react-redux.firebaseio.com',
   storageBucket: 'firebase-todo-react-redux.appspot.com'
 };
-
-
-// Route paths
-export const SIGN_IN_PATH = '/sign-in';
-export const TASKS_PATH = '/tasks';
-export const POST_SIGN_IN_PATH = TASKS_PATH;
-export const POST_SIGN_OUT_PATH = SIGN_IN_PATH;

src/core/auth/index.js

@@ -5,8 +5,7 @@ import * as authActions from './actions';
 export { authActions };
 export * from './action-types';
 export { authReducer } from './reducer';
-export * from './route-resolver';
-export { getAuth } from './selectors';
+export { getAuth, isAuthenticated } from './selectors';
 
 
 export function initAuth(dispatch) {

src/core/auth/route-resolver.js

@@ -2,6 +2,6 @@ export function getAuth(state) {
   return state.auth;
 }
 
-export function getAuthenticated(state) {
+export function isAuthenticated(state) {
   return getAuth(state).authenticated;
 }

src/core/auth/selectors.js

@@ -6,25 +6,20 @@ import { AppContainer } from 'react-hot-loader';
 import { browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 
-import { authRouteResolver, initAuth } from './core/auth';
+import { initAuth } from './core/auth';
 import configureStore from './core/store';
 import Root from './components/root';
 
 
 const store = configureStore();
 const syncedHistory = syncHistoryWithStore(browserHistory, store);
-const onEnter = authRouteResolver(store.getState);
 const rootElement = document.getElementById('root');
 
 
 function render(Root) {
   ReactDOM.render(
     <AppContainer>
-      <Root
-        history={syncedHistory}
-        onEnter={onEnter}
-        store={store}
-      />
+      <Root history={syncedHistory} store={store} />
     </AppContainer>,
     rootElement
   );

src/main.js

@@ -15,3 +15,4 @@ import 'redux-thunk';
 import 'classnames';
 import 'firebase';
 import 'immutable';
+import 'reselect';