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() {
   }
 }
 
+const selectAppProps = createSelector(
+  (state) => state.app.isSidebarVisible,
+  (state) => state.app.version,
+  (state) => state.app.isUpdated,
+  (state) => state.app.isDisconnected,
+  (isSidebarVisible, version, isUpdated, isDisconnected) => {
+    return {
+      isSidebarVisible,
+      version,
+      isUpdated,
+      isDisconnected
+    };
+  }
+);
+
+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 = !!(
+      seriesError ||
+      customFiltersError ||
+      tagsError ||
+      uiSettingsError ||
+      qualityProfilesError ||
+      languageProfilesError ||
+      systemStatusError
+    );
+
+    return {
+      hasError,
+      seriesError,
+      customFiltersError,
+      tagsError,
+      uiSettingsError,
+      qualityProfilesError,
+      languageProfilesError,
+      systemStatusError
+    };
+  }
+);
+
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.series,
+    (state) => state.settings.ui.item.enableColorImpairedMode,
-    (state) => state.customFilters,
+    selectIsPopulated,
-    (state) => state.tags,
+    selectErrors,
-    (state) => state.settings.ui,
+    selectAppProps,
-    (state) => state.settings.qualityProfiles,
-    (state) => state.settings.languageProfiles,
-    (state) => state.app,
     createDimensionsSelector(),
     (
-      series,
+      enableColorImpairedMode,
-      customFilters,
+      isPopulated,
-      tags,
+      errors,
-      uiSettings,
-      qualityProfiles,
-      languageProfiles,
       app,
       dimensions
     ) => {
-      const isPopulated = (
-        series.isPopulated &&
-        customFilters.isPopulated &&
-        tags.isPopulated &&
-        qualityProfiles.isPopulated &&
-        languageProfiles.isPopulated &&
-        uiSettings.isPopulated
-      );
-
-      const hasError = !!(
-        series.error ||
-        customFilters.error ||
-        tags.error ||
-        qualityProfiles.error ||
-        languageProfiles.error ||
-        uiSettings.error
-      );
-
       return {
+        ...app,
+        ...errors,
         isPopulated,
-        hasError,
-        seriesError: series.error,
-        customFiltersError: tags.error,
-        tagsError: tags.error,
-        qualityProfilesError: qualityProfiles.error,
-        languageProfilesError: languageProfiles.error,
-        uiSettingsError: uiSettings.error,
         isSmallScreen: dimensions.isSmallScreen,
-        isSidebarVisible: app.isSidebarVisible,
+        enableColorImpairedMode
-        enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
-        version: app.version,
-        isUpdated: app.isUpdated,
-        isDisconnected: app.isDisconnected
       };
     }
   );