ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-07-01 04:33:23 +05:30
Code Issues Packages Projects Releases Wiki Activity

Tiny refactoring of profile pages logic

Browse Source
This commit is contained in:
SleepWalker 2016-05-12 07:30:10 +03:00
parent f837613553
commit a81a2d6205
6 changed files with 95 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/auth/PanelTransition.jsx
View File

@ -32,10 +32,10 @@ class PanelTransition extends Component {
})
}).isRequired,
user: userShape.isRequired,
setError: React.PropTypes.func.isRequired,
clearErrors: React.PropTypes.func.isRequired,
resolve: React.PropTypes.func.isRequired,
reject: React.PropTypes.func.isRequired,
setError: PropTypes.func.isRequired,
clearErrors: PropTypes.func.isRequired,
resolve: PropTypes.func.isRequired,
reject: PropTypes.func.isRequired,
// local props
Title: PropTypes.element,
@ -54,7 +54,7 @@ class PanelTransition extends Component {
})
}),
user: userShape,
clearErrors: React.PropTypes.func,
clearErrors: PropTypes.func,
resolve: PropTypes.func,
reject: PropTypes.func
};

6
src/components/profile/changeEmail/ChangeEmail.jsx
View File

@ -24,7 +24,6 @@ export default class ChangeEmail extends Component {
static propTypes = {
email: PropTypes.string.isRequired,
form: PropTypes.instanceOf(FormModel),
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
};
@ -38,7 +37,6 @@ export default class ChangeEmail extends Component {
activeStep: 0
};
render() {
const {form} = this.props;
const {activeStep} = this.state;
@ -234,10 +232,6 @@ export default class ChangeEmail extends Component {
return this.state.activeStep + 1 === STEPS_TOTAL;
}
onUsernameChange = (event) => {
this.props.onChange(event.target.value);
};
onFormSubmit = () => {
this.props.onSubmit(this.props.form);
};

67
src/pages/profile/ChangePasswordPage.jsx
View File

@ -3,13 +3,15 @@ import React, { Component, PropTypes } from 'react';
import accounts from 'services/api/accounts';
import { FormModel } from 'components/ui/form';
import ChangePassword from 'components/profile/changePassword/ChangePassword';
import PasswordRequestForm from 'components/profile/passwordRequestForm/PasswordRequestForm';
class ChangePasswordPage extends Component {
static displayName = 'ChangePasswordPage';
static propTypes = {
changePassword: PropTypes.func.isRequired
};
static contextTypes = {
onSubmit: PropTypes.func.isRequired
};
form = new FormModel();
@ -21,61 +23,22 @@ class ChangePasswordPage extends Component {
}
onSubmit = () => {
this.props.changePassword(this.form);
const {form} = this;
this.context.onSubmit({
form,
sendData: () => accounts.changePassword(form.serialize())
}).then(() => {
this.props.updateUser({
passwordChangedAt: Date.now() / 1000,
shouldChangePassword: false
});
});
};
}
import { connect } from 'react-redux';
import { routeActions } from 'react-router-redux';
import { create as createPopup } from 'components/ui/popup/actions';
import { updateUser } from 'components/user/actions';
function goToProfile() {
return routeActions.push('/');
}
export default connect(null, {
changePassword: (form) => {
return (dispatch) => {
accounts.changePassword(form.serialize())
.catch((resp) => {
// prevalidate user input, because requestPassword popup will block the
// entire form from input, so it must be valid
if (resp.errors) {
Reflect.deleteProperty(resp.errors, 'password');
if (Object.keys(resp.errors).length) {
form.setErrors(resp.errors);
return Promise.reject(resp);
}
}
return Promise.resolve();
})
.then(() => {
dispatch(createPopup(PasswordRequestForm, (props) => ({
form,
onSubmit: () => {
// TODO: hide this logic in action
accounts.changePassword(form.serialize())
.catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
}
return Promise.reject(resp);
})
.then(() => {
dispatch(updateUser({
passwordChangedAt: Date.now() / 1000,
shouldChangePassword: false
}));
})
.then(props.onClose)
.then(() => dispatch(goToProfile()));
}
})));
});
};
}
updateUser
})(ChangePasswordPage);

66
src/pages/profile/ChangeUsernamePage.jsx
View File

@ -3,15 +3,17 @@ import React, { Component, PropTypes } from 'react';
import accounts from 'services/api/accounts';
import { FormModel } from 'components/ui/form';
import ChangeUsername from 'components/profile/changeUsername/ChangeUsername';
import PasswordRequestForm from 'components/profile/passwordRequestForm/PasswordRequestForm';
class ChangeUsernamePage extends Component {
static displayName = 'ChangeUsernamePage';
static propTypes = {
username: PropTypes.string.isRequired,
updateUsername: PropTypes.func.isRequired, // updates username in state
changeUsername: PropTypes.func.isRequired // saves username to backend
updateUsername: PropTypes.func.isRequired
};
static contextTypes = {
onSubmit: PropTypes.func.isRequired
};
form = new FormModel();
@ -41,7 +43,13 @@ class ChangeUsernamePage extends Component {
};
onSubmit = () => {
this.props.changeUsername(this.form).then(() => {
const {form} = this;
this.context.onSubmit({
form,
sendData: () => accounts.changeUsername(form.serialize())
}).then(() => {
this.props.updateUsername(form.value('username'));
this.setState({
actualUsername: this.props.username
});
@ -50,62 +58,12 @@ class ChangeUsernamePage extends Component {
}
import { connect } from 'react-redux';
import { routeActions } from 'react-router-redux';
import { create as createPopup } from 'components/ui/popup/actions';
import { updateUser } from 'components/user/actions';
function goToProfile() {
return routeActions.push('/');
}
export default connect((state) => ({
username: state.user.username
}), {
updateUsername: (username) => {
return updateUser({username});
},
changeUsername: (form) => {
return (dispatch) => accounts.changeUsername(form.serialize())
.catch((resp) => {
// prevalidate user input, because requestPassword popup will block the
// entire form from input, so it must be valid
if (resp.errors) {
Reflect.deleteProperty(resp.errors, 'password');
if (Object.keys(resp.errors).length) {
form.setErrors(resp.errors);
return Promise.reject(resp);
}
}
return Promise.resolve();
})
.then(() => {
return new Promise((resolve) => {
dispatch(createPopup(PasswordRequestForm, (props) => ({
form,
onSubmit: () => {
// TODO: hide this logic in action
accounts.changeUsername(form.serialize())
.catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
}
return Promise.reject(resp);
})
.then(() => {
dispatch(updateUser({
username: form.value('username')
}));
})
.then(resolve)
.then(props.onClose)
.then(() => dispatch(goToProfile()));
}
})));
});
})
;
}
})(ChangeUsernamePage);

70
src/pages/profile/ProfileChangeEmailPage.jsx
View File

@ -1,17 +1,13 @@
import React, { Component, PropTypes } from 'react';
import accounts from 'services/api/accounts';
import { FormModel } from 'components/ui/form';
import ChangeEmail from 'components/profile/changeEmail/ChangeEmail';
import PasswordRequestForm from 'components/profile/passwordRequestForm/PasswordRequestForm';
class ProfileChangeEmailPage extends Component {
static displayName = 'ProfileChangeEmailPage';
static propTypes = {
email: PropTypes.string.isRequired,
updateUsername: PropTypes.func.isRequired, // updates username in state
changeUsername: PropTypes.func.isRequired // saves username to backend
email: PropTypes.string.isRequired
};
form = new FormModel();
@ -20,82 +16,18 @@ class ProfileChangeEmailPage extends Component {
return (
<ChangeEmail form={this.form}
onSubmit={this.onSubmit}
onChange={this.onUsernameChange}
email={this.props.email}
/>
);
}
onUsernameChange = (username) => {
this.props.updateUsername(username);
};
onSubmit = () => {
this.props.changeUsername(this.form).then(() => {
this.setState({
actualUsername: this.props.username
});
});
};
}
import { connect } from 'react-redux';
import { routeActions } from 'react-router-redux';
import { create as createPopup } from 'components/ui/popup/actions';
import { updateUser } from 'components/user/actions';
function goToProfile() {
return routeActions.push('/');
}
export default connect((state) => ({
email: state.user.email
}), {
updateUsername: (username) => {
return updateUser({username});
},
changeUsername: (form) => {
return (dispatch) => accounts.changeUsername(form.serialize())
.catch((resp) => {
// prevalidate user input, because requestPassword popup will block the
// entire form from input, so it must be valid
if (resp.errors) {
Reflect.deleteProperty(resp.errors, 'password');
if (Object.keys(resp.errors).length) {
form.setErrors(resp.errors);
return Promise.reject(resp);
}
}
return Promise.resolve();
})
.then(() => {
return new Promise((resolve) => {
dispatch(createPopup(PasswordRequestForm, (props) => ({
form,
onSubmit: () => {
// TODO: hide this logic in action
accounts.changeUsername(form.serialize())
.catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
}
return Promise.reject(resp);
})
.then(() => {
dispatch(updateUser({
username: form.value('username')
}));
})
.then(resolve)
.then(props.onClose)
.then(() => dispatch(goToProfile()));
}
})));
});
})
;
}
})(ProfileChangeEmailPage);

64
src/pages/profile/ProfilePage.jsx
View File

@ -1,10 +1,24 @@
import React, { Component } from 'react';
import React, { Component, PropTypes } from 'react';
import styles from './profile.scss';
export default class ProfilePage extends Component {
class ProfilePage extends Component {
displayName = 'ProfilePage';
static propTypes = {
onSubmit: PropTypes.func.isRequired
};
static childContextTypes = {
onSubmit: PropTypes.func
};
getChildContext() {
return {
onSubmit: this.props.onSubmit
};
}
render() {
return (
<div className={styles.container}>
@ -13,3 +27,49 @@ export default class ProfilePage extends Component {
);
}
}
import { connect } from 'react-redux';
import { routeActions } from 'react-router-redux';
import { create as createPopup } from 'components/ui/popup/actions';
import PasswordRequestForm from 'components/profile/passwordRequestForm/PasswordRequestForm';
function goToProfile() {
return routeActions.push('/');
}
export default connect(null, {
onSubmit: ({form, sendData}) => (dispatch) =>
sendData()
.catch((resp) => {
// prevalidate user input, because requestPassword popup will block the
// entire form from input, so it must be valid
if (resp.errors) {
Reflect.deleteProperty(resp.errors, 'password');
if (Object.keys(resp.errors).length) {
form.setErrors(resp.errors);
return Promise.reject(resp);
}
}
return Promise.resolve();
})
.then(() => new Promise((resolve) => {
dispatch(createPopup(PasswordRequestForm, (props) => ({
form,
onSubmit: () => {
sendData()
.catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
}
return Promise.reject(resp);
})
.then(resolve)
.then(props.onClose)
.then(() => dispatch(goToProfile()));
}
})));
}))
})(ProfilePage);