Introduce storybooks for all profile pages

packages/app/pages/profile/ChangeEmailPage.tsx

@@ -13,7 +13,6 @@ interface RouteParams {
 }
 
 interface Props extends RouteComponentProps<RouteParams> {
-    lang: string;
     email: string;
 }
 
@@ -33,7 +32,6 @@ class ChangeEmailPage extends React.Component<Props> {
             <ChangeEmail
                 onSubmit={this.onSubmit}
                 email={this.props.email}
-                lang={this.props.lang}
                 step={(Number(step.slice(-1)) - 1) as ChangeEmailStep}
                 onChangeStep={this.onChangeStep}
                 code={code}
@@ -96,5 +94,4 @@ function handleErrors(repeatUrl?: string): <T extends { errors: Record<string, a
 
 export default connect((state: RootState) => ({
     email: state.user.email,
-    lang: state.user.lang,
 }))(ChangeEmailPage);

packages/app/pages/profile/ProfileController.tsx

@@ -0,0 +1,171 @@
+import React, { ComponentType, useCallback } from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import { refreshUserData } from 'app/components/accounts/actions';
+import { create as createPopup } from 'app/components/ui/popup/actions';
+import PasswordRequestForm from 'app/components/profile/passwordRequestForm';
+import logger from 'app/services/logger';
+import { browserHistory } from 'app/services/history';
+import { FooterMenu } from 'app/components/footerMenu';
+import { FormModel } from 'app/components/ui/form';
+import { Dispatch, RootState } from 'app/reducers';
+import { Provider } from 'app/components/profile/Context';
+import { ComponentLoader } from 'app/components/ui/loader';
+
+import styles from './profile.scss';
+
+const Profile = React.lazy(() => import(/* webpackChunkName: "page-profile-index" */ 'app/pages/profile/ProfilePage'));
+const ChangePasswordPage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-change-password" */ 'app/pages/profile/ChangePasswordPage'),
+);
+const ChangeUsernamePage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-change-username" */ 'app/pages/profile/ChangeUsernamePage'),
+);
+const ChangeEmailPage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-change-email" */ 'app/pages/profile/ChangeEmailPage'),
+);
+const MultiFactorAuthPage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-mfa" */ 'app/pages/profile/MultiFactorAuthPage'),
+);
+
+interface Props {
+    userId: number;
+    onSubmit: (options: { form: FormModel; sendData: () => Promise<any> }) => Promise<void>;
+    refreshUserData: () => Promise<any>;
+}
+
+const ProfileController: ComponentType<Props> = ({ userId, onSubmit, refreshUserData }) => {
+    const goToProfile = useCallback(async () => {
+        await refreshUserData();
+
+        browserHistory.push('/');
+    }, [refreshUserData]);
+
+    return (
+        <div className={styles.container}>
+            <Provider
+                value={{
+                    userId,
+                    onSubmit,
+                    goToProfile,
+                }}
+            >
+                <React.Suspense fallback={<ComponentLoader />}>
+                    <Switch>
+                        <Route path="/profile/mfa/step:step([1-3])" component={MultiFactorAuthPage} />
+                        <Route path="/profile/mfa" exact component={MultiFactorAuthPage} />
+                        <Route path="/profile/change-password" exact component={ChangePasswordPage} />
+                        <Route path="/profile/change-username" exact component={ChangeUsernamePage} />
+                        <Route path="/profile/change-email/:step?/:code?" component={ChangeEmailPage} />
+                        <Route path="/profile" exact component={Profile} />
+                        <Route path="/" exact component={Profile} />
+                        <Redirect to="/404" />
+                    </Switch>
+                </React.Suspense>
+
+                <div className={styles.footer}>
+                    <FooterMenu />
+                </div>
+            </Provider>
+        </div>
+    );
+};
+
+export default connect(
+    (state: RootState) => ({
+        userId: state.user.id!,
+    }),
+    {
+        refreshUserData,
+        onSubmit: ({ form, sendData }: { form: FormModel; sendData: () => Promise<any> }) => (dispatch: Dispatch) => {
+            form.beginLoading();
+
+            return sendData()
+                .catch((resp) => {
+                    const requirePassword = resp.errors && !!resp.errors.password;
+
+                    // prevalidate user input, because requestPassword popup will block the
+                    // entire form from input, so it must be valid
+                    if (resp.errors) {
+                        delete resp.errors.password;
+
+                        if (resp.errors.email && resp.data && resp.data.canRepeatIn) {
+                            resp.errors.email = {
+                                type: resp.errors.email,
+                                payload: {
+                                    msLeft: resp.data.canRepeatIn * 1000,
+                                },
+                            };
+                        }
+
+                        if (Object.keys(resp.errors).length) {
+                            form.setErrors(resp.errors);
+
+                            return Promise.reject(resp);
+                        }
+
+                        if (requirePassword) {
+                            return requestPassword(form);
+                        }
+                    }
+
+                    return Promise.reject(resp);
+                })
+                .catch((resp) => {
+                    if (!resp || !resp.errors) {
+                        logger.warn('Unexpected profile editing error', {
+                            resp,
+                        });
+                    } else {
+                        return Promise.reject(resp);
+                    }
+                })
+                .finally(() => form.endLoading());
+
+            function requestPassword(form: FormModel) {
+                return new Promise((resolve, reject) => {
+                    dispatch(
+                        createPopup({
+                            Popup(props: { onClose: () => Promise<any> }) {
+                                const onSubmit = () => {
+                                    form.beginLoading();
+
+                                    sendData()
+                                        .then(resolve)
+                                        .then(props.onClose)
+                                        .catch((resp) => {
+                                            if (resp.errors) {
+                                                form.setErrors(resp.errors);
+
+                                                const parentFormHasErrors =
+                                                    Object.keys(resp.errors).filter((name) => name !== 'password')
+                                                        .length > 0;
+
+                                                if (parentFormHasErrors) {
+                                                    // something wrong with parent form, hiding popup and show that form
+                                                    props.onClose();
+                                                    reject(resp);
+                                                    logger.warn(
+                                                        'Profile: can not submit password popup due to errors in source form',
+                                                        { resp },
+                                                    );
+                                                }
+                                            } else {
+                                                return Promise.reject(resp);
+                                            }
+                                        })
+                                        .finally(() => form.endLoading());
+                                };
+
+                                return <PasswordRequestForm form={form} onSubmit={onSubmit} />;
+                            },
+                            // TODO: this property should be automatically extracted from the popup's isClosable prop
+                            disableOverlayClose: true,
+                        }),
+                    );
+                });
+            }
+        },
+    },
+)(ProfileController);

packages/app/pages/profile/ProfilePage.tsx

@@ -1,174 +1,14 @@
-import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { refreshUserData } from 'app/components/accounts/actions';
-import { create as createPopup } from 'app/components/ui/popup/actions';
-import PasswordRequestForm from 'app/components/profile/passwordRequestForm';
-import logger from 'app/services/logger';
-import { browserHistory } from 'app/services/history';
-import { FooterMenu } from 'app/components/footerMenu';
-import { FormModel } from 'app/components/ui/form';
-import { Dispatch, RootState } from 'app/reducers';
-import { Provider } from 'app/components/profile/Context';
-import { ComponentLoader } from 'app/components/ui/loader';
+import React, { ComponentType } from 'react';
+import { useSelector } from 'react-redux';
 
-import styles from './profile.scss';
+import { RootState } from 'app/reducers';
 
-const Profile = React.lazy(() => import(/* webpackChunkName: "page-profile-index" */ 'app/components/profile/Profile'));
-const ChangePasswordPage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-change-password" */ 'app/pages/profile/ChangePasswordPage'),
-);
-const ChangeUsernamePage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-change-username" */ 'app/pages/profile/ChangeUsernamePage'),
-);
-const ChangeEmailPage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-change-email" */ 'app/pages/profile/ChangeEmailPage'),
-);
-const MultiFactorAuthPage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-mfa" */ 'app/pages/profile/MultiFactorAuthPage'),
-);
+import Profile from 'app/components/profile/Profile';
 
-interface Props {
-    userId: number;
-    onSubmit: (options: { form: FormModel; sendData: () => Promise<any> }) => Promise<void>;
-    refreshUserData: () => Promise<any>;
-}
+const ProfileController: ComponentType = () => {
+    const [user, activeLocale] = useSelector((state: RootState) => [state.user, state.i18n.locale]);
 
-class ProfilePage extends React.Component<Props> {
-    render() {
-        const { userId, onSubmit } = this.props;
+    return <Profile user={user} activeLocale={activeLocale} />;
+};
 
-        return (
-            <div className={styles.container}>
-                <Provider
-                    value={{
-                        userId,
-                        onSubmit,
-                        goToProfile: this.goToProfile,
-                    }}
-                >
-                    <React.Suspense fallback={<ComponentLoader />}>
-                        <Switch>
-                            <Route path="/profile/mfa/step:step([1-3])" component={MultiFactorAuthPage} />
-                            <Route path="/profile/mfa" exact component={MultiFactorAuthPage} />
-                            <Route path="/profile/change-password" exact component={ChangePasswordPage} />
-                            <Route path="/profile/change-username" exact component={ChangeUsernamePage} />
-                            <Route path="/profile/change-email/:step?/:code?" component={ChangeEmailPage} />
-                            <Route path="/profile" exact component={Profile} />
-                            <Route path="/" exact component={Profile} />
-                            <Redirect to="/404" />
-                        </Switch>
-                    </React.Suspense>
-
-                    <div className={styles.footer}>
-                        <FooterMenu />
-                    </div>
-                </Provider>
-            </div>
-        );
-    }
-
-    goToProfile = async () => {
-        await this.props.refreshUserData();
-
-        browserHistory.push('/');
-    };
-}
-
-export default connect(
-    (state: RootState) => ({
-        userId: state.user.id!,
-    }),
-    {
-        refreshUserData,
-        onSubmit: ({ form, sendData }: { form: FormModel; sendData: () => Promise<any> }) => (dispatch: Dispatch) => {
-            form.beginLoading();
-
-            return sendData()
-                .catch((resp) => {
-                    const requirePassword = resp.errors && !!resp.errors.password;
-
-                    // prevalidate user input, because requestPassword popup will block the
-                    // entire form from input, so it must be valid
-                    if (resp.errors) {
-                        delete resp.errors.password;
-
-                        if (resp.errors.email && resp.data && resp.data.canRepeatIn) {
-                            resp.errors.email = {
-                                type: resp.errors.email,
-                                payload: {
-                                    msLeft: resp.data.canRepeatIn * 1000,
-                                },
-                            };
-                        }
-
-                        if (Object.keys(resp.errors).length) {
-                            form.setErrors(resp.errors);
-
-                            return Promise.reject(resp);
-                        }
-
-                        if (requirePassword) {
-                            return requestPassword(form);
-                        }
-                    }
-
-                    return Promise.reject(resp);
-                })
-                .catch((resp) => {
-                    if (!resp || !resp.errors) {
-                        logger.warn('Unexpected profile editing error', {
-                            resp,
-                        });
-                    } else {
-                        return Promise.reject(resp);
-                    }
-                })
-                .finally(() => form.endLoading());
-
-            function requestPassword(form: FormModel) {
-                return new Promise((resolve, reject) => {
-                    dispatch(
-                        createPopup({
-                            Popup(props: { onClose: () => Promise<any> }) {
-                                const onSubmit = () => {
-                                    form.beginLoading();
-
-                                    sendData()
-                                        .then(resolve)
-                                        .then(props.onClose)
-                                        .catch((resp) => {
-                                            if (resp.errors) {
-                                                form.setErrors(resp.errors);
-
-                                                const parentFormHasErrors =
-                                                    Object.keys(resp.errors).filter((name) => name !== 'password')
-                                                        .length > 0;
-
-                                                if (parentFormHasErrors) {
-                                                    // something wrong with parent form, hiding popup and show that form
-                                                    props.onClose();
-                                                    reject(resp);
-                                                    logger.warn(
-                                                        'Profile: can not submit password popup due to errors in source form',
-                                                        { resp },
-                                                    );
-                                                }
-                                            } else {
-                                                return Promise.reject(resp);
-                                            }
-                                        })
-                                        .finally(() => form.endLoading());
-                                };
-
-                                return <PasswordRequestForm form={form} onSubmit={onSubmit} />;
-                            },
-                            // TODO: this property should be automatically extracted from the popup's isClosable prop
-                            disableOverlayClose: true,
-                        }),
-                    );
-                });
-            }
-        },
-    },
-)(ProfilePage);
+export default ProfileController;

packages/app/pages/root/RootPage.tsx

@@ -21,8 +21,8 @@ import { ComponentLoader } from 'app/components/ui/loader';
 import styles from './root.scss';
 import siteName from './siteName.intl';
 
-const ProfilePage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfilePage'),
+const ProfileController = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfileController'),
 );
 const PageNotFound = React.lazy(() => import(/* webpackChunkName: "page-not-found" */ 'app/pages/404/PageNotFound'));
 const RulesPage = React.lazy(() => import(/* webpackChunkName: "page-rules" */ 'app/pages/rules/RulesPage'));
@@ -86,7 +86,7 @@ class RootPage extends React.PureComponent<{
                     <div className={styles.body}>
                         <React.Suspense fallback={<ComponentLoader />}>
                             <Switch>
-                                <PrivateRoute path="/profile" component={ProfilePage} />
+                                <PrivateRoute path="/profile" component={ProfileController} />
                                 <Route path="/404" component={PageNotFound} />
                                 <Route path="/rules" component={RulesPage} />
                                 <Route path="/dev" component={DevPage} />
@@ -95,7 +95,7 @@ class RootPage extends React.PureComponent<{
                                     exact
                                     path="/"
                                     key="indexPage"
-                                    component={user.isGuest ? AuthPage : ProfilePage}
+                                    component={user.isGuest ? AuthPage : ProfileController}
                                 />
                                 <AuthFlowRoute path="/" component={AuthPage} />