Convert store selectors to Typescript

(cherry picked from commit a57b35a1966266b49d1241474fe3b69523f70474)

frontend/src/App/State/AppState.ts

@@ -1,9 +1,12 @@
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
+import CommandAppState from './CommandAppState';
+import MovieCollectionAppState from './MovieCollectionAppState';
 import MovieFilesAppState from './MovieFilesAppState';
 import MoviesAppState, { MovieIndexAppState } from './MoviesAppState';
 import ParseAppState from './ParseAppState';
 import QueueAppState from './QueueAppState';
 import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
 import TagsAppState from './TagsAppState';
 
 interface FilterBuilderPropOption {
@@ -39,14 +42,17 @@ export interface CustomFilter {
 }
 
 interface AppState {
-  movieFiles: MovieFilesAppState;
+  commands: CommandAppState;
   interactiveImport: InteractiveImportAppState;
+  movieCollections: MovieCollectionAppState;
+  movieFiles: MovieFilesAppState;
   movieIndex: MovieIndexAppState;
-  parse: ParseAppState;
-  settings: SettingsAppState;
   movies: MoviesAppState;
-  tags: TagsAppState;
+  parse: ParseAppState;
   queue: QueueAppState;
+  settings: SettingsAppState;
+  system: SystemAppState;
+  tags: TagsAppState;
 }
 
 export default AppState;

frontend/src/App/State/CommandAppState.ts

@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Command from 'Commands/Command';
+
+export type CommandAppState = AppSectionState<Command>;
+
+export default CommandAppState;

frontend/src/App/State/MovieCollectionAppState.ts

@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import MovieCollection from 'typings/MovieCollection';
+
+type MovieCollectionAppState = AppSectionState<MovieCollection>;
+
+export default MovieCollectionAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -1,5 +1,6 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemState,
   AppSectionSaveState,
   AppSectionSchemaState,
 } from 'App/State/AppSectionState';
@@ -41,17 +42,17 @@ export interface RootFolderAppState
     AppSectionSaveState {}
 
 export type LanguageSettingsAppState = AppSectionState<Language>;
-export type UiSettingsAppState = AppSectionState<UiSettings>;
+export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
   downloadClients: DownloadClientAppState;
   importLists: ImportListAppState;
   indexers: IndexerAppState;
-  language: LanguageSettingsAppState;
+  languages: LanguageSettingsAppState;
   notifications: NotificationAppState;
   qualityProfiles: QualityProfilesAppState;
   rootFolders: RootFolderAppState;
-  uiSettings: UiSettingsAppState;
+  ui: UiSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

@@ -0,0 +1,10 @@
+import SystemStatus from 'typings/SystemStatus';
+import { AppSectionItemState } from './AppSectionState';
+
+export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+
+interface SystemAppState {
+  status: SystemStatusAppState;
+}
+
+export default SystemAppState;

frontend/src/App/State/TagsAppState.ts

@@ -1,12 +1,32 @@
 import ModelBase from 'App/ModelBase';
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionSaveState,
 } from 'App/State/AppSectionState';
 
 export interface Tag extends ModelBase {
   label: string;
 }
 
-interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {}
+export interface TagDetail extends ModelBase {
+  label: string;
+  autoTagIds: number[];
+  delayProfileIds: number[];
+  downloadClientIds: number[];
+  importListIds: number[];
+  indexerIds: number[];
+  movieIds: number[];
+  notificationIds: number[];
+  restrictionIds: number[];
+}
+
+export interface TagDetailAppState
+  extends AppSectionState<TagDetail>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {
+  details: TagDetailAppState;
+}
 
 export default TagsAppState;

frontend/src/Movie/Index/Overview/MovieIndexOverviewInfo.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { icons } from 'Helpers/Props';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import QualityProfile from 'typings/QualityProfile';
 import { UiSettings } from 'typings/UiSettings';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
@@ -33,7 +34,7 @@ interface MovieIndexOverviewInfoProps {
   showSizeOnDisk: boolean;
   monitored: boolean;
   studio?: string;
-  qualityProfile: object;
+  qualityProfile?: QualityProfile;
   added?: string;
   path: string;
   sizeOnDisk?: number;
@@ -100,13 +101,10 @@ function getInfoRowProps(
     };
   }
 
-  if (name === 'qualityProfileId') {
+  if (name === 'qualityProfileId' && !!props.qualityProfile?.name) {
     return {
       title: 'Quality Profile',
       iconName: icons.PROFILE,
-      // TODO: Type QualityProfile
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore ts(2339)
       label: props.qualityProfile.name,
     };
   }

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -229,7 +229,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         </div>
       ) : null}
 
-      {showQualityProfile ? (
+      {showQualityProfile && !!qualityProfile?.name ? (
         <div className={styles.title} title={translate('QualityProfile')}>
           {qualityProfile.name}
         </div>

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -14,7 +14,7 @@ import styles from './MovieIndexPosterInfo.css';
 interface MovieIndexPosterInfoProps {
   studio?: string;
   showQualityProfile: boolean;
-  qualityProfile: QualityProfile;
+  qualityProfile?: QualityProfile;
   added?: string;
   year: number;
   inCinemas?: string;
@@ -68,7 +68,11 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
-  if (sortKey === 'qualityProfileId' && !showQualityProfile) {
+  if (
+    sortKey === 'qualityProfileId' &&
+    !showQualityProfile &&
+    !!qualityProfile?.name
+  ) {
     return (
       <div className={styles.info} title={translate('QualityProfile')}>
         {qualityProfile.name}

frontend/src/Movie/Index/Table/MovieIndexRow.tsx

@@ -210,7 +210,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
         if (name === 'qualityProfileId') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              {qualityProfile.name}
+              {qualityProfile?.name ?? ''}
             </VirtualTableRowCell>
           );
         }

frontend/src/Movie/Movie.ts

@@ -35,7 +35,7 @@ interface Movie extends ModelBase {
   titleSlug: string;
   collection: Collection;
   studio: string;
-  qualityProfile: object;
+  qualityProfileId: number;
   added: string;
   year: number;
   inCinemas: string;

frontend/src/Store/Selectors/createAllMoviesSelector.ts

@@ -1,8 +1,9 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createAllMoviesSelector() {
   return createSelector(
-    (state) => state.movies,
+    (state: AppState) => state.movies,
     (movies) => {
       return movies.items;
     }

frontend/src/Store/Selectors/createCommandExecutingSelector.ts

@@ -2,13 +2,10 @@ import { createSelector } from 'reselect';
 import { isCommandExecuting } from 'Utilities/Command';
 import createCommandSelector from './createCommandSelector';
 
-function createCommandExecutingSelector(name, contraints = {}) {
-  return createSelector(
-    createCommandSelector(name, contraints),
-    (command) => {
-      return isCommandExecuting(command);
-    }
-  );
+function createCommandExecutingSelector(name: string, contraints = {}) {
+  return createSelector(createCommandSelector(name, contraints), (command) => {
+    return isCommandExecuting(command);
+  });
 }
 
 export default createCommandExecutingSelector;

frontend/src/Store/Selectors/createCommandSelector.js

@@ -1,14 +0,0 @@
-import { createSelector } from 'reselect';
-import { findCommand } from 'Utilities/Command';
-import createCommandsSelector from './createCommandsSelector';
-
-function createCommandSelector(name, contraints = {}) {
-  return createSelector(
-    createCommandsSelector(),
-    (commands) => {
-      return findCommand(commands, { name, ...contraints });
-    }
-  );
-}
-
-export default createCommandSelector;

frontend/src/Store/Selectors/createCommandSelector.ts

@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect';
+import { findCommand } from 'Utilities/Command';
+import createCommandsSelector from './createCommandsSelector';
+
+function createCommandSelector(name: string, contraints = {}) {
+  return createSelector(createCommandsSelector(), (commands) => {
+    return findCommand(commands, { name, ...contraints });
+  });
+}
+
+export default createCommandSelector;

frontend/src/Store/Selectors/createCommandsSelector.ts

@@ -1,8 +1,9 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createCommandsSelector() {
   return createSelector(
-    (state) => state.commands,
+    (state: AppState) => state.commands,
     (commands) => {
       return commands.items;
     }

frontend/src/Store/Selectors/createDeepEqualSelector.js

@@ -1,9 +0,0 @@
-import _ from 'lodash';
-import { createSelectorCreator, defaultMemoize } from 'reselect';
-
-const createDeepEqualSelector = createSelectorCreator(
-  defaultMemoize,
-  _.isEqual
-);
-
-export default createDeepEqualSelector;

frontend/src/Store/Selectors/createDeepEqualSelector.ts

@@ -0,0 +1,6 @@
+import { isEqual } from 'lodash';
+import { createSelectorCreator, defaultMemoize } from 'reselect';
+
+const createDeepEqualSelector = createSelectorCreator(defaultMemoize, isEqual);
+
+export default createDeepEqualSelector;

frontend/src/Store/Selectors/createExecutingCommandsSelector.ts

@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import { isCommandExecuting } from 'Utilities/Command';
 
 function createExecutingCommandsSelector() {
   return createSelector(
-    (state) => state.commands.items,
+    (state: AppState) => state.commands.items,
     (commands) => {
       return commands.filter((command) => isCommandExecuting(command));
     }

frontend/src/Store/Selectors/createExistingMovieSelector.ts

@@ -1,13 +1,14 @@
-import _ from 'lodash';
+import { some } from 'lodash';
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import createAllMoviesSelector from './createAllMoviesSelector';
 
 function createExistingMovieSelector() {
   return createSelector(
-    (state, { tmdbId }) => tmdbId,
+    (_: AppState, { tmdbId }: { tmdbId: number }) => tmdbId,
     createAllMoviesSelector(),
     (tmdbId, movies) => {
-      return _.some(movies, { tmdbId });
+      return some(movies, { tmdbId });
     }
   );
 }

frontend/src/Store/Selectors/createLanguagesSelector.js

@@ -1,27 +0,0 @@
-import { createSelector } from 'reselect';
-
-function createLanguagesSelector() {
-  return createSelector(
-    (state) => state.settings.languages,
-    (languages) => {
-      const {
-        isFetching,
-        isPopulated,
-        error,
-        items
-      } = languages;
-
-      const filterItems = ['Any'];
-      const filteredLanguages = items.filter((lang) => !filterItems.includes(lang.name));
-
-      return {
-        isFetching,
-        isPopulated,
-        error,
-        items: filteredLanguages
-      };
-    }
-  );
-}
-
-export default createLanguagesSelector;

frontend/src/Store/Selectors/createLanguagesSelector.ts

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createLanguagesSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.languages,
+    (languages) => {
+      const { isFetching, isPopulated, error, items } = languages;
+
+      const filterItems = ['Any'];
+      const filteredLanguages = items.filter(
+        (lang) => !filterItems.includes(lang.name)
+      );
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        items: filteredLanguages,
+      };
+    }
+  );
+}
+
+export default createLanguagesSelector;

frontend/src/Store/Selectors/createMovieCountSelector.ts

@@ -1,18 +1,19 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import createAllMoviesSelector from './createAllMoviesSelector';
 
 function createMovieCountSelector() {
   return createSelector(
     createAllMoviesSelector(),
-    (state) => state.movies.error,
-    (state) => state.movies.isFetching,
-    (state) => state.movies.isPopulated,
+    (state: AppState) => state.movies.error,
+    (state: AppState) => state.movies.isFetching,
+    (state: AppState) => state.movies.isPopulated,
     (movies, error, isFetching, isPopulated) => {
       return {
         count: movies.length,
         error,
         isFetching,
-        isPopulated
+        isPopulated,
       };
     }
   );

frontend/src/Store/Selectors/createMovieFileSelector.ts

@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createMovieFileSelector() {
   return createSelector(
-    (state, { movieFileId }) => movieFileId,
-    (state) => state.movieFiles,
+    (_: AppState, { movieFileId }: { movieFileId: number }) => movieFileId,
+    (state: AppState) => state.movieFiles,
     (movieFileId, movieFiles) => {
       if (!movieFileId) {
         return;

frontend/src/Store/Selectors/createMovieQualityProfileSelector.js

@@ -1,16 +0,0 @@
-import { createSelector } from 'reselect';
-import { createMovieSelectorForHook } from './createMovieSelector';
-
-function createMovieQualityProfileSelector(movieId) {
-  return createSelector(
-    (state) => state.settings.qualityProfiles.items,
-    createMovieSelectorForHook(movieId),
-    (qualityProfiles, movie = {}) => {
-      return qualityProfiles.find((profile) => {
-        return profile.id === movie.qualityProfileId;
-      });
-    }
-  );
-}
-
-export default createMovieQualityProfileSelector;

frontend/src/Store/Selectors/createMovieQualityProfileSelector.ts

@@ -0,0 +1,18 @@
+import { createSelector } from 'reselect';
+import appState from 'App/State/AppState';
+import Movie from 'Movie/Movie';
+import { createMovieSelectorForHook } from './createMovieSelector';
+
+function createMovieQualityProfileSelector(movieId: number) {
+  return createSelector(
+    (state: appState) => state.settings.qualityProfiles.items,
+    createMovieSelectorForHook(movieId),
+    (qualityProfiles, movie = {} as Movie) => {
+      return qualityProfiles.find(
+        (profile) => profile.id === movie.qualityProfileId
+      );
+    }
+  );
+}
+
+export default createMovieQualityProfileSelector;

frontend/src/Store/Selectors/createProfileInUseSelector.js

@@ -1,25 +0,0 @@
-import _ from 'lodash';
-import { createSelector } from 'reselect';
-import createAllMoviesSelector from './createAllMoviesSelector';
-
-function createProfileInUseSelector(profileProp) {
-  return createSelector(
-    (state, { id }) => id,
-    createAllMoviesSelector(),
-    (state) => state.settings.importLists.items,
-    (state) => state.movieCollections.items,
-    (id, movies, lists, collections) => {
-      if (!id) {
-        return false;
-      }
-
-      if (_.some(movies, { [profileProp]: id }) || _.some(lists, { [profileProp]: id }) || _.some(collections, { [profileProp]: id })) {
-        return true;
-      }
-
-      return false;
-    }
-  );
-}
-
-export default createProfileInUseSelector;

frontend/src/Store/Selectors/createProfileInUseSelector.ts

@@ -0,0 +1,31 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import Movie from 'Movie/Movie';
+import ImportList from 'typings/ImportList';
+import MovieCollection from 'typings/MovieCollection';
+import createAllMoviesSelector from './createAllMoviesSelector';
+
+function createProfileInUseSelector(profileProp: string) {
+  return createSelector(
+    (_: AppState, { id }: { id: number }) => id,
+    createAllMoviesSelector(),
+    (state: AppState) => state.settings.importLists.items,
+    (state: AppState) => state.movieCollections.items,
+    (id, movies, lists, collections) => {
+      if (!id) {
+        return false;
+      }
+
+      return (
+        movies.some((m) => m[profileProp as keyof Movie] === id) ||
+        lists.some((list) => list[profileProp as keyof ImportList] === id) ||
+        collections.some(
+          (collection) =>
+            collection[profileProp as keyof MovieCollection] === id
+        )
+      );
+    }
+  );
+}
+
+export default createProfileInUseSelector;

frontend/src/Store/Selectors/createQualityProfileSelector.js

@@ -1,26 +0,0 @@
-import { createSelector } from 'reselect';
-
-export function createQualityProfileSelectorForHook(qualityProfileId) {
-  return createSelector(
-    (state) => state.settings.qualityProfiles.items,
-    (qualityProfiles) => {
-      return qualityProfiles.find((profile) => {
-        return profile.id === qualityProfileId;
-      });
-    }
-  );
-}
-
-function createQualityProfileSelector() {
-  return createSelector(
-    (state, { qualityProfileId }) => qualityProfileId,
-    (state) => state.settings.qualityProfiles.items,
-    (qualityProfileId, qualityProfiles) => {
-      return qualityProfiles.find((profile) => {
-        return profile.id === qualityProfileId;
-      });
-    }
-  );
-}
-
-export default createQualityProfileSelector;

frontend/src/Store/Selectors/createQualityProfileSelector.ts

@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+export function createQualityProfileSelectorForHook(qualityProfileId: number) {
+  return createSelector(
+    (state: AppState) => state.settings.qualityProfiles.items,
+    (qualityProfiles) => {
+      return qualityProfiles.find((profile) => profile.id === qualityProfileId);
+    }
+  );
+}
+
+function createQualityProfileSelector() {
+  return createSelector(
+    (_: AppState, { qualityProfileId }: { qualityProfileId: number }) =>
+      qualityProfileId,
+    (state: AppState) => state.settings.qualityProfiles.items,
+    (qualityProfileId, qualityProfiles) => {
+      return qualityProfiles.find((profile) => profile.id === qualityProfileId);
+    }
+  );
+}
+
+export default createQualityProfileSelector;

frontend/src/Store/Selectors/createQueueItemSelector.ts

@@ -1,17 +1,16 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createQueueItemSelector() {
   return createSelector(
-    (state, { movieId }) => movieId,
-    (state) => state.queue.details.items,
+    (_: AppState, { movieId }: { movieId: number }) => movieId,
+    (state: AppState) => state.queue.details.items,
     (movieId, details) => {
       if (!movieId || !details) {
         return null;
       }
 
-      return details.find((item) => {
-        return item.movieId === movieId;
-      });
+      return details.find((item) => item.movieId === movieId);
     }
   );
 }

frontend/src/Store/Selectors/createSystemStatusSelector.ts

@@ -1,8 +1,9 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createSystemStatusSelector() {
   return createSelector(
-    (state) => state.system.status,
+    (state: AppState) => state.system.status,
     (status) => {
       return status.item;
     }

frontend/src/Store/Selectors/createTagDetailsSelector.ts

@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createTagDetailsSelector() {
   return createSelector(
-    (state, { id }) => id,
-    (state) => state.tags.details.items,
+    (_: AppState, { id }: { id: number }) => id,
+    (state: AppState) => state.tags.details.items,
     (id, tagDetails) => {
       return tagDetails.find((t) => t.id === id);
     }

frontend/src/Store/Selectors/createTagsSelector.ts

@@ -1,8 +1,9 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createTagsSelector() {
   return createSelector(
-    (state) => state.tags.items,
+    (state: AppState) => state.tags.items,
     (tags) => {
       return tags;
     }

frontend/src/Store/Selectors/createUISettingsSelector.ts

@@ -1,8 +1,9 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createUISettingsSelector() {
   return createSelector(
-    (state) => state.settings.ui,
+    (state: AppState) => state.settings.ui,
     (ui) => {
       return ui.item;
     }

frontend/src/typings/MovieCollection.ts

@@ -0,0 +1,17 @@
+import ModelBase from 'App/ModelBase';
+import Movie from 'Movie/Movie';
+
+interface MovieCollection extends ModelBase {
+  title: string;
+  sortTitle: string;
+  tmdbId: number;
+  overview: string;
+  monitored: boolean;
+  rootFolderPath: string;
+  qualityProfileId: number;
+  movies: Movie[];
+  missingMovies: number;
+  tags: number[];
+}
+
+export default MovieCollection;

frontend/src/typings/SystemStatus.ts

@@ -0,0 +1,31 @@
+interface SystemStatus {
+  appData: string;
+  appName: string;
+  authentication: string;
+  branch: string;
+  buildTime: string;
+  instanceName: string;
+  isAdmin: boolean;
+  isDebug: boolean;
+  isDocker: boolean;
+  isLinux: boolean;
+  isNetCore: boolean;
+  isOsx: boolean;
+  isProduction: boolean;
+  isUserInteractive: boolean;
+  isWindows: boolean;
+  migrationVersion: number;
+  mode: string;
+  osName: string;
+  osVersion: string;
+  packageUpdateMechanism: string;
+  runtimeName: string;
+  runtimeVersion: string;
+  sqliteVersion: string;
+  startTime: string;
+  startupPath: string;
+  urlBase: string;
+  version: string;
+}
+
+export default SystemStatus;

frontend/src/typings/UiSettings.ts

@@ -3,4 +3,5 @@ export interface UiSettings {
   shortDateFormat: string;
   longDateFormat: string;
   timeFormat: string;
+  movieRuntimeFormat: string;
 }