Tiny refactoring of profile pages logic

src/components/auth/PanelTransition.jsx

@@ -32,10 +32,10 @@ class PanelTransition extends Component {
             })
         }).isRequired,
         user: userShape.isRequired,
-        setError: React.PropTypes.func.isRequired,
+        setError: PropTypes.func.isRequired,
-        clearErrors: React.PropTypes.func.isRequired,
+        clearErrors: PropTypes.func.isRequired,
-        resolve: React.PropTypes.func.isRequired,
+        resolve: PropTypes.func.isRequired,
-        reject: React.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
     };

src/components/profile/changeEmail/ChangeEmail.jsx

@@ -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);
     };

src/pages/profile/ChangePasswordPage.jsx

@@ -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) => {
+    updateUser
-        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()));
-                    }
-                })));
-            });
-        };
-    }
 })(ChangePasswordPage);

src/pages/profile/ChangeUsernamePage.jsx

@@ -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
+        updateUsername: PropTypes.func.isRequired
-        changeUsername: PropTypes.func.isRequired // saves username to backend
+    };
+
+    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);

src/pages/profile/ProfileChangeEmailPage.jsx

@@ -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,
+        email: PropTypes.string.isRequired
-        updateUsername: PropTypes.func.isRequired, // updates username in state
-        changeUsername: PropTypes.func.isRequired // saves username to backend
     };
 
     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);

src/pages/profile/ProfilePage.jsx

@@ -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);