Update page transition mechanism

gocreating · Oct 23, 2016 · 2312510 · 2312510
1 parent 3ef7edd
commit 2312510
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 44 deletions.
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,17 +35,20 @@ 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) => {
@@ -52,13 +57,13 @@ class LoginForm extends Component {
             // 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);
+              dispatch(push(location.state.nextPathname));
             } else {
-              this.context.router.push('/');
+              dispatch(push('/'));
             }
           });
         } else {
-          this.context.store.dispatch(pushErrors([{
+          dispatch(pushErrors([{
             title: 'User Not Exists',
             detail: 'You may type wrong email or password.',
           }]));
@@ -100,12 +105,9 @@ 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,
+}))(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/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/LogoutPage.js b/src/common/components/pages/user/LogoutPage.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
 import userAPI from '../../../api/user';
 import { logoutUser } from '../../../actions/userActions';
 
@@ -9,19 +11,21 @@ class LogoutPage extends React.Component {
   }
 
   _logout() {
-    this.context.store.dispatch(logoutUser());
+    this.props.dispatch(logoutUser());
   }
 
   componentWillMount() {
-    userAPI(this.context.store.getState().apiEngine)
+    let { dispatch, apiEngine } = this.props;
+
+    userAPI(apiEngine)
       .logout()
       .catch((err) => {
         alert('Logout user fail');
         throw err;
       })
       .then((json) => {
         this._logout();
-        this.context.router.push('/');
+        dispatch(push('/'));
       });
   }
 
@@ -30,9 +34,6 @@ class LogoutPage extends React.Component {
   }
 };
 
-LogoutPage.contextTypes = {
-  store: React.PropTypes.object.isRequired,
-  router: React.PropTypes.any.isRequired,
-};
-
-export default LogoutPage;
+export default connect(state => ({
+  apiEngine: state.apiEngine,
+}))(LogoutPage);