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

packages/app/components/profile/changeEmail/ChangeEmail.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
 import { SlideMotion } from 'app/components/ui/motion';
@@ -21,27 +21,31 @@ import messages from './ChangeEmail.intl.json';
 const STEPS_TOTAL = 3;
 
 export type ChangeEmailStep = 0 | 1 | 2;
-type HeightProp = 'step0Height' | 'step1Height' | 'step2Height';
-type HeightDict = {
-  [K in HeightProp]?: number;
-};
 
 interface Props {
   onChangeStep: (step: ChangeEmailStep) => void;
   lang: string;
   email: string;
-  stepForms: FormModel[];
+  stepForms: Array<FormModel>;
   onSubmit: (step: ChangeEmailStep, form: FormModel) => Promise<void>;
   step: ChangeEmailStep;
   code?: string;
 }
 
-interface State extends HeightDict {
+interface State {
   newEmail: string | null;
   activeStep: ChangeEmailStep;
   code: string;
 }
 
+interface FormStepParams {
+  form: FormModel;
+  isActiveStep: boolean;
+  isCodeSpecified: boolean;
+  email: string;
+  code?: string;
+}
+
 export default class ChangeEmail extends React.Component<Props, State> {
   static get defaultProps(): Partial<Props> {
     return {
@@ -145,21 +149,28 @@ export default class ChangeEmail extends React.Component<Props, State> {
     return (
       <SlideMotion activeStep={activeStep}>
         {new Array(STEPS_TOTAL).fill(0).map((_, step) => {
-          const form = this.props.stepForms[step];
-
-          return this[`renderStep${step}`]({
+          const formParams: FormStepParams = {
+            form: this.props.stepForms[step],
+            isActiveStep: step === activeStep,
+            isCodeSpecified,
             email,
             code,
-            isCodeSpecified,
-            form,
-            isActiveStep: step === activeStep,
-          });
+          };
+
+          switch (step) {
+            case 0:
+              return this.renderStep0(formParams);
+            case 1:
+              return this.renderStep1(formParams);
+            case 2:
+              return this.renderStep2(formParams);
+          }
         })}
       </SlideMotion>
     );
   }
 
-  renderStep0({ email, form }) {
+  renderStep0({ email, form }: FormStepParams): ReactNode {
     return (
       <div key="step0" data-testid="step1" className={styles.formBody}>
         <div className={styles.formRow}>
@@ -183,7 +194,13 @@ export default class ChangeEmail extends React.Component<Props, State> {
     );
   }
 
-  renderStep1({ email, form, code, isCodeSpecified, isActiveStep }) {
+  renderStep1({
+    email,
+    form,
+    code,
+    isCodeSpecified,
+    isActiveStep,
+  }: FormStepParams): ReactNode {
     return (
       <div key="step1" data-testid="step2" className={styles.formBody}>
         <div className={styles.formRow}>
@@ -230,7 +247,12 @@ export default class ChangeEmail extends React.Component<Props, State> {
     );
   }
 
-  renderStep2({ form, code, isCodeSpecified, isActiveStep }) {
+  renderStep2({
+    form,
+    code,
+    isCodeSpecified,
+    isActiveStep,
+  }: FormStepParams): ReactNode {
     const { newEmail } = this.state;
 
     return (
@@ -268,14 +290,6 @@ export default class ChangeEmail extends React.Component<Props, State> {
     );
   }
 
-  onStepMeasure(step: ChangeEmailStep) {
-    return (height: number) =>
-      // @ts-ignore
-      this.setState({
-        [`step${step}Height`]: height,
-      });
-  }
-
   nextStep() {
     const { activeStep } = this.state;
     const nextStep = activeStep + 1;

packages/app/components/profile/changePassword/ChangePassword.test.tsx

@@ -15,6 +15,7 @@ describe('<ChangePassword />', () => {
 
   it('should call onSubmit if passwords entered', () => {
     const onSubmit = sinon.spy(() => ({ catch: () => {} })).named('onSubmit');
+    // @ts-ignore
     const component = shallow(<ChangePassword onSubmit={onSubmit} />);
 
     component.find('Form').simulate('submit');

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

@@ -55,7 +55,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
-    if (typeof props.step === 'number' && props.step !== state.activeStep) {
+    if (props.step !== state.activeStep) {
       return {
         activeStep: props.step,
       };
@@ -122,7 +122,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
         <Confirmation
           key="step3"
           form={this.props.confirmationForm}
-          formRef={(el: Form) => (this.confirmationFormEl = el)}
+          formRef={el => (this.confirmationFormEl = el)}
           onSubmit={this.onTotpSubmit}
           onInvalid={() => this.forceUpdate()}
         />

packages/app/components/profile/multiFactorAuth/confirmation/Confirmation.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
-import { Input, Form, FormModel } from 'app/components/ui/form';
 
+import { Input, Form, FormModel } from 'app/components/ui/form';
 import profileForm from 'app/components/profile/profileForm.scss';
+
 import messages from '../MultiFactorAuth.intl.json';
 
 export default function Confirmation({
@@ -13,7 +14,7 @@ export default function Confirmation({
 }: {
   form: FormModel;
   formRef?: (el: Form | null) => void;
-  onSubmit: (form: FormModel) => Promise<void>;
+  onSubmit: (form: FormModel) => Promise<void> | void;
   onInvalid: () => void;
 }) {
   return (

packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx

@@ -1,54 +1,52 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import clsx from 'clsx';
+
 import { Form, Button, Input, FormModel } from 'app/components/ui/form';
 import popupStyles from 'app/components/ui/popup/popup.scss';
 
 import styles from './passwordRequestForm.scss';
 import messages from './PasswordRequestForm.intl.json';
 
-function PasswordRequestForm({
-  form,
-  onSubmit,
-}: {
+interface Props {
   form: FormModel;
   onSubmit: (form: FormModel) => void;
-}) {
-  return (
-    <div
-      className={styles.requestPasswordForm}
-      data-testid="password-request-form"
-    >
-      <div className={popupStyles.popup}>
-        <Form onSubmit={() => onSubmit(form)} form={form}>
-          <div className={popupStyles.header}>
-            <h2 className={popupStyles.headerTitle}>
-              <Message {...messages.title} />
-            </h2>
-          </div>
-
-          <div className={clsx(popupStyles.body, styles.body)}>
-            <span className={styles.lockIcon} />
-
-            <div className={styles.description}>
-              <Message {...messages.description} />
-            </div>
-
-            <Input
-              {...form.bindField('password')}
-              type="password"
-              required
-              autoFocus
-              color="green"
-              skin="light"
-              center
-            />
-          </div>
-          <Button color="green" label={messages.continue} block type="submit" />
-        </Form>
-      </div>
-    </div>
-  );
 }
 
+const PasswordRequestForm: ComponentType<Props> = ({ form, onSubmit }) => (
+  <div
+    className={styles.requestPasswordForm}
+    data-testid="password-request-form"
+  >
+    <div className={popupStyles.popup}>
+      <Form onSubmit={onSubmit} form={form}>
+        <div className={popupStyles.header}>
+          <h2 className={popupStyles.headerTitle}>
+            <Message {...messages.title} />
+          </h2>
+        </div>
+
+        <div className={clsx(popupStyles.body, styles.body)}>
+          <span className={styles.lockIcon} />
+
+          <div className={styles.description}>
+            <Message {...messages.description} />
+          </div>
+
+          <Input
+            {...form.bindField('password')}
+            type="password"
+            required
+            autoFocus
+            color="green"
+            skin="light"
+            center
+          />
+        </div>
+        <Button color="green" label={messages.continue} block type="submit" />
+      </Form>
+    </div>
+  </div>
+);
+
 export default PasswordRequestForm;