Remove deprecated methods usage

packages/app/pages/profile/ChangeEmailPage.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, Redirect } from 'react-router-dom';
 import FormModel from 'app/components/ui/form/FormModel';
-import ChangeEmail from 'app/components/profile/changeEmail/ChangeEmail';
+import ChangeEmail, {
+  ChangeEmailStep,
+} from 'app/components/profile/changeEmail/ChangeEmail';
 import {
   requestEmailChange,
   setNewEmail,
@@ -28,24 +30,20 @@ class ChangeEmailPage extends React.Component<Props> {
     goToProfile: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
-    const { step } = this.props.match.params;
+  render() {
+    const { step = 'step1', code } = this.props.match.params;
 
     if (step && !/^step[123]$/.test(step)) {
       // wrong param value
-      this.props.history.push('/404');
+      return <Redirect to="/404" />;
     }
-  }
-
-  render() {
-    const { step = 'step1', code } = this.props.match.params;
 
     return (
       <ChangeEmail
         onSubmit={this.onSubmit}
         email={this.props.email}
         lang={this.props.lang}
-        step={Number(step.slice(-1)) - 1}
+        step={(Number(step.slice(-1)) - 1) as ChangeEmailStep}
         onChangeStep={this.onChangeStep}
         code={code}
       />
@@ -56,7 +54,7 @@ class ChangeEmailPage extends React.Component<Props> {
     this.props.history.push(`/profile/change-email/step${++step}`);
   };
 
-  onSubmit = (step: number, form: FormModel) => {
+  onSubmit = (step: number, form: FormModel): Promise<void> => {
     return this.context
       .onSubmit({
         form,

packages/app/pages/profile/ChangeUsernamePage.tsx

@@ -7,8 +7,6 @@ import { changeUsername } from 'app/services/api/accounts';
 import { FormModel } from 'app/components/ui/form';
 import ChangeUsername from 'app/components/profile/changeUsername/ChangeUsername';
 
-type OwnProps = {};
-
 type Props = {
   username: string;
   updateUsername: (username: string) => void;
@@ -23,11 +21,7 @@ class ChangeUsernamePage extends React.Component<Props> {
 
   form = new FormModel();
 
-  actualUsername: string;
-
-  componentWillMount() {
-    this.actualUsername = this.props.username;
-  }
+  actualUsername: string = this.props.username;
 
   componentWillUnmount() {
     this.props.updateUsername(this.actualUsername);

packages/app/pages/profile/MultiFactorAuthPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import MultiFactorAuth, {
@@ -22,26 +22,24 @@ class MultiFactorAuthPage extends React.Component<Props> {
     goToProfile: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
-    const { step } = this.props.match.params;
-    const { user } = this.props;
+  render() {
+    const {
+      user,
+      match: {
+        params: { step },
+      },
+    } = this.props;
 
     if (step) {
       if (!/^[1-3]$/.test(step)) {
         // wrong param value
-        this.props.history.push('/404');
-
-        return;
+        return <Redirect to="/404" />;
       }
 
       if (user.isOtpEnabled) {
-        this.props.history.push('/mfa');
+        return <Redirect to="/mfa" />;
       }
     }
-  }
-
-  render() {
-    const { user } = this.props;
 
     return (
       <MultiFactorAuth
@@ -58,7 +56,7 @@ class MultiFactorAuthPage extends React.Component<Props> {
     const step = Number(this.props.match.params.step) - 1;
 
     if (step !== 0 && step !== 1 && step !== 2) {
-      return 1;
+      return 0;
     }
 
     return step;

packages/app/pages/root/RootPage.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { resetAuth } from 'app/components/auth/actions';
 import { withRouter } from 'react-router-dom';
@@ -25,7 +25,7 @@ import { RootState } from 'app/reducers';
 import styles from './root.scss';
 import messages from './RootPage.intl.json';
 
-class RootPage extends Component<{
+class RootPage extends React.PureComponent<{
   account: Account | null;
   user: User;
   isPopupActive: boolean;
@@ -88,8 +88,13 @@ class RootPage extends Component<{
               <Route path="/404" component={PageNotFound} />
               <Route path="/rules" component={RulesPage} />
               <Route path="/dev" component={DevPage} />
-              <AuthFlowRoute exact path="/" component={ProfilePage} />
-              <AuthFlowRoute path="/" component={AuthPage} />
+
+              {user.isGuest ? (
+                <AuthFlowRoute path="/" component={AuthPage} />
+              ) : (
+                <AuthFlowRoute exact path="/" component={ProfilePage} />
+              )}
+
               <Route component={PageNotFound} />
             </Switch>
           </div>