enable react-router

add basic router auth

app/action_creators/index.js

@@ -1,23 +1,8 @@
-// @flow
-import uuid from 'uuid';
-import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER } from '../action_types';
+/* eslint-disable import/prefer-default-export */
+import { UPDATE_AUTH_STATUS } from '../action_types';
 
-
-export const addTodo = (text: string): Object =>
-  ({
-    type: ADD_TODO,
-    text,
-    id: uuid.v1(),
-  });
-
-export const toggleTodo = (id: string): Object =>
-  ({
-    type: TOGGLE_TODO,
-    id,
-  });
-
-export const setVisibilityFilter = (filter: string): Object =>
+export const updateAuthStatus = (isAuthenticated) =>
   ({
-    type: SET_VISIBILITY_FILTER,
-    filter,
+    type: UPDATE_AUTH_STATUS,
+    isAuthenticated,
   });

app/action_types/index.js

@@ -1,4 +1,2 @@
-export const ADD_TODO = 'ADD_TODO';
-export const REMOVE_TODO = 'REMOVE_TODO';
-export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
-export const TOGGLE_TODO = 'TOGGLE_TODO';
+/* eslint-disable import/prefer-default-export */
+export const UPDATE_AUTH_STATUS = 'UPDATE_AUTH_STATUS';

app/components/app.js

@@ -1,67 +1,32 @@
 import React, { PropTypes } from 'react';
-import { Router, Route, IndexRedirect, hashHistory, Link, withRouter } from 'react-router';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import { Provider } from 'react-redux';
+import { Router, Route, IndexRedirect, hashHistory } from 'react-router';
+import requiresAuthentication from './requires_authentication';
+import Login from './login';
+import Main from './main';
+import Splash from './splash';
 
-const auth = { isLoggedIn: false };
 
-const TestApp = ({ children }) =>
-  <div>
-    <div>
-      <Link to="/splash">Splash</Link><br />
-      <Link to="/login">Login</Link><br />
-    </div>
-    {children}
-  </div>;
+const redirectIfNotAuthenticated = (Component, redirectPath) =>
+  requiresAuthentication(Component, redirectPath, true);
 
-TestApp.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const Splash = () =>
-  <div>
-    Hello from Splash Component
-  </div>;
-
-const Login = withRouter(({ router }) => {
-  const doLogin = () => {
-    auth.isLoggedIn = true;
-    router.push('/splash');
-  };
+const redirectIfAuthenticated = (Component, redirectPath) =>
+  requiresAuthentication(Component, redirectPath, false);
 
-  return (
-    <div>
-      <p>Hello from Login Component</p>
-      <a onClick={doLogin}>Log in</a>
-    </div>);
-});
-
-const redirectIfNotAuthenticated = (nextState, replace) => {
-  if (!auth.isLoggedIn) {
-    replace({
-      pathname: '/login',
-      state: { nextPathName: nextState.location.pathname },
-    });
-  }
-};
 
-const redirectIfAuthenticated = (nextState, replace) => {
-  if (auth.isLoggedIn) {
-    replace({
-      pathname: '/splash',
-      state: { nextPathName: nextState.location.pathname },
-    });
-  }
-};
-
-const App = () =>
-  <MuiThemeProvider>
+const App = ({ store }) =>
+  <Provider store={store}>
     <Router history={hashHistory}>
-      <Route path="/" component={TestApp}>
+      <Route path="/" component={Main}>
         <IndexRedirect to="/splash" />
-        <Route path="splash" component={Splash} onEnter={redirectIfNotAuthenticated} />
-        <Route path="login" component={Login} onEnter={redirectIfAuthenticated} />
+        <Route path="splash" component={redirectIfNotAuthenticated(Splash, '/login')} />
+        <Route path="login" component={redirectIfAuthenticated(Login, '/splash')} />
       </Route>
     </Router>
-  </MuiThemeProvider>;
+  </Provider>;
+
+App.propTypes = {
+  store: PropTypes.object.isRequired,
+};
 
 export default App;

app/components/login/connector.js

@@ -0,0 +1,16 @@
+import { compose, pick, prop } from 'ramda';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { updateAuthStatus } from '../../action_creators/';
+
+
+const mapStateToProps =
+  compose(pick(['isAuthenticated']), prop('auth'));
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ updateAuthStatus }, dispatch);
+
+const connector =
+  connect(mapStateToProps, mapDispatchToProps);
+
+export default connector;

app/components/login/index.js

@@ -0,0 +1,9 @@
+import { compose } from 'ramda';
+import { withRouter } from 'react-router';
+import connector from './connector';
+import SimpleLogin from './simple_login';
+
+const Login =
+  compose(withRouter, connector)(SimpleLogin);
+
+export default Login;

app/components/login/simple_login.js

@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+
+
+const SimpleLogin = ({ router, updateAuthStatus, isAuthenticated }) => {
+  const doLogin = () => {
+    updateAuthStatus(!isAuthenticated);
+    router.push('/splash');
+  };
+
+  return (<div>
+    <p>Hello from Login Component</p>
+    <a onClick={doLogin}>Log in</a>
+  </div>);
+};
+
+SimpleLogin.propTypes = {
+  router: PropTypes.object.isRequired,
+  updateAuthStatus: PropTypes.func.isRequired,
+  isAuthenticated: PropTypes.bool.isRequired,
+};
+
+export default SimpleLogin;

app/components/main.js

@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+
+const Main = ({ children }) =>
+  <MuiThemeProvider>
+    <div>
+      <div>
+        <Link to="/splash">Splash</Link><br />
+        <Link to="/login">Login</Link><br />
+      </div>
+      {children}
+    </div>
+  </MuiThemeProvider>;
+
+
+Main.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Main;

app/components/requires_authentication/connector.js

@@ -0,0 +1,11 @@
+import { compose, pick, prop } from 'ramda';
+import { connect } from 'react-redux';
+
+// mapStateToProps :: State -> { isAuthenticated: boolean }
+const mapStateToProps =
+  compose(pick(['isAuthenticated']), prop('auth'));
+
+const connector =
+  connect(mapStateToProps);
+
+export default connector;

app/components/requires_authentication/index.js

@@ -0,0 +1,38 @@
+import React, { Component, PropTypes } from 'react';
+import { compose } from 'ramda';
+import { withRouter } from 'react-router';
+import connector from './connector';
+
+const requiresAuthentication = (MyComponent, redirectPath, requiredAuthStatus = true) => {
+  class AuthenticatedComponent extends Component {
+
+    componentWillMount() {
+      this.checkAuth();
+    }
+
+    componentWillReceiveProps() {
+      this.checkAuth();
+    }
+
+    checkAuth() {
+      if (this.props.isAuthenticated !== requiredAuthStatus) {
+        this.props.router.push(redirectPath);
+      }
+    }
+
+    render() {
+      return this.props.isAuthenticated === requiredAuthStatus
+        ? (<MyComponent {...this.props} />)
+        : null;
+    }
+  }
+
+  AuthenticatedComponent.propTypes = {
+    isAuthenticated: PropTypes.bool.isRequired,
+    router: PropTypes.object.isRequired,
+  };
+
+  return compose(withRouter, connector)(AuthenticatedComponent);
+};
+
+export default requiresAuthentication;

app/components/splash.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+
+const Splash = () =>
+  <div>
+    Hello from Splash Components
+  </div>;
+
+export default Splash;