Merge branch 'feature/react-router-redux-integration' into dev

gocreating · Oct 24, 2016 · 5e4306d · 5e4306d
2 parents 4df8a9e + 9e79ce5
commit 5e4306d
Show file tree

Hide file tree

Showing 17 changed files with 186 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -122,6 +122,7 @@
     "react-redux": "^4.4.5",
     "react-router": "^2.3.0",
     "react-router-active-component": "^4.0.0",
+    "react-router-redux": "^4.0.6",
     "redux": "^3.5.2",
     "redux-form": "^6.1.0",
     "redux-thunk": "^2.1.0",

diff --git a/src/client/index.js b/src/client/index.js
@@ -4,30 +4,50 @@ import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import { match, Router, browserHistory } from 'react-router';
+import {
+  routerMiddleware,
+  syncHistoryWithStore,
+  push,
+} from 'react-router-redux';
 import LocaleProvider from '../common/components/utils/LocaleProvider';
 import rootReducer from '../common/reducers';
 import getRoutes from '../common/routes';
 import setupLocale from './setupLocale';
 import setupNProgress from './setupNProgress';
 import setupGA from './setupGA';
 import { setApiEngine } from '../common/actions/apiEngine';
+import { removeCookie } from '../common/actions/cookieActions';
 import ApiEngine from '../common/utils/ApiEngine';
 
 setupNProgress();
 setupLocale();
 let logPageView = setupGA();
 const initialState = window.__INITIAL_STATE__;
-let store = createStore(rootReducer, initialState, applyMiddleware(thunk));
+let store = createStore(
+  rootReducer,
+  initialState,
+  applyMiddleware(
+    routerMiddleware(browserHistory),
+    thunk
+  )
+);
 
 let apiEngine = new ApiEngine();
 store.dispatch(setApiEngine(apiEngine));
 
+let { redirect } = store.getState().cookies;
+if (redirect) {
+  store.dispatch(push(redirect));
+  store.dispatch(removeCookie('redirect'));
+}
+
 // refs:
 // - <http://www.jianshu.com/p/b3ff1f53faaf>
 // - <https://github.com/ryanflorence/example-react-router-server-rendering-lazy-routes>
+let history = syncHistoryWithStore(browserHistory, store);
 let routes = getRoutes(store);
 match({
-  history: browserHistory,
+  history,
   routes,
 }, (error, redirectLocation, renderProps) => {
   if (error) {
@@ -37,7 +57,7 @@ match({
     <Provider store={store}>
       <LocaleProvider>
         <Router
-          history={browserHistory}
+          history={history}
           onUpdate={logPageView}
           {...renderProps}
         >

diff --git a/src/common/actions/routeActions.js b/src/common/actions/routeActions.js
@@ -0,0 +1,9 @@
+import { push } from 'react-router-redux';
+import { setCookie } from './cookieActions';
+
+export const redirect = (path) => {
+  return (dispatch) => {
+    dispatch(setCookie('redirect', path));
+    dispatch(push(path));
+  };
+};
diff --git a/src/common/components/forms/LoginForm.js b/src/common/components/forms/LoginForm.js
@@ -1,4 +1,6 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
 import { Field, reduxForm } from 'redux-form';
 import Button from 'react-bootstrap/lib/Button';
 // import validator from 'validator';
@@ -33,32 +35,31 @@ class LoginForm extends Component {
   }
 
   _login(json) {
-    return this.context.store.dispatch(loginUser({
+    return this.props.dispatch(loginUser({
       token: json.token,
       data: json.user,
     }));
   }
 
   _handleSubmit(formData) {
-    return userAPI(this.context.store.getState().apiEngine)
+    // let { store } = this.context;
+    let { dispatch, apiEngine } = this.props;
+
+    return userAPI(apiEngine)
       .login(formData)
       .catch((err) => {
-        this.context.store.dispatch(pushErrors(err));
+        dispatch(pushErrors(err));
         throw err;
       })
       .then((json) => {
         if (json.isAuth) {
           this.login(json).then(() => {
             // redirect to the origin path before logging in
-            const { location } = this.props;
-            if (location && location.state && location.state.nextPathname) {
-              this.context.router.push(location.state.nextPathname);
-            } else {
-              this.context.router.push('/');
-            }
+            let { next } = this.props.routing.locationBeforeTransitions.query;
+            dispatch(push(next || '/'));
           });
         } else {
-          this.context.store.dispatch(pushErrors([{
+          dispatch(pushErrors([{
             title: 'User Not Exists',
             detail: 'You may type wrong email or password.',
           }]));
@@ -100,12 +101,10 @@ class LoginForm extends Component {
   }
 };
 
-LoginForm.contextTypes = {
-  store: PropTypes.object.isRequired,
-  router: PropTypes.any.isRequired,
-};
-
 export default reduxForm({
   form: 'login',
   validate,
-})(LoginForm);
+})(connect(state => ({
+  apiEngine: state.apiEngine,
+  routing: state.routing,
+}))(LoginForm));
diff --git a/src/common/components/forms/RegisterForm.js b/src/common/components/forms/RegisterForm.js
@@ -1,4 +1,6 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
 import { Field, reduxForm } from 'redux-form';
 import Button from 'react-bootstrap/lib/Button';
 // import validator from 'validator';
@@ -43,14 +45,16 @@ class RegisterForm extends Component {
   }
 
   _handleSubmit(formData) {
-    return userAPI(this.context.store.getState().apiEngine)
+    let { dispatch, apiEngine } = this.props;
+
+    return userAPI(apiEngine)
       .register(formData)
       .catch((err) => {
-        this.context.store.dispatch(pushErrors(err));
+        dispatch(pushErrors(err));
         throw err;
       })
       .then((json) => {
-        this.context.router.push('/');
+        dispatch(push('/'));
       });
   }
 
@@ -99,14 +103,11 @@ class RegisterForm extends Component {
   }
 };
 
-RegisterForm.contextTypes = {
-  store: PropTypes.any.isRequired,
-  router: PropTypes.any.isRequired,
-};
-
 export default reduxForm({
   form: 'register',
   validate,
   asyncValidate,
   asyncBlurFields: ['email'],
-})(RegisterForm);
+})(connect(state => ({
+  apiEngine: state.apiEngine,
+}))(RegisterForm));
diff --git a/src/common/components/layouts/PageLayout.js b/src/common/components/layouts/PageLayout.js
@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Grid from 'react-bootstrap/lib/Grid';
 import Navigation from '../utils/Navigation';
 import ErrorList from '../utils/ErrorList';
 
-const PageLayout = ({ children, ...rest }) => (
+let PageLayout = ({ hasGrid, children, ...rest }) => (
   <div>
     <Navigation />
     <ErrorList />
-    <Grid {...rest}>
-      {children}
-    </Grid>
+    {hasGrid ? (
+      <Grid {...rest}>
+        {children}
+      </Grid>
+    ) : children}
   </div>
 );
 
+PageLayout.propTypes = {
+  hasGrid: PropTypes.bool,
+};
+
+PageLayout.defaultProps = {
+  hasGrid: true,
+};
+
 export default PageLayout;
diff --git a/src/common/components/pages/admin/user/ListPage.js b/src/common/components/pages/admin/user/ListPage.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
+import { push } from 'react-router-redux';
 import PageHeader from 'react-bootstrap/lib/PageHeader';
 import Table from 'react-bootstrap/lib/Table';
 import Resources from '../../../../constants/Resources';
@@ -24,7 +24,7 @@ class ListPage extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    let { dispatch, apiEngine, page, router, location } = this.props;
+    let { dispatch, apiEngine, page, location } = this.props;
 
     if (prevProps.page.current !== page.current) {
       userAPI(apiEngine)
@@ -36,10 +36,10 @@ class ListPage extends Component {
         .then((json) => {
           this.setState({ users: json.users });
           dispatch(setPage(Resources.USER, json.page));
-          router.push({
+          dispatch(push({
             pathname: location.pathname,
             query: { page: json.page.current },
-          });
+          }));
         });
     }
   }
@@ -78,7 +78,7 @@ class ListPage extends Component {
   }
 }
 
-export default withRouter(connect(state => ({
+export default connect(state => ({
   apiEngine: state.apiEngine,
   page: state.pages[Resources.USER] || {},
-}))(ListPage));
+}))(ListPage);
diff --git a/src/common/components/pages/todo/ListPage.js b/src/common/components/pages/todo/ListPage.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
+import { push } from 'react-router-redux';
 import PageHeader from 'react-bootstrap/lib/PageHeader';
 import Resources from '../../../constants/Resources';
 import todoAPI from '../../../api/todo';
@@ -93,7 +93,7 @@ class ListPage extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    let { dispatch, apiEngine, page, router, location } = this.props;
+    let { dispatch, apiEngine, page, location } = this.props;
 
     if (prevProps.page.current !== page.current) {
       todoAPI(apiEngine)
@@ -105,10 +105,10 @@ class ListPage extends Component {
         .then((json) => {
           dispatch(setTodo(json.todos));
           dispatch(setPage(Resources.TODO, json.page));
-          router.push({
+          dispatch(push({
             pathname: location.pathname,
             query: { page: json.page.current },
-          });
+          }));
         });
     }
   }
@@ -177,8 +177,8 @@ class ListPage extends Component {
   }
 };
 
-export default withRouter(connect(state => ({
+export default connect(state => ({
   apiEngine: state.apiEngine,
   todos: state.todos,
   page: state.pages[Resources.TODO] || {},
-}))(ListPage));
+}))(ListPage);
diff --git a/src/common/components/pages/user/LoginPage.js b/src/common/components/pages/user/LoginPage.js
@@ -1,42 +1,58 @@
 import React from 'react';
 import PageHeader from 'react-bootstrap/lib/PageHeader';
+import Alert from 'react-bootstrap/lib/Alert';
 import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import PageLayout from '../../layouts/PageLayout';
 import Head from '../../widgets/Head';
 import LoginForm from '../../forms/LoginForm';
 
-const LoginPage = (props) => (
-  <PageLayout>
-    <Head
-      links={[
-        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css',
-      ]}
-    />
-    <PageHeader>Login</PageHeader>
-    <Grid>
-      <Row>
-        <Col md={9}>
-          <LoginForm location={props.location} />
-        </Col>
-        <Col md={3}>
-          <a
-            href="/auth/facebook"
-            className="btn btn-block btn-social btn-facebook"
-          >
-            <span className="fa fa-facebook"></span>Login with Facebook
-          </a>
-          <a
-            href="/auth/linkedin"
-            className="btn btn-block btn-social btn-linkedin"
-          >
-            <span className="fa fa-linkedin"></span>Login with LinkedIn
-          </a>
-        </Col>
-      </Row>
-    </Grid>
-  </PageLayout>
-);
+let LoginPage = ({ location }) => {
+  let { next } = location.query;
+  let search = next ? '?next=' + next : '';
+
+  return (
+    <PageLayout hasGrid={false}>
+      <Head
+        links={[
+          'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css',
+        ]}
+      />
+      <Grid>
+        <PageHeader>Login</PageHeader>
+        <Row>
+          <Col md={12}>
+            {next && (
+              <Alert bsStyle="warning">
+                <strong>Authentication Required</strong>
+                {' '}Please login first.
+              </Alert>
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col md={9}>
+            <LoginForm />
+          </Col>
+          <Col md={3}>
+            <a
+              href={`/auth/facebook${search}`}
+              className="btn btn-block btn-social btn-facebook"
+            >
+              <span className="fa fa-facebook"></span>Login with Facebook
+            </a>
+            <a
+              href={`/auth/linkedin${search}`}
+              className="btn btn-block btn-social btn-linkedin"
+            >
+              <span className="fa fa-linkedin"></span>Login with LinkedIn
+            </a>
+          </Col>
+        </Row>
+      </Grid>
+    </PageLayout>
+  );
+};
 
 export default LoginPage;