Implemented strict mode for the project (broken tests, hundreds of @ts-ignore and new errors are included) [skip ci]

packages/app/pages/404/PageNotFound.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
@@ -8,48 +8,48 @@ import styles from './404.scss';
 import messages from './PageNotFound.intl.json';
 import profileStyles from '../profile/profile.scss';
 
-export default function PageNotFound() {
-  return (
-    <div className={styles.page}>
-      <Message {...messages.title}>
-        {pageTitle => <Helmet title={pageTitle as string} />}
-      </Message>
+const PageNotFound: ComponentType = () => (
+  <div className={styles.page}>
+    <Message {...messages.title}>
+      {pageTitle => <Helmet title={pageTitle as string} />}
+    </Message>
 
-      <div className={styles.loading}>
-        <div className={styles.cube} />
-        <div className={styles.road} />
-        <div className={styles.rocks}>
-          <span className={styles.rockOne} />
-          <span className={styles.rockTwo} />
-          <span className={styles.rockThree} />
-          <span className={styles.rockFour} />
-          <span className={styles.rockFive} />
-        </div>
-        <div className={styles.clouds}>
-          <span className={styles.cloudOne} />
-          <span className={styles.cloudTwo} />
-          <span className={styles.cloudThree} />
-        </div>
+    <div className={styles.loading}>
+      <div className={styles.cube} />
+      <div className={styles.road} />
+      <div className={styles.rocks}>
+        <span className={styles.rockOne} />
+        <span className={styles.rockTwo} />
+        <span className={styles.rockThree} />
+        <span className={styles.rockFour} />
+        <span className={styles.rockFive} />
       </div>
-      <p className={styles.text}>
-        <Message {...messages.nothingHere} />
-      </p>
-      <p className={styles.subText}>
-        <Message
-          {...messages.returnToTheHomePage}
-          values={{
-            link: (
-              <Link to="/">
-                <Message {...messages.homePage} />
-              </Link>
-            ),
-          }}
-        />
-      </p>
-
-      <div className={profileStyles.footer}>
-        <FooterMenu />
+      <div className={styles.clouds}>
+        <span className={styles.cloudOne} />
+        <span className={styles.cloudTwo} />
+        <span className={styles.cloudThree} />
       </div>
     </div>
-  );
-}
+    <p className={styles.text}>
+      <Message {...messages.nothingHere} />
+    </p>
+    <p className={styles.subText}>
+      <Message
+        {...messages.returnToTheHomePage}
+        values={{
+          link: (
+            <Link to="/">
+              <Message {...messages.homePage} />
+            </Link>
+          ),
+        }}
+      />
+    </p>
+
+    <div className={profileStyles.footer}>
+      <FooterMenu />
+    </div>
+  </div>
+);
+
+export default PageNotFound;

packages/app/pages/auth/AuthPage.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import React, { ComponentType, ReactNode, useCallback, useState } from 'react';
+import { Route, Switch, Redirect, RouteComponentProps } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
 import AppInfo from 'app/components/auth/appInfo/AppInfo';
 import PanelTransition from 'app/components/auth/PanelTransition';
 import Register from 'app/components/auth/register/Register';
@@ -14,10 +16,9 @@ import ForgotPassword from 'app/components/auth/forgotPassword/ForgotPassword';
 import RecoverPassword from 'app/components/auth/recoverPassword/RecoverPassword';
 import Mfa from 'app/components/auth/mfa/Mfa';
 import Finish from 'app/components/auth/finish/Finish';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+
 import { RootState } from 'app/reducers';
-import { Client } from 'app/components/auth/reducer';
+import { Factory } from 'app/components/auth/factory';
 
 import styles from './auth.scss';
 
@@ -27,88 +28,72 @@ import styles from './auth.scss';
 // so that it persist disregarding remounts
 let isSidebarHiddenCache = false;
 
-interface Props {
-  client: Client | null;
-}
+const AuthPage: ComponentType = () => {
+  const [isSidebarHidden, setIsSidebarHidden] = useState<boolean>(
+    isSidebarHiddenCache,
+  );
+  const client = useSelector((state: RootState) => state.auth.client);
 
-class AuthPage extends React.Component<
-  Props,
-  {
-    isSidebarHidden: boolean;
-  }
-> {
-  state = {
-    isSidebarHidden: isSidebarHiddenCache,
-  };
-
-  render() {
-    const { isSidebarHidden } = this.state;
-    const { client } = this.props;
-
-    return (
-      <div>
-        <div
-          className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}
-        >
-          <AppInfo {...client} onGoToAuth={this.onGoToAuth} />
-        </div>
-
-        <div className={styles.content} data-e2e-content>
-          <Switch>
-            <Route path="/login" render={renderPanelTransition(Login)} />
-            <Route path="/mfa" render={renderPanelTransition(Mfa)} />
-            <Route path="/password" render={renderPanelTransition(Password)} />
-            <Route path="/register" render={renderPanelTransition(Register)} />
-            <Route
-              path="/activation/:key?"
-              render={renderPanelTransition(Activation)}
-            />
-            <Route
-              path="/resend-activation"
-              render={renderPanelTransition(ResendActivation)}
-            />
-            <Route
-              path="/oauth/permissions"
-              render={renderPanelTransition(Permissions)}
-            />
-            <Route
-              path="/choose-account"
-              render={renderPanelTransition(ChooseAccount)}
-            />
-            <Route
-              path="/oauth/choose-account"
-              render={renderPanelTransition(ChooseAccount)}
-            />
-            <Route path="/oauth/finish" component={Finish} />
-            <Route
-              path="/accept-rules"
-              render={renderPanelTransition(AcceptRules)}
-            />
-            <Route
-              path="/forgot-password"
-              render={renderPanelTransition(ForgotPassword)}
-            />
-            <Route
-              path="/recover-password/:key?"
-              render={renderPanelTransition(RecoverPassword)}
-            />
-            <Redirect to="/404" />
-          </Switch>
-        </div>
-      </div>
-    );
-  }
-
-  onGoToAuth = () => {
+  const goToAuth = useCallback(() => {
     isSidebarHiddenCache = true;
+    setIsSidebarHidden(true);
+  }, []);
 
-    this.setState({
-      isSidebarHidden: true,
-    });
-  };
-}
+  return (
+    <div>
+      <div className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}>
+        <AppInfo {...client} onGoToAuth={goToAuth} />
+      </div>
 
-function renderPanelTransition(factory) {
+      <div className={styles.content} data-e2e-content>
+        <Switch>
+          <Route path="/login" render={renderPanelTransition(Login)} />
+          <Route path="/mfa" render={renderPanelTransition(Mfa)} />
+          <Route path="/password" render={renderPanelTransition(Password)} />
+          <Route path="/register" render={renderPanelTransition(Register)} />
+          <Route
+            path="/activation/:key?"
+            render={renderPanelTransition(Activation)}
+          />
+          <Route
+            path="/resend-activation"
+            render={renderPanelTransition(ResendActivation)}
+          />
+          <Route
+            path="/oauth/permissions"
+            render={renderPanelTransition(Permissions)}
+          />
+          <Route
+            path="/choose-account"
+            render={renderPanelTransition(ChooseAccount)}
+          />
+          <Route
+            path="/oauth/choose-account"
+            render={renderPanelTransition(ChooseAccount)}
+          />
+          <Route path="/oauth/finish" component={Finish} />
+          <Route
+            path="/accept-rules"
+            render={renderPanelTransition(AcceptRules)}
+          />
+          <Route
+            path="/forgot-password"
+            render={renderPanelTransition(ForgotPassword)}
+          />
+          <Route
+            path="/recover-password/:key?"
+            render={renderPanelTransition(RecoverPassword)}
+          />
+          <Redirect to="/404" />
+        </Switch>
+      </div>
+    </div>
+  );
+};
+
+function renderPanelTransition(
+  factory: Factory,
+): (props: RouteComponentProps<any>) => ReactNode {
   const { Title, Body, Footer, Links } = factory();
 
   return props => (
@@ -122,8 +107,4 @@ function renderPanelTransition(factory) {
   );
 }
 
-export default withRouter(
-  connect((state: RootState) => ({
-    client: state.auth.client,
-  }))(AuthPage),
-);
+export default AuthPage;

packages/app/pages/auth/SuccessOauthPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import { Query } from 'app/services/request';
 
 import rootMessages from '../root/RootPage.intl.json';

packages/app/pages/dev/DevPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { FooterMenu } from 'app/components/footerMenu';
 import PrivateRoute from 'app/containers/PrivateRoute';
@@ -8,32 +8,32 @@ import ApplicationsListPage from './ApplicationsListPage';
 import CreateNewApplicationPage from './CreateNewApplicationPage';
 import UpdateApplicationPage from './UpdateApplicationPage';
 
-export default function DevPage() {
-  return (
-    <div className={styles.container}>
-      <div data-e2e-content>
-        <Switch>
-          <Route
-            path="/dev/applications"
-            exact
-            component={ApplicationsListPage}
-          />
-          <PrivateRoute
-            path="/dev/applications/new"
-            exact
-            component={CreateNewApplicationPage}
-          />
-          <PrivateRoute
-            path="/dev/applications/:clientId"
-            component={UpdateApplicationPage}
-          />
-          <Redirect to="/dev/applications" />
-        </Switch>
-      </div>
-
-      <div className={styles.footer}>
-        <FooterMenu />
-      </div>
+const DevPage: ComponentType = () => (
+  <div className={styles.container}>
+    <div data-e2e-content>
+      <Switch>
+        <Route
+          path="/dev/applications"
+          exact
+          component={ApplicationsListPage}
+        />
+        <PrivateRoute
+          path="/dev/applications/new"
+          exact
+          component={CreateNewApplicationPage}
+        />
+        <PrivateRoute
+          path="/dev/applications/:clientId"
+          component={UpdateApplicationPage}
+        />
+        <Redirect to="/dev/applications" />
+      </Switch>
     </div>
-  );
-}
+
+    <div className={styles.footer}>
+      <FooterMenu />
+    </div>
+  </div>
+);
+
+export default DevPage;

packages/app/pages/dev/UpdateApplicationPage.tsx

@@ -5,7 +5,7 @@ import { RouteComponentProps } from 'react-router';
 import { FormModel } from 'app/components/ui/form';
 import { browserHistory } from 'app/services/history';
 import oauth from 'app/services/api/oauth';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import PageNotFound from 'app/pages/404/PageNotFound';
 import {
   getApp,

packages/app/pages/profile/ChangeEmailPage.tsx

@@ -83,7 +83,9 @@ class ChangeEmailPage extends React.Component<Props> {
   };
 }
 
-function handleErrors(repeatUrl: string | void) {
+function handleErrors(
+  repeatUrl?: string,
+): <T extends { errors: Record<string, any> }>(resp: T) => Promise<T> {
   return resp => {
     if (resp.errors) {
       if (resp.errors.key) {

packages/app/pages/profile/ChangeUsernamePage.tsx

@@ -70,6 +70,6 @@ export default connect(
     username: state.user.username,
   }),
   {
-    updateUsername: username => updateUser({ username }),
+    updateUsername: (username: string) => updateUser({ username }),
   },
 )(ChangeUsernamePage);

packages/app/pages/profile/MultiFactorAuthPage.tsx

@@ -60,7 +60,7 @@ class MultiFactorAuthPage extends React.Component<Props> {
     return step;
   }
 
-  onChangeStep = (step: MfaStep) => {
+  onChangeStep = (step: number) => {
     this.props.history.push(`/profile/mfa/step${step + 1}`);
   };
 

packages/app/pages/profile/ProfilePage.tsx

@@ -8,7 +8,7 @@ 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 { RootState } from 'app/reducers';
+import { Dispatch, RootState } from 'app/reducers';
 import { Provider } from 'app/components/profile/Context';
 import { ComponentLoader } from 'app/components/ui/loader';
 
@@ -110,7 +110,7 @@ class ProfilePage extends React.Component<Props> {
 
 export default connect(
   (state: RootState) => ({
-    userId: state.user.id,
+    userId: state.user.id!,
   }),
   {
     refreshUserData,
@@ -120,7 +120,7 @@ export default connect(
     }: {
       form: FormModel;
       sendData: () => Promise<any>;
-    }) => dispatch => {
+    }) => (dispatch: Dispatch) => {
       form.beginLoading();
 
       return sendData()
@@ -165,7 +165,7 @@ export default connect(
         })
         .finally(() => form.endLoading());
 
-      function requestPassword(form) {
+      function requestPassword(form: FormModel) {
         return new Promise((resolve, reject) => {
           dispatch(
             createPopup({

packages/app/pages/root/RootPage.tsx

@@ -11,7 +11,7 @@ import PrivateRoute from 'app/containers/PrivateRoute';
 import AuthFlowRoute from 'app/containers/AuthFlowRoute';
 import Userbar from 'app/components/userbar/Userbar';
 import PopupStack from 'app/components/ui/popup/PopupStack';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import { getActiveAccount } from 'app/components/accounts/reducer';
 import { User } from 'app/components/user';
 import { Account } from 'app/components/accounts/reducer';

packages/app/pages/rules/RulesPage.test.tsx

@@ -1,17 +1,23 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import sinon from 'sinon';
 import expect from 'app/test/unexpected';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import RulesPage from './RulesPage';
 
+type RulesPageShallowType = ShallowWrapper<
+  ComponentProps<typeof RulesPage>,
+  any,
+  RulesPage
+>;
+
 describe('RulesPage', () => {
   describe('#onRuleClick()', () => {
     const id = 'rule-1-2';
     const pathname = '/foo';
     const search = '?bar';
-    let page;
-    let replace;
+    let page: RulesPageShallowType;
+    let replace: Function;
 
     beforeEach(() => {
       replace = sinon.stub().named('history.replace');