Issue 32: replace full-library preload with paged movie index

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -82,7 +82,8 @@ class AddNewMovie extends Component {
     const {
       error,
       items,
-      hasExistingMovies
+      hasExistingMovies,
+      areMoviesPopulated
     } = this.props;
 
     const term = this.state.term;
@@ -188,7 +189,7 @@ class AddNewMovie extends Component {
           }
 
           {
-            !term && !hasExistingMovies ?
+            !term && areMoviesPopulated && !hasExistingMovies ?
               <div className={styles.message}>
                 <div className={styles.noMoviesText}>
                   {translate('HaveNotAddedMovies')}
@@ -220,6 +221,7 @@ AddNewMovie.propTypes = {
   addError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasExistingMovies: PropTypes.bool.isRequired,
+  areMoviesPopulated: PropTypes.bool.isRequired,
   onMovieLookupChange: PropTypes.func.isRequired,
   onClearMovieLookup: PropTypes.func.isRequired
 };

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { clearAddMovie, lookupMovie } from 'Store/Actions/addMovieActions';
+import { fetchMovies } from 'Store/Actions/movieActions';
 import { clearMovieFiles, fetchMovieFiles } from 'Store/Actions/movieFileActions';
 import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
@@ -15,14 +16,16 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.addMovie,
     (state) => state.movies.items.length,
+    (state) => state.movies.isPopulated,
     (state) => state.router.location,
-    (addMovie, existingMoviesCount, location) => {
+    (addMovie, existingMoviesCount, areMoviesPopulated, location) => {
       const { params } = parseUrl(location.search);
 
       return {
         ...addMovie,
         term: params.term,
-        hasExistingMovies: existingMoviesCount > 0
+        hasExistingMovies: existingMoviesCount > 0,
+        areMoviesPopulated
       };
     }
   );
@@ -32,6 +35,7 @@ const mapDispatchToProps = {
   lookupMovie,
   clearAddMovie,
   fetchRootFolders,
+  fetchMovies,
   fetchQueueDetails,
   clearQueueDetails,
   fetchMovieFiles,
@@ -51,6 +55,7 @@ class AddNewMovieConnector extends Component {
 
   componentDidMount() {
     this.props.fetchRootFolders();
+    this.props.fetchMovies();
     this.props.fetchQueueDetails();
   }
 
@@ -125,6 +130,7 @@ AddNewMovieConnector.propTypes = {
   lookupMovie: PropTypes.func.isRequired,
   clearAddMovie: PropTypes.func.isRequired,
   fetchRootFolders: PropTypes.func.isRequired,
+  fetchMovies: PropTypes.func.isRequired,
   fetchQueueDetails: PropTypes.func.isRequired,
   clearQueueDetails: PropTypes.func.isRequired,
   fetchMovieFiles: PropTypes.func.isRequired,

frontend/src/AddMovie/ImportMovie/Import/ImportMovieConnector.js

@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
 import createRouteMatchShape from 'Helpers/Props/Shapes/createRouteMatchShape';
 import { setAddMovieDefault } from 'Store/Actions/addMovieActions';
 import { clearImportMovie, importMovie, setImportMovieValue } from 'Store/Actions/importMovieActions';
+import { fetchMovies } from 'Store/Actions/movieActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import ImportMovie from './ImportMovie';
 
@@ -60,6 +61,7 @@ const mapDispatchToProps = {
   dispatchSetImportMovieValue: setImportMovieValue,
   dispatchImportMovie: importMovie,
   dispatchClearImportMovie: clearImportMovie,
+  dispatchFetchMovies: fetchMovies,
   dispatchFetchRootFolders: fetchRootFolders,
   dispatchSetAddMovieDefault: setAddMovieDefault
 };
@@ -74,10 +76,12 @@ class ImportMovieConnector extends Component {
       rootFolderId,
       qualityProfiles,
       defaultQualityProfileId,
+      dispatchFetchMovies,
       dispatchFetchRootFolders,
       dispatchSetAddMovieDefault
     } = this.props;
 
+    dispatchFetchMovies();
     dispatchFetchRootFolders({ id: rootFolderId, timeout: false });
 
     let setDefaults = false;
@@ -146,6 +150,7 @@ ImportMovieConnector.propTypes = {
   dispatchSetImportMovieValue: PropTypes.func.isRequired,
   dispatchImportMovie: PropTypes.func.isRequired,
   dispatchClearImportMovie: PropTypes.func.isRequired,
+  dispatchFetchMovies: PropTypes.func.isRequired,
   dispatchFetchRootFolders: PropTypes.func.isRequired,
   dispatchSetAddMovieDefault: PropTypes.func.isRequired
 };

frontend/src/App/State/MoviesAppState.ts

@@ -1,15 +1,18 @@
 import AppSectionState, {
   AppSectionDeleteState,
   AppSectionSaveState,
+  PagedAppSectionState,
 } from 'App/State/AppSectionState';
 import Column from 'Components/Table/Column';
 import { SortDirection } from 'Helpers/Props/sortDirections';
 import Movie from 'Movie/Movie';
 import { Filter, FilterBuilderProp } from './AppState';
 
-export interface MovieIndexAppState {
-  sortKey: string;
-  sortDirection: SortDirection;
+export interface MovieIndexAppState
+  extends AppSectionState<Movie>,
+    AppSectionDeleteState,
+    AppSectionSaveState,
+    PagedAppSectionState {
   secondarySortKey: string;
   secondarySortDirection: SortDirection;
   view: string;
@@ -49,7 +52,7 @@ export interface MovieIndexAppState {
     showSearchAction: boolean;
   };
 
-  selectedFilterKey: string;
+  selectedFilterKey: string | number;
   filterBuilderProps: FilterBuilderProp<Movie>[];
   filters: Filter[];
   columns: Column[];

frontend/src/Collection/CollectionConnector.js

@@ -5,6 +5,7 @@ import { createSelector } from 'reselect';
 import * as commandNames from 'Commands/commandNames';
 import withScrollPosition from 'Components/withScrollPosition';
 import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchMovies } from 'Store/Actions/movieActions';
 import {
   fetchMovieCollections,
   saveMovieCollections,
@@ -42,6 +43,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchMovieCollections() {
       dispatch(fetchMovieCollections());
     },
+    dispatchFetchMovies() {
+      dispatch(fetchMovies());
+    },
     dispatchFetchQueueDetails() {
       dispatch(fetchQueueDetails());
     },
@@ -72,6 +76,7 @@ class CollectionConnector extends Component {
 
   componentDidMount() {
     this.props.dispatchFetchMovieCollections();
+    this.props.dispatchFetchMovies();
     this.props.dispatchFetchQueueDetails();
   }
 
@@ -117,6 +122,7 @@ CollectionConnector.propTypes = {
   view: PropTypes.string.isRequired,
   onUpdateSelectedPress: PropTypes.func.isRequired,
   dispatchFetchMovieCollections: PropTypes.func.isRequired,
+  dispatchFetchMovies: PropTypes.func.isRequired,
   dispatchFetchQueueDetails: PropTypes.func.isRequired,
   dispatchClearQueueDetails: PropTypes.func.isRequired
 };

frontend/src/Components/Filter/Builder/MovieFilterBuilderRowValue.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import useEnsureMoviesLoaded from 'Helpers/Hooks/useEnsureMoviesLoaded';
 import Movie from 'Movie/Movie';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
 
 function MovieFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+  useEnsureMoviesLoaded();
+
   const allMovies: Movie[] = useSelector(createAllMoviesSelector());
 
   const tagList = allMovies