Fixed: UI Selector, Rendering Improvements

frontend/src/Components/Page/ErrorPage.js

@@ -13,7 +13,8 @@ function ErrorPage(props) {
     qualityProfilesError,
     languageProfilesError,
     metadataProfilesError,
-    uiSettingsError
+    uiSettingsError,
+    systemStatusError
   } = props;
 
   let errorMessage = 'Failed to load Lidarr';
@@ -34,6 +35,8 @@ function ErrorPage(props) {
     errorMessage = getErrorMessage(metadataProfilesError, 'Failed to load metadata 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 (
@@ -58,7 +61,8 @@ ErrorPage.propTypes = {
   qualityProfilesError: PropTypes.object,
   languageProfilesError: PropTypes.object,
   metadataProfilesError: PropTypes.object,
-  uiSettingsError: PropTypes.object
+  uiSettingsError: PropTypes.object,
+  systemStatusError: PropTypes.object
 };
 
 export default ErrorPage;

frontend/src/Components/Page/PageConnector.js

@@ -27,69 +27,124 @@ 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.artist.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.settings.metadataProfiles.isPopulated,
+  (state) => state.settings.importLists.isPopulated,
+  (state) => state.system.status.isPopulated,
+  (
+    artistIsPopulated,
+    customFiltersIsPopulated,
+    tagsIsPopulated,
+    uiSettingsIsPopulated,
+    qualityProfilesIsPopulated,
+    languageProfilesIsPopulated,
+    metadataProfilesIsPopulated,
+    importListsIsPopulated,
+    systemStatusIsPopulated
+  ) => {
+    return (
+      artistIsPopulated &&
+      customFiltersIsPopulated &&
+      tagsIsPopulated &&
+      uiSettingsIsPopulated &&
+      qualityProfilesIsPopulated &&
+      languageProfilesIsPopulated &&
+      metadataProfilesIsPopulated &&
+      importListsIsPopulated &&
+      systemStatusIsPopulated
+    );
+  }
+);
+
+const selectErrors = createSelector(
+  (state) => state.artist.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.settings.metadataProfiles.error,
+  (state) => state.settings.importLists.error,
+  (state) => state.system.status.error,
+  (
+    artistError,
+    customFiltersError,
+    tagsError,
+    uiSettingsError,
+    qualityProfilesError,
+    languageProfilesError,
+    metadataProfilesError,
+    importListsError,
+    systemStatusError
+  ) => {
+    const hasError = !!(
+      artistError ||
+      customFiltersError ||
+      tagsError ||
+      uiSettingsError ||
+      qualityProfilesError ||
+      languageProfilesError ||
+      metadataProfilesError ||
+      importListsError ||
+      systemStatusError
+    );
+
+    return {
+      hasError,
+      artistError,
+      customFiltersError,
+      tagsError,
+      uiSettingsError,
+      qualityProfilesError,
+      languageProfilesError,
+      metadataProfilesError,
+      importListsError,
+      systemStatusError
+    };
+  }
+);
+
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.artist,
-    (state) => state.customFilters,
-    (state) => state.tags,
-    (state) => state.settings.ui,
-    (state) => state.settings.qualityProfiles,
-    (state) => state.settings.languageProfiles,
-    (state) => state.settings.metadataProfiles,
-    (state) => state.settings.importLists,
-    (state) => state.app,
+    (state) => state.settings.ui.item.enableColorImpairedMode,
+    selectIsPopulated,
+    selectErrors,
+    selectAppProps,
     createDimensionsSelector(),
     (
-      artist,
-      customFilters,
-      tags,
-      uiSettings,
-      qualityProfiles,
-      languageProfiles,
-      metadataProfiles,
-      importLists,
+      enableColorImpairedMode,
+      isPopulated,
+      errors,
       app,
       dimensions
     ) => {
-      const isPopulated = (
-        artist.isPopulated &&
-        customFilters.isPopulated &&
-        tags.isPopulated &&
-        qualityProfiles.isPopulated &&
-        languageProfiles.isPopulated &&
-        metadataProfiles.isPopulated &&
-        importLists.isPopulated &&
-        uiSettings.isPopulated
-      );
-
-      const hasError = !!(
-        artist.error ||
-        customFilters.error ||
-        tags.error ||
-        qualityProfiles.error ||
-        languageProfiles.error ||
-        metadataProfiles.error ||
-        importLists.error ||
-        uiSettings.error
-      );
-
       return {
+        ...app,
+        ...errors,
         isPopulated,
-        hasError,
-        artistError: artist.error,
-        customFiltersError: tags.error,
-        tagsError: tags.error,
-        qualityProfilesError: qualityProfiles.error,
-        languageProfilesError: languageProfiles.error,
-        metadataProfilesError: metadataProfiles.error,
-        importListsError: importLists.error,
-        uiSettingsError: uiSettings.error,
         isSmallScreen: dimensions.isSmallScreen,
-        isSidebarVisible: app.isSidebarVisible,
-        enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
-        version: app.version,
-        isUpdated: app.isUpdated,
-        isDisconnected: app.isDisconnected
+        enableColorImpairedMode
       };
     }
   );