Upgrade to typescript 4.1. (#134)

.eslintignore

@@ -1,2 +1,3 @@
 dist/
 !.eslintrc.*
+*.d.ts

.eslintrc.js

@@ -1,11 +1,11 @@
 module.exports = {
   extends: [
-    'airbnb',
+    'airbnb-typescript',
     'plugin:jest-dom/recommended',
     'plugin:testing-library/recommended',
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    // "plugin:@typescript-eslint/recommended",
+    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
     'plugin:prettier/recommended',
     'prettier',
     'prettier/@typescript-eslint',
@@ -70,6 +70,7 @@ module.exports = {
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'import/no-named-as-default': 'off',
     'import/prefer-default-export': 'off',
+    'import/no-cycle': 'off',
 
     // core
     'no-constant-condition': 'off',

package.json

@@ -63,8 +63,8 @@
     "@types/semver-compare": "^1.0.1",
     "@types/uuid": "^3.4.6",
     "@types/yaml": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^2.9.0",
-    "@typescript-eslint/parser": "^2.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/parser": "^4.11.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.0",
@@ -76,18 +76,18 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-import-resolver-webpack": "^0.12.1",
     "eslint-plugin-emotion": "^10.0.14",
-    "eslint-plugin-import": "~2.20.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^23.6.0",
     "eslint-plugin-jest-dom": "^2.0.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-jsx-a11y": "^6.3.0",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^2.2.0",
     "faker": "^4.1.0",
     "fetch-mock": "^9.0.0-beta.2",
@@ -99,13 +99,13 @@
     "jest-emotion": "^10.0.27",
     "jest-extended": "^0.11.5",
     "mini-css-extract-plugin": "^0.9.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.2.1",
     "raf": "^3.4.1",
     "react-test-renderer": "^16.12.0",
     "style-loader": "^1.1.3",
     "ts-jest": "^25.1.0",
     "ts-loader": "^6.0.4",
-    "typescript": "~3.7.2",
+    "typescript": "^4.1.2",
     "url-loader": "^3.0.0",
     "webpack": "^4.36.1",
     "webpack-bundle-analyzer": "^3.3.2",

prettier.config.js

@@ -3,4 +3,5 @@ module.exports = {
   singleQuote: true,
   printWidth: 100,
   parser: 'typescript',
+  arrowParens: 'avoid',
 };

src/common/inputs/formik/Autocomplete.tsx

@@ -12,7 +12,7 @@ type Props<Multiple extends boolean, T = any> = Omit<AutocompleteProps<T>, 'rend
   (Multiple extends true ? UseAutocompleteMultipleProps<T> : UseAutocompleteSingleProps<T>) & {
     name: string;
     InputProps: TextFieldProps;
-    renderInput?: AutocompleteProps<T>['renderInput'];
+    renderInput?: AutocompleteProps<T>['renderInput']; // eslint-disable-line react/require-default-props
   };
 
 const Autocomplete = ({ name, InputProps, multiple, ...props }: Props<typeof multiple>) => {

src/core/entry/cards/Movie.spec.tsx

@@ -10,10 +10,7 @@ import Card from './index';
 
 describe('core/entry/cards/Movie', () => {
   beforeEach(() => {
-    fetchMock
-      .get('glob:/api/tmdb/movies?*', 404)
-      .get('glob:/api/trakt/movies?*', 404)
-      .catch();
+    fetchMock.get('glob:/api/tmdb/movies?*', 404).get('glob:/api/trakt/movies?*', 404).catch();
   });
 
   afterEach(() => {

src/core/entry/fields/episodes.ts

@@ -57,7 +57,7 @@ export const episodesFieldList = [
   },
 ] as const;
 
-interface EpisodeGetters {
+export interface EpisodeGetters {
   [EpisodeFieldNames.Name]: string;
   [EpisodeFieldNames.Image]: string;
   [EpisodeFieldNames.Description]: string;

src/core/entry/fields/movies.ts

@@ -86,7 +86,7 @@ export const movieFieldList = [
   },
 ] as const;
 
-interface MovieGetters {
+export interface MovieGetters {
   [MovieFieldNames.Genres]: string[];
   [MovieFieldNames.Posters]: string | string[];
   [MovieFieldNames.Backdrops]: string | string[];

src/core/entry/fields/series.ts

@@ -91,7 +91,7 @@ export const seriesFieldList = [
   },
 ] as const;
 
-interface SeriesGetters {
+export interface SeriesGetters {
   [SeriesFieldNames.Genres]: string[];
   [SeriesFieldNames.Posters]: string | string[];
   [SeriesFieldNames.Backdrops]: string | string[];

src/core/entry/types.ts

@@ -25,21 +25,3 @@ export type Fields<
 > = {
   readonly [P in Extract<ArrayPairs<U, T>[1], string>]?: W[Extract<ArrayPairs<U, T>, [any, P]>[0]];
 };
-
-export type FieldNames<T> = T extends Fields<
-  infer U,
-  ReadonlyArray<FieldMapping<infer U>>,
-  Partial<Record<infer U, infer _>>
->
-  ? U
-  : never;
-
-export type MappingType<T> = T extends Fields<any, infer U, any> ? U : never;
-
-export type GettersType<T> = T extends Fields<
-  infer _,
-  ReadonlyArray<FieldMapping<infer _>>,
-  infer R
->
-  ? R
-  : never;

src/core/entry/utils.ts

@@ -1,11 +1,24 @@
-import { RawEntry, FieldNames, MappingType, GettersType, BaseEntry } from './types';
-import { MovieEntry, movieFieldList, RawMovieEntry, MovieFieldNames } from './fields/movies';
-import { SeriesEntry, seriesFieldList, SeriesFieldNames, RawSeriesEntry } from './fields/series';
+import { RawEntry, BaseEntry } from './types';
+import {
+  MovieEntry,
+  movieFieldList,
+  RawMovieEntry,
+  MovieFieldNames,
+  MovieGetters,
+} from './fields/movies';
+import {
+  SeriesEntry,
+  seriesFieldList,
+  SeriesFieldNames,
+  RawSeriesEntry,
+  SeriesGetters,
+} from './fields/series';
 import {
   EpisodeEntry,
   RawEpisodeEntry,
   episodesFieldList,
   EpisodeFieldNames,
+  EpisodeGetters,
 } from './fields/episodes';
 
 export const isMovie = (entry: RawEntry): entry is RawMovieEntry => !!entry.movieName;
@@ -14,8 +27,8 @@ export const isSeries = (entry: RawEntry): entry is RawSeriesEntry =>
 export const isEpisode = (entry: RawEntry): entry is RawEpisodeEntry & SeriesEntry =>
   !!(entry.seriesSeason && entry.seriesEpisode && entry.seriesName);
 
-const getPropFn = <U>(mapping: MappingType<U>) => {
-  const mapByField = mapping.reduce<Partial<Record<FieldNames<U>, string[]>>>(
+const getPropFn = <T, U>(mapping: ReadonlyArray<Partial<Record<keyof T, string>>>) => {
+  const mapByField = mapping.reduce<Partial<Record<keyof T, string[]>>>(
     (res, item) =>
       Object.entries(item).reduce(
         (out, [k, v]) => ({
@@ -26,27 +39,36 @@ const getPropFn = <U>(mapping: MappingType<U>) => {
       ),
     {},
   );
-  return (entry: U, field: FieldNames<U>) =>
+  return (entry: U, field: keyof T) =>
     (mapByField[field] ?? ([] as string[])).reduce((res, val) => res ?? entry[val], undefined);
 };
 
-const makeGetters = <T>(names: Record<string, FieldNames<T>>, mapping: MappingType<T>) => {
-  const getProp = getPropFn<T>(mapping);
-  return (entry: T) =>
+const makeGetters = <T, U>(
+  names: Record<string, keyof T>,
+  mapping: ReadonlyArray<Partial<Record<keyof T, string>>>,
+) => {
+  const getProp = getPropFn<T, U>(mapping);
+  return (entry: U) =>
     Object.values(names).reduce(
-      (obj, key: FieldNames<T>) => ({
+      (obj, key) => ({
         ...obj,
         get [key]() {
           return getProp(entry, key);
         },
       }),
-      {} as GettersType<T>,
+      {} as T,
     );
 };
 
-const getMovieProps = makeGetters<RawMovieEntry>(MovieFieldNames, movieFieldList);
-const getSeriesProps = makeGetters<RawSeriesEntry>(SeriesFieldNames, seriesFieldList);
-const getEpisodeProps = makeGetters<RawEpisodeEntry>(EpisodeFieldNames, episodesFieldList);
+const getMovieProps = makeGetters<MovieGetters, RawMovieEntry>(MovieFieldNames, movieFieldList);
+const getSeriesProps = makeGetters<SeriesGetters, RawSeriesEntry>(
+  SeriesFieldNames,
+  seriesFieldList,
+);
+const getEpisodeProps = makeGetters<EpisodeGetters, RawEpisodeEntry>(
+  EpisodeFieldNames,
+  episodesFieldList,
+);
 
 export const toMovieEntry = (entry: RawMovieEntry): MovieEntry => {
   return {

src/core/layout/AppBar/InfoCard.tsx

@@ -56,9 +56,9 @@ const InfoCard: FC<Props> = ({ open, onClose }) => (
       </Typography>
       <pre>
         {YAML.stringify({
-          // eslint-disable-next-line @typescript-eslint/camelcase
+          // eslint-disable-next-line @typescript-eslint/naming-convention
           web_server: {
-            // eslint-disable-next-line @typescript-eslint/camelcase
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             run_v1: true,
           },
         })}

src/core/operations/Card.spec.tsx

@@ -6,10 +6,7 @@ import Card from './Card';
 
 describe('core/operations/Card', () => {
   beforeEach(() => {
-    fetchMock
-      .post('/api/server/manage', 200)
-      .get('/api/database/plugins', [])
-      .catch();
+    fetchMock.post('/api/server/manage', 200).get('/api/database/plugins', []).catch();
   });
 
   afterEach(() => {

src/core/operations/Operations.spec.tsx

@@ -107,7 +107,7 @@ describe('core/layout/SideNav/Operations', () => {
 
       expect(
         fetchMock.called('/api/database', {
-          body: { operation: DatabaseOperation.PluginReset, plugin_name: 'another_plugin' }, // eslint-disable-line @typescript-eslint/camelcase
+          body: { operation: DatabaseOperation.PluginReset, plugin_name: 'another_plugin' }, // eslint-disable-line @typescript-eslint/naming-convention
         }),
       ).toBeTrue();
       buttonsDisabled(getByText);

src/core/operations/index.ts

@@ -4,11 +4,12 @@ import { registerPlugin } from 'core/plugins/registry';
 
 export default () =>
   registerPlugin('settings', {
-    cardComponent: lazy(() =>
-      import(
-        /* webpackChunkName: 'LogPlugin' */
-        './Card'
-      ),
+    cardComponent: lazy(
+      () =>
+        import(
+          /* webpackChunkName: 'LogPlugin' */
+          './Card'
+        ),
     ),
     displayName: 'Server Settings',
     icon: Settings,

src/plugins/config/Config.tsx

@@ -8,15 +8,11 @@ import { useGlobalStatus } from 'core/status/hooks';
 import { NoPaddingWrapper } from 'common/styles';
 import { css } from '@emotion/core';
 import { useGetConfig, useGetVariables, useGetSchema } from './hooks';
-import { Mode } from './types';
+import { Mode, FormState } from './types';
 import Editor from './Editor';
 import SubmitButton from './SubmitButton';
 import ResetForm from './ResetForm';
 
-export interface FormState {
-  yaml: string;
-}
-
 const toolbar = (theme: Theme) => css`
   display: flex;
   align-items: center;

src/plugins/config/Editor.tsx

@@ -6,12 +6,12 @@ import { languages, editor } from 'monaco-editor/esm/vs/editor/editor.api';
 
 import './monaco';
 
-/* eslint-disable import/no-webpack-loader-syntax */
+/* eslint-disable import/no-webpack-loader-syntax,import/no-extraneous-dependencies */
 // NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
 // import shouldn't go through loader syntax.
 import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker';
 import YamlWorker from 'worker-loader!monaco-yaml/esm/yaml.worker';
-/* eslint-enable import/no-webpack-loader-syntax */
+/* eslint-enable import/no-webpack-loader-syntax,import/no-extraneous-dependencies */
 import { YamlLanguage, Schema } from './types';
 
 window.MonacoEnvironment = {

src/plugins/config/ResetForm.tsx

@@ -1,6 +1,6 @@
 import { useEffect, FC } from 'react';
 import { useFormikContext } from 'formik';
-import { FormState } from './Config';
+import { FormState } from './types';
 
 interface ResetProps {
   initialValues: FormState;

src/plugins/config/SubmitButton.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, FC } from 'react';
 import { useFormikContext } from 'formik';
 import { Button, ButtonProps } from '@material-ui/core';
-import { FormState } from './Config';
+import { FormState } from './types';
 
 interface SubmitProps extends ButtonProps {
   loading: boolean;

src/plugins/config/types.ts

@@ -25,3 +25,7 @@ interface LanguageServiceDefaults {
 export interface YamlLanguage {
   yamlDefaults: LanguageServiceDefaults;
 }
+
+export interface FormState {
+  yaml: string;
+}

src/plugins/history/History.spec.tsx

@@ -17,10 +17,7 @@ const TestHistory: FC = () => {
 
 describe('plugins/history', () => {
   beforeEach(() => {
-    fetchMock
-      .get('/api/tasks', [])
-      .get('glob:/api/history?*', [])
-      .catch();
+    fetchMock.get('/api/tasks', []).get('glob:/api/history?*', []).catch();
   });
 
   afterEach(() => {

src/plugins/history/index.ts

@@ -4,11 +4,12 @@ import { registerPlugin } from 'core/plugins/registry';
 
 export default () =>
   registerPlugin('/history', {
-    component: lazy(() =>
-      import(
-        /* webpackChunkName: 'HistoryPlugin' */
-        'plugins/history/History'
-      ),
+    component: lazy(
+      () =>
+        import(
+          /* webpackChunkName: 'HistoryPlugin' */
+          'plugins/history/History'
+        ),
     ),
     displayName: 'History',
     icon: HistoryIcon,

src/plugins/lists/entry/index.ts

@@ -4,11 +4,12 @@ import { registerPlugin } from 'core/plugins/registry';
 
 export default () =>
   registerPlugin('/entryList', {
-    component: lazy(() =>
-      import(
-        /* webpackChunkName: 'EntryListPlugin' */
-        'plugins/lists/entry/EntryList'
-      ),
+    component: lazy(
+      () =>
+        import(
+          /* webpackChunkName: 'EntryListPlugin' */
+          'plugins/lists/entry/EntryList'
+        ),
     ),
     displayName: 'Entry List',
     icon: ViewList,