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

packages/app/components/languageSwitcher/LanguageList.tsx

@@ -1,5 +1,13 @@
-import React from 'react';
-import { TransitionMotion, spring, presets } from 'react-motion';
+import React, { MouseEventHandler } from 'react';
+import {
+  TransitionMotion,
+  spring,
+  presets,
+  TransitionStyle,
+  TransitionPlainStyle,
+  PlainStyle,
+  Style,
+} from 'react-motion';
 import { FormattedMessage as Message } from 'react-intl';
 import clsx from 'clsx';
 
@@ -13,6 +21,34 @@ import mayTheForceBeWithYou from './images/may_the_force_be_with_you.svg';
 import biteMyShinyMetalAss from './images/bite_my_shiny_metal_ass.svg';
 import iTookAnArrowInMyKnee from './images/i_took_an_arrow_in_my_knee.svg';
 
+interface EmptyCaption {
+  src: string;
+  caption: string;
+}
+
+const emptyCaptions: ReadonlyArray<EmptyCaption> = [
+  {
+    // Homestuck
+    src: thatFuckingPumpkin,
+    caption: 'That fucking pumpkin',
+  },
+  {
+    // Star Wars
+    src: mayTheForceBeWithYou,
+    caption: 'May The Force Be With You',
+  },
+  {
+    // Futurama
+    src: biteMyShinyMetalAss,
+    caption: 'Bite my shiny metal ass',
+  },
+  {
+    // The Elder Scrolls V: Skyrim
+    src: iTookAnArrowInMyKnee,
+    caption: 'I took an arrow in my knee',
+  },
+];
+
 const itemHeight = 51;
 
 export default class LanguageList extends React.Component<{
@@ -84,70 +120,60 @@ export default class LanguageList extends React.Component<{
     );
   }
 
-  getEmptyCaption() {
-    const emptyCaptions = [
-      {
-        // Homestuck
-        src: thatFuckingPumpkin,
-        caption: 'That fucking pumpkin',
-      },
-      {
-        // Star Wars
-        src: mayTheForceBeWithYou,
-        caption: 'May The Force Be With You',
-      },
-      {
-        // Futurama
-        src: biteMyShinyMetalAss,
-        caption: 'Bite my shiny metal ass',
-      },
-      {
-        // The Elder Scrolls V: Skyrim
-        src: iTookAnArrowInMyKnee,
-        caption: 'I took an arrow in my knee',
-      },
-    ];
-
+  getEmptyCaption(): EmptyCaption {
     return emptyCaptions[Math.floor(Math.random() * emptyCaptions.length)];
   }
 
-  onChangeLang(lang: string) {
-    return (event: React.MouseEvent<HTMLElement>) => {
+  onChangeLang(lang: string): MouseEventHandler {
+    return event => {
       event.preventDefault();
 
       this.props.onChangeLang(lang);
     };
   }
 
-  getItemsWithDefaultStyles = () =>
-    this.getItemsWithStyles({ useSpring: false });
-
-  getItemsWithStyles = (
-    { useSpring }: { useSpring?: boolean } = { useSpring: true },
-  ) =>
-    Object.keys({ ...this.props.langs }).reduce(
+  getItemsWithDefaultStyles = (): Array<TransitionPlainStyle> => {
+    return Object.keys({ ...this.props.langs }).reduce(
       (previous, key) => [
         ...previous,
         {
           key,
           data: this.props.langs[key],
           style: {
-            height: useSpring ? spring(itemHeight, presets.gentle) : itemHeight,
-            opacity: useSpring ? spring(1, presets.gentle) : 1,
+            height: itemHeight,
+            opacity: 1,
           },
         },
       ],
-      [],
+      [] as Array<TransitionPlainStyle>,
     );
+  };
 
-  willEnter() {
+  getItemsWithStyles = (): Array<TransitionStyle> => {
+    return Object.keys({ ...this.props.langs }).reduce(
+      (previous, key) => [
+        ...previous,
+        {
+          key,
+          data: this.props.langs[key],
+          style: {
+            height: spring(itemHeight, presets.gentle),
+            opacity: spring(1, presets.gentle),
+          },
+        },
+      ],
+      [] as Array<TransitionStyle>,
+    );
+  };
+
+  willEnter(): PlainStyle {
     return {
       height: 0,
       opacity: 1,
     };
   }
 
-  willLeave() {
+  willLeave(): Style {
     return {
       height: spring(0),
       opacity: spring(0),

packages/app/components/languageSwitcher/LanguageSwitcher.tsx

@@ -15,15 +15,15 @@ import { RootState } from 'app/reducers';
 
 const translateUrl = 'http://ely.by/translate';
 
-export type LocaleData = {
+export interface LocaleData {
   code: string;
   name: string;
   englishName: string;
   progress: number;
   isReleased: boolean;
-};
+}
 
-export type LocalesMap = { [code: string]: LocaleData };
+export type LocalesMap = Record<string, LocaleData>;
 
 type OwnProps = {
   onClose: () => void;
@@ -142,7 +142,7 @@ class LanguageSwitcher extends React.Component<
       previous[key] = langs[key];
 
       return previous;
-    }, {});
+    }, {} as typeof langs);
 
     this.setState({
       filter,

packages/app/components/languageSwitcher/LocaleItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType, ReactNode } from 'react';
 import { localeFlags } from 'app/components/i18n';
 import { FormattedMessage as Message } from 'react-intl';
 
@@ -6,10 +6,14 @@ import messages from './languageSwitcher.intl.json';
 import styles from './languageSwitcher.scss';
 import { LocaleData } from './LanguageSwitcher';
 
-export default function LocaleItem({ locale }: { locale: LocaleData }) {
-  const { code, name, englishName, progress, isReleased } = locale;
+interface Props {
+  locale: LocaleData;
+}
 
-  let progressLabel;
+const LocaleItem: ComponentType<Props> = ({
+  locale: { code, name, englishName, progress, isReleased },
+}) => {
+  let progressLabel: ReactNode;
 
   if (progress !== 100) {
     progressLabel = (
@@ -41,4 +45,6 @@ export default function LocaleItem({ locale }: { locale: LocaleData }) {
       <span className={styles.languageCircle} />
     </div>
   );
-}
+};
+
+export default LocaleItem;

packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx

@@ -1,25 +1,23 @@
-import React from 'react';
+import React, { ComponentType, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
 import { localeFlags } from 'app/components/i18n';
 import LANGS from 'app/i18n';
-import { connect } from 'react-redux';
 import { create as createPopup } from 'app/components/ui/popup/actions';
 import LanguageSwitcher from 'app/components/languageSwitcher';
 import { RootState } from 'app/reducers';
 
 import styles from './link.scss';
 
-type Props = {
-  userLang: string;
-  interfaceLocale: string;
-  showLanguageSwitcherPopup: (event: React.MouseEvent<HTMLSpanElement>) => void;
-};
+const LanguageLink: ComponentType = () => {
+  const dispatch = useDispatch();
+  const showLanguageSwitcherPopup = useCallback(() => {
+    dispatch(createPopup({ Popup: LanguageSwitcher }));
+  }, [dispatch]);
+
+  const userLang = useSelector((state: RootState) => state.user.lang);
+  const interfaceLocale = useSelector((state: RootState) => state.i18n.locale);
 
-function LanguageLink({
-  userLang,
-  interfaceLocale,
-  showLanguageSwitcherPopup,
-}: Props) {
   const localeDefinition = LANGS[userLang] || LANGS[interfaceLocale];
 
   return (
@@ -40,14 +38,6 @@ function LanguageLink({
       {localeDefinition.name}
     </span>
   );
-}
+};
 
-export default connect(
-  (state: RootState) => ({
-    userLang: state.user.lang,
-    interfaceLocale: state.i18n.locale,
-  }),
-  {
-    showLanguageSwitcherPopup: () => createPopup({ Popup: LanguageSwitcher }),
-  },
-)(LanguageLink);
+export default LanguageLink;