From 06517be48b147d9637a1f28612b284e45f52ec6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Fri, 2 Jun 2017 14:39:07 +0200 Subject: [PATCH] Update the user store to be immutable --- src/public/js/app.js | 2 +- src/public/js/components/users/edit.js | 79 ++++++++++++++++++------- src/public/js/components/users/login.js | 13 ++-- src/public/js/reducers/users.js | 29 +++++---- 4 files changed, 80 insertions(+), 43 deletions(-) diff --git a/src/public/js/app.js b/src/public/js/app.js index 9dc472e..90a7db9 100644 --- a/src/public/js/app.js +++ b/src/public/js/app.js @@ -46,7 +46,7 @@ function mapStateToProps(state) { torrentCount = state.torrentStore.get('torrents').size; } return { - username: state.userStore.username, + username: state.userStore.get('username'), torrentCount: torrentCount, alerts: state.alerts, } diff --git a/src/public/js/components/users/edit.js b/src/public/js/components/users/edit.js index 4b6af6a..ce1404b 100644 --- a/src/public/js/components/users/edit.js +++ b/src/public/js/components/users/edit.js @@ -2,11 +2,13 @@ import React from 'react' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' -import { Control, Form } from 'react-redux-form'; import { updateUser } from '../../actions/users' function mapStateToProps(state) { - return { user: state.userStore }; + return { + polochonToken: state.userStore.get('polochonToken'), + polochonUrl: state.userStore.get('polochonUrl'), + }; } const mapDispatchToProps = (dispatch) => bindActionCreators({ updateUser }, dispatch) @@ -14,16 +16,40 @@ const mapDispatchToProps = (dispatch) => class UserEdit extends React.Component { constructor(props) { super(props); + this.state = { + polochonToken: props.polochonToken, + polochonUrl: props.polochonUrl, + }; this.handleSubmit = this.handleSubmit.bind(this); + this.handleUrlInput = this.handleUrlInput.bind(this); + this.handleTokenInput = this.handleTokenInput.bind(this); } - handleSubmit() { + handleSubmit(ev) { + ev.preventDefault(); this.props.updateUser({ - 'polochon_url': this.props.user.polochonUrl, - 'polochon_token': this.props.user.polochonToken, + 'polochon_url': this.refs.polochonUrl.value, + 'polochon_token': this.refs.polochonToken.value, 'password': this.refs.newPassword.value, 'password_confirm': this.refs.newPasswordConfirm.value, }); } + handleTokenInput() { + this.setState({ polochonToken: this.refs.polochonToken.value }); + } + handleUrlInput() { + this.setState({ polochonUrl: this.refs.polochonUrl.value }); + } + componentWillReceiveProps(nextProps) { + if ((nextProps.polochonUrl !== "") + && (this.state.polochonUrl === "") + && (nextProps.polochonToken !== "") + && (this.state.polochonToken === "")) { + this.setState({ + polochonToken: nextProps.polochonToken, + polochonUrl: nextProps.polochonUrl, + }); + } + } render() { return (
@@ -31,35 +57,44 @@ class UserEdit extends React.Component {

Edit user

- -
this.handleSubmit(val)}> + this.handleSubmit(ev)}>
- +
- +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- -
-
-
+
+ +
+ +
); diff --git a/src/public/js/components/users/login.js b/src/public/js/components/users/login.js index be24d46..f9387b2 100644 --- a/src/public/js/components/users/login.js +++ b/src/public/js/components/users/login.js @@ -5,7 +5,10 @@ import { bindActionCreators } from 'redux' import { loginUser } from '../../actions/users' function mapStateToProps(state) { - return { user: state.userStore }; + return { + isLogged: state.userStore.get('isLogged'), + loading: state.userStore.get('loading'), + }; } const mapDispatchToProps = (dispatch) => bindActionCreators({ loginUser }, dispatch) @@ -16,7 +19,7 @@ class UserLoginForm extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); } componentWillReceiveProps(nextProps) { - if (!nextProps.user.isLogged) { + if (!nextProps.isLogged) { return } if (!nextProps.location.query.redirect) { @@ -29,7 +32,7 @@ class UserLoginForm extends React.Component { } handleSubmit(e) { e.preventDefault(); - if (this.props.user.userLoading) { + if (this.props.loading) { return; } const username = this.refs.username.value; @@ -57,12 +60,12 @@ class UserLoginForm extends React.Component {

- {this.props.user.userLoading && + {this.props.loading && } - {this.props.user.userLoading || + {this.props.loading || }
diff --git a/src/public/js/reducers/users.js b/src/public/js/reducers/users.js index eac6063..ee36bb8 100644 --- a/src/public/js/reducers/users.js +++ b/src/public/js/reducers/users.js @@ -1,46 +1,45 @@ +import { OrderedMap, Map, fromJS } from 'immutable' + import jwtDecode from 'jwt-decode' import Cookies from 'universal-cookie' -const defaultState = { - userLoading: false, +const defaultState = Map({ + loading: false, username: "", isAdmin: false, isLogged: false, polochonToken: "", polochonUrl: "", -}; +}); export default function userStore(state = defaultState, action) { switch (action.type) { case 'USER_LOGIN_PENDING': - return Object.assign({}, state, { - userLoading: true, - }) + return state.set('loading', true); case 'USER_LOGIN_FULFILLED': if (action.payload.response.status === "error") { - return logoutUser(state) + return logoutUser() } return updateFromToken(state, action.payload.response.data.token) case 'USER_SET_TOKEN': return updateFromToken(state, action.payload.token) case 'USER_LOGOUT': - return logoutUser(state) + return logoutUser() case 'GET_USER_FULFILLED': - return Object.assign({}, state, { + return state.merge(Map({ polochonToken: action.payload.response.data.token, polochonUrl: action.payload.response.data.url, - }) + })) default: return state; } } -function logoutUser(state) { +function logoutUser() { localStorage.removeItem('token'); const cookies = new Cookies(); cookies.remove('token'); - - return Object.assign({}, state, defaultState) + return defaultState } function updateFromToken(state, token) { @@ -50,10 +49,10 @@ function updateFromToken(state, token) { const cookies = new Cookies(); cookies.set('token', token); - return Object.assign({}, state, { + return state.merge(Map({ userLoading: false, isLogged: true, isAdmin: decodedToken.isAdmin, username: decodedToken.username, - }) + })) }