New: Many UI Updates and Performance Tweaks

frontend/src/Store/Selectors/createDeepEqualSelector.js

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

frontend/src/Store/Selectors/createExecutingCommandsSelector.js

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import { isCommandExecuting } from 'Utilities/Command';
+
+function createExecutingCommandsSelector() {
+  return createSelector(
+    (state) => state.commands.items,
+    (commands) => {
+      return commands.filter((command) => isCommandExecuting(command));
+    }
+  );
+}
+
+export default createExecutingCommandsSelector;

frontend/src/Store/Selectors/createMovieClientSideCollectionItemsSelector.js

@@ -0,0 +1,36 @@
+import { createSelector } from 'reselect';
+import createDeepEqualSelector from './createDeepEqualSelector';
+import createClientSideCollectionSelector from './createClientSideCollectionSelector';
+
+function createUnoptimizedSelector(uiSection) {
+  return createSelector(
+    createClientSideCollectionSelector('movies', uiSection),
+    (movies) => {
+      const items = movies.items.map((s) => {
+        const {
+          id,
+          sortTitle
+        } = s;
+
+        return {
+          id,
+          sortTitle
+        };
+      });
+
+      return {
+        ...movies,
+        items
+      };
+    }
+  );
+}
+
+function createMovieClientSideCollectionItemsSelector(uiSection) {
+  return createDeepEqualSelector(
+    createUnoptimizedSelector(uiSection),
+    (movies) => movies
+  );
+}
+
+export default createMovieClientSideCollectionItemsSelector;

frontend/src/Store/Selectors/createMovieQualityProfileSelector.js

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

frontend/src/Store/Selectors/createMovieSelector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { createSelector } from 'reselect';
 import createAllMoviesSelector from './createAllMoviesSelector';
 
@@ -6,8 +5,8 @@ function createMovieSelector() {
   return createSelector(
     (state, { movieId }) => movieId,
     createAllMoviesSelector(),
-    (movieId, movies) => {
-      return _.find(movies, { id: movieId });
+    (movieId, allMovies) => {
+      return allMovies.find((movie) => movie.id === movieId);
     }
   );
 }

frontend/src/Store/Selectors/createQualityProfileSelector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { createSelector } from 'reselect';
 
 function createQualityProfileSelector() {
@@ -6,7 +5,9 @@ function createQualityProfileSelector() {
     (state, { qualityProfileId }) => qualityProfileId,
     (state) => state.settings.qualityProfiles.items,
     (qualityProfileId, qualityProfiles) => {
-      return _.find(qualityProfiles, { id: qualityProfileId });
+      return qualityProfiles.find((profile) => {
+        return profile.id === qualityProfileId;
+      });
     }
   );
 }