New: Many UI Updates and Performance Tweaks

frontend/src/Movie/Index/MovieIndexItemConnector.js

@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { isCommandExecuting } from 'Utilities/Command';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
-import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
-import createQualityProfileSelector from 'Store/Selectors/createQualityProfileSelector';
+import createExecutingCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createMovieQualityProfileSelector from 'Store/Selectors/createMovieQualityProfileSelector';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as commandNames from 'Commands/commandNames';
 
@@ -30,28 +29,36 @@ function selectShowSearchAction() {
 function createMapStateToProps() {
   return createSelector(
     createMovieSelector(),
-    createQualityProfileSelector(),
+    createMovieQualityProfileSelector(),
     selectShowSearchAction(),
-    createCommandsSelector(),
+    createExecutingCommandsSelector(),
     (
       movie,
       qualityProfile,
       showSearchAction,
-      commands
+      executingCommands
     ) => {
-      const isRefreshingMovie = commands.some((command) => {
+
+      // If a movie is deleted this selector may fire before the parent
+      // selecors, which will result in an undefined movie, if that happens
+      // we want to return early here and again in the render function to avoid
+      // trying to show a movie that has no information available.
+
+      if (!movie) {
+        return {};
+      }
+
+      const isRefreshingMovie = executingCommands.some((command) => {
         return (
           command.name === commandNames.REFRESH_MOVIE &&
-          command.body.movieId === movie.id &&
-          isCommandExecuting(command)
+          command.body.movieId === movie.id
         );
       });
 
-      const isSearchingMovie = commands.some((command) => {
+      const isSearchingMovie = executingCommands.some((command) => {
         return (
           command.name === commandNames.MOVIE_SEARCH &&
-          command.body.movieId === movie.id &&
-          isCommandExecuting(command)
+          command.body.movieId === movie.id
         );
       });
 
@@ -67,7 +74,7 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  executeCommand
+  dispatchExecuteCommand: executeCommand
 };
 
 class MovieIndexItemConnector extends Component {
@@ -76,14 +83,14 @@ class MovieIndexItemConnector extends Component {
   // Listeners
 
   onRefreshMoviePress = () => {
-    this.props.executeCommand({
+    this.props.dispatchExecuteCommand({
       name: commandNames.REFRESH_MOVIE,
       movieId: this.props.id
     });
   }
 
   onSearchPress = () => {
-    this.props.executeCommand({
+    this.props.dispatchExecuteCommand({
       name: commandNames.MOVIE_SEARCH,
       movieIds: [this.props.id]
     });
@@ -94,13 +101,19 @@ class MovieIndexItemConnector extends Component {
 
   render() {
     const {
+      id,
       component: ItemComponent,
       ...otherProps
     } = this.props;
 
+    if (!id) {
+      return null;
+    }
+
     return (
       <ItemComponent
         {...otherProps}
+        id={id}
         onRefreshMoviePress={this.onRefreshMoviePress}
         onSearchPress={this.onSearchPress}
       />
@@ -109,9 +122,9 @@ class MovieIndexItemConnector extends Component {
 }
 
 MovieIndexItemConnector.propTypes = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.number,
   component: PropTypes.func.isRequired,
-  executeCommand: PropTypes.func.isRequired
+  dispatchExecuteCommand: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(MovieIndexItemConnector);