Switch Profile to new Context API

packages/app/components/profile/Context.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormModel } from 'app/components/ui/form';
+
+export interface ProfileContext {
+  userId: number;
+  onSubmit: (options: {
+    form: FormModel;
+    sendData: () => Promise<any>;
+  }) => Promise<void>;
+  goToProfile: () => Promise<void>;
+}
+
+const Context = React.createContext<ProfileContext>({
+  userId: 0,
+  async onSubmit() {},
+  async goToProfile() {},
+});
+Context.displayName = 'ProfileContext';
+
+export const { Provider, Consumer } = Context;
+
+export default Context;

packages/app/components/profile/multiFactorAuth/MfaDisable.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import logger from 'app/services/logger';
 import { disable as disableMFA } from 'app/services/api/mfa';
 import { FormModel } from 'app/components/ui/form';
 
+import Context from '../Context';
 import MfaDisableForm from './disableForm/MfaDisableForm';
 import MfaStatus from './status/MfaStatus';
 
@@ -16,9 +16,8 @@ export default class MfaDisable extends React.Component<
     showForm: boolean;
   }
 > {
-  static contextTypes = {
-    userId: PropTypes.number.isRequired,
-  };
+  static contextType = Context;
+  /* TODO: use declare */ context: React.ContextType<typeof Context>;
 
   state = {
     showForm: false,

packages/app/components/profile/multiFactorAuth/MfaEnable.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, FormModel } from 'app/components/ui/form';
 import styles from 'app/components/profile/profileForm.scss';
 import Stepper from 'app/components/ui/stepper';
@@ -9,6 +8,7 @@ import logger from 'app/services/logger';
 import { getSecret, enable as enableMFA } from 'app/services/api/mfa';
 import { Form } from 'app/components/ui/form';
 
+import Context from '../Context';
 import Instructions from './instructions';
 import KeyForm from './keyForm';
 import Confirmation from './confirmation';
@@ -33,15 +33,14 @@ interface State {
 }
 
 export default class MfaEnable extends React.PureComponent<Props, State> {
+  static contextType = Context;
+  /* TODO: use declare */ context: React.ContextType<typeof Context>;
+
   static defaultProps = {
     confirmationForm: new FormModel(),
     step: 0,
   };
 
-  static contextTypes = {
-    userId: PropTypes.number.isRequired,
-  };
-
   state = {
     isLoading: false,
     activeStep: this.props.step,

packages/app/pages/profile/ChangeEmailPage.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { RouteComponentProps, Redirect } from 'react-router-dom';
 import FormModel from 'app/components/ui/form/FormModel';
@@ -12,6 +11,7 @@ import {
   confirmNewEmail,
 } from 'app/services/api/accounts';
 import { RootState } from 'app/reducers';
+import Context from 'app/components/profile/Context';
 
 interface RouteParams {
   step: 'step1' | 'step2' | 'step3';
@@ -24,11 +24,8 @@ interface Props extends RouteComponentProps<RouteParams> {
 }
 
 class ChangeEmailPage extends React.Component<Props> {
-  static contextTypes = {
-    userId: PropTypes.number.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    goToProfile: PropTypes.func.isRequired,
-  };
+  static contextType = Context;
+  /* TODO: use declare */ context: React.ContextType<typeof Context>;
 
   render() {
     const { step = 'step1', code } = this.props.match.params;

packages/app/pages/profile/ChangePasswordPage.tsx

@@ -1,24 +1,19 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { changePassword } from 'app/services/api/accounts';
 import { FormModel } from 'app/components/ui/form';
 import ChangePassword from 'app/components/profile/changePassword/ChangePassword';
 import { User } from 'app/components/user';
 import { updateUser } from 'app/components/user/actions';
+import Context from 'app/components/profile/Context';
 
-type OwnProps = {};
-
-type Props = OwnProps & {
+interface Props {
   updateUser: (fields: Partial<User>) => void;
-};
+}
 
 class ChangePasswordPage extends React.Component<Props> {
-  static contextTypes = {
-    userId: PropTypes.number.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    goToProfile: PropTypes.func.isRequired,
-  };
+  static contextType = Context;
+  /* TODO: use declare */ context: React.ContextType<typeof Context>;
 
   form = new FormModel();
 

packages/app/pages/profile/ChangeUsernamePage.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { updateUser } from 'app/components/user/actions';
@@ -6,6 +5,7 @@ import { RootState } from 'app/reducers';
 import { changeUsername } from 'app/services/api/accounts';
 import { FormModel } from 'app/components/ui/form';
 import ChangeUsername from 'app/components/profile/changeUsername/ChangeUsername';
+import Context from 'app/components/profile/Context';
 
 type Props = {
   username: string;
@@ -13,11 +13,8 @@ type Props = {
 };
 
 class ChangeUsernamePage extends React.Component<Props> {
-  static contextTypes = {
-    userId: PropTypes.number.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    goToProfile: PropTypes.func.isRequired,
-  };
+  static contextType = Context;
+  /* TODO: use declare */ context: React.ContextType<typeof Context>;
 
   form = new FormModel();
 

packages/app/pages/profile/MultiFactorAuthPage.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { RouteComponentProps, Redirect } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import MultiFactorAuth, {
   MfaStep,
@@ -8,6 +7,7 @@ import MultiFactorAuth, {
 import { FormModel } from 'app/components/ui/form';
 import { User } from 'app/components/user';
 import { RootState } from 'app/reducers';
+import Context from 'app/components/profile/Context';
 
 interface Props
   extends RouteComponentProps<{
@@ -17,10 +17,8 @@ interface Props
 }
 
 class MultiFactorAuthPage extends React.Component<Props> {
-  static contextTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    goToProfile: PropTypes.func.isRequired,
-  };
+  static contextType = Context;
+  /* TODO: use declare */ context: React.ContextType<typeof Context>;
 
   render() {
     const {

packages/app/pages/profile/ProfilePage.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { fetchUserData } from 'app/components/user/actions';
@@ -15,6 +14,7 @@ import ChangeEmailPage from 'app/pages/profile/ChangeEmailPage';
 import MultiFactorAuthPage from 'app/pages/profile/MultiFactorAuthPage';
 import { FormModel } from 'app/components/ui/form';
 import { RootState } from 'app/reducers';
+import { Provider } from 'app/components/profile/Context';
 
 import styles from './profile.scss';
 
@@ -23,61 +23,61 @@ interface Props {
   onSubmit: (options: {
     form: FormModel;
     sendData: () => Promise<any>;
-  }) => void;
+  }) => Promise<void>;
   fetchUserData: () => Promise<any>;
 }
 
 class ProfilePage extends React.Component<Props> {
-  static childContextTypes = {
-    userId: PropTypes.number,
-    onSubmit: PropTypes.func,
-    goToProfile: PropTypes.func,
-  };
-
-  getChildContext() {
-    return {
-      userId: this.props.userId,
-      onSubmit: this.props.onSubmit,
-      goToProfile: () => this.props.fetchUserData().then(this.goToProfile),
-    };
-  }
-
   render() {
+    const { userId, onSubmit } = this.props;
+
     return (
       <div className={styles.container}>
-        <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>
+        <Provider
+          value={{
+            userId,
+            onSubmit,
+            goToProfile: this.goToProfile,
+          }}
+        >
+          <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>
 
-        <div className={styles.footer}>
-          <FooterMenu />
-        </div>
+          <div className={styles.footer}>
+            <FooterMenu />
+          </div>
+        </Provider>
       </div>
     );
   }
 
-  goToProfile = () => browserHistory.push('/');
+  goToProfile = async () => {
+    await this.props.fetchUserData();
+
+    browserHistory.push('/');
+  };
 }
 
 export default connect(