From 23125102251edc62034a21dd7f7eafe99b4f38d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=81=E6=B2=BB=E5=B9=B3?= Date: Mon, 24 Oct 2016 03:47:44 +0800 Subject: [PATCH] Update page transition mechanism --- src/common/components/forms/LoginForm.js | 28 ++++++++++--------- src/common/components/forms/RegisterForm.js | 21 +++++++------- .../components/pages/admin/user/ListPage.js | 12 ++++---- src/common/components/pages/todo/ListPage.js | 12 ++++---- .../components/pages/user/LogoutPage.js | 19 +++++++------ 5 files changed, 48 insertions(+), 44 deletions(-) diff --git a/src/common/components/forms/LoginForm.js b/src/common/components/forms/LoginForm.js index 95a907b..daf8023 100644 --- 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 index eeab539..cb9d87f 100644 --- 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 index 35149d3..daa501a 100644 --- 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 index 5ed075c..a4ee00c 100644 --- 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 index 915e64f..8993ccc 100644 --- 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,11 +11,13 @@ 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'); @@ -21,7 +25,7 @@ class LogoutPage extends React.Component { }) .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);