Improve selectors in PageConnector to reduce re-rendering

frontend/src/Components/Page/ErrorPage.js

@@ -12,7 +12,8 @@ function ErrorPage(props) {
     tagsError,
     qualityProfilesError,
     languageProfilesError,
-    uiSettingsError
+    uiSettingsError,
+    systemStatusError
   } = props;
 
   let errorMessage = 'Failed to load Sonarr';
@@ -31,6 +32,8 @@ function ErrorPage(props) {
     errorMessage = getErrorMessage(languageProfilesError, 'Failed to load language profiles from API');
   } else if (uiSettingsError) {
     errorMessage = getErrorMessage(uiSettingsError, 'Failed to load UI settings from API');
+  } else if (systemStatusError) {
+    errorMessage = getErrorMessage(uiSettingsError, 'Failed to load system status from API');
   }
 
   return (
@@ -54,7 +57,8 @@ ErrorPage.propTypes = {
   tagsError: PropTypes.object,
   qualityProfilesError: PropTypes.object,
   languageProfilesError: PropTypes.object,
-  uiSettingsError: PropTypes.object
+  uiSettingsError: PropTypes.object,
+  systemStatusError: PropTypes.object
 };
 
 export default ErrorPage;

frontend/src/Components/Page/PageConnector.js

@@ -27,59 +27,110 @@ function testLocalStorage() {
   }
 }
 
-function createMapStateToProps() {
+const selectAppProps = createSelector(
-  return createSelector(
+  (state) => state.app.isSidebarVisible,
-    (state) => state.series,
+  (state) => state.app.version,
-    (state) => state.customFilters,
+  (state) => state.app.isUpdated,
-    (state) => state.tags,
+  (state) => state.app.isDisconnected,
-    (state) => state.settings.ui,
+  (isSidebarVisible, version, isUpdated, isDisconnected) => {
-    (state) => state.settings.qualityProfiles,
+    return {
-    (state) => state.settings.languageProfiles,
+      isSidebarVisible,
-    (state) => state.app,
+      version,
-    createDimensionsSelector(),
+      isUpdated,
-    (
+      isDisconnected
-      series,
+    };
-      customFilters,
+  }
-      tags,
-      uiSettings,
-      qualityProfiles,
-      languageProfiles,
-      app,
-      dimensions
-    ) => {
-      const isPopulated = (
-        series.isPopulated &&
-        customFilters.isPopulated &&
-        tags.isPopulated &&
-        qualityProfiles.isPopulated &&
-        languageProfiles.isPopulated &&
-        uiSettings.isPopulated
 );
 
+const selectIsPopulated = createSelector(
+  (state) => state.series.isPopulated,
+  (state) => state.customFilters.isPopulated,
+  (state) => state.tags.isPopulated,
+  (state) => state.settings.ui.isPopulated,
+  (state) => state.settings.qualityProfiles.isPopulated,
+  (state) => state.settings.languageProfiles.isPopulated,
+  (state) => state.system.status.isPopulated,
+  (
+    seriesIsPopulated,
+    customFiltersIsPopulated,
+    tagsIsPopulated,
+    uiSettingsIsPopulated,
+    qualityProfilesIsPopulated,
+    languageProfilesIsPopulated,
+    systemStatusIsPopulated
+  ) => {
+    return (
+      seriesIsPopulated &&
+      customFiltersIsPopulated &&
+      tagsIsPopulated &&
+      uiSettingsIsPopulated &&
+      qualityProfilesIsPopulated &&
+      languageProfilesIsPopulated &&
+      systemStatusIsPopulated
+    );
+  }
+);
+
+const selectErrors = createSelector(
+  (state) => state.series.error,
+  (state) => state.customFilters.error,
+  (state) => state.tags.error,
+  (state) => state.settings.ui.error,
+  (state) => state.settings.qualityProfiles.error,
+  (state) => state.settings.languageProfiles.error,
+  (state) => state.system.status.error,
+  (
+    seriesError,
+    customFiltersError,
+    tagsError,
+    uiSettingsError,
+    qualityProfilesError,
+    languageProfilesError,
+    systemStatusError
+  ) => {
     const hasError = !!(
-        series.error ||
+      seriesError ||
-        customFilters.error ||
+      customFiltersError ||
-        tags.error ||
+      tagsError ||
-        qualityProfiles.error ||
+      uiSettingsError ||
-        languageProfiles.error ||
+      qualityProfilesError ||
-        uiSettings.error
+      languageProfilesError ||
+      systemStatusError
     );
 
     return {
-        isPopulated,
       hasError,
-        seriesError: series.error,
+      seriesError,
-        customFiltersError: tags.error,
+      customFiltersError,
-        tagsError: tags.error,
+      tagsError,
-        qualityProfilesError: qualityProfiles.error,
+      uiSettingsError,
-        languageProfilesError: languageProfiles.error,
+      qualityProfilesError,
-        uiSettingsError: uiSettings.error,
+      languageProfilesError,
+      systemStatusError
+    };
+  }
+);
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.ui.item.enableColorImpairedMode,
+    selectIsPopulated,
+    selectErrors,
+    selectAppProps,
+    createDimensionsSelector(),
+    (
+      enableColorImpairedMode,
+      isPopulated,
+      errors,
+      app,
+      dimensions
+    ) => {
+      return {
+        ...app,
+        ...errors,
+        isPopulated,
         isSmallScreen: dimensions.isSmallScreen,
-        isSidebarVisible: app.isSidebarVisible,
+        enableColorImpairedMode
-        enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
-        version: app.version,
-        isUpdated: app.isUpdated,
-        isDisconnected: app.isDisconnected
       };
     }
   );