Fixed: Fetch Settings in UpdateConnector

frontend/src/System/Updates/Updates.css

@@ -1,8 +1,4 @@
-.updateAvailable {
-  display: flex;
-}
-
-.upToDate {
+.messageContainer {
   display: flex;
   margin-bottom: 20px;
 }
@@ -12,7 +8,7 @@
   font-size: 30px;
 }
 
-.upToDateMessage {
+.message {
   padding-left: 5px;
   font-size: 18px;
   line-height: 30px;

frontend/src/System/Updates/Updates.js

@@ -23,7 +23,8 @@ class Updates extends Component {
       currentVersion,
       isFetching,
       isPopulated,
-      error,
+      updatesError,
+      generalSettingsError,
       items,
       isInstallingUpdate,
       updateMechanism,
@@ -33,8 +34,9 @@ class Updates extends Component {
       onInstallLatestPress
     } = this.props;
 
-    const hasUpdates = isPopulated && !error && items.length > 0;
-    const noUpdates = isPopulated && !error && !items.length;
+    const hasError = !!(updatesError || generalSettingsError);
+    const hasUpdates = isPopulated && !hasError && items.length > 0;
+    const noUpdates = isPopulated && !hasError && !items.length;
     const hasUpdateToInstall = hasUpdates && _.some(items, { installable: true, latest: true });
     const noUpdateToInstall = hasUpdates && !hasUpdateToInstall;
 
@@ -49,7 +51,7 @@ class Updates extends Component {
       <PageContent title="Updates">
         <PageContentBodyConnector>
           {
-            !isPopulated && !error &&
+            !isPopulated && !hasError &&
               <LoadingIndicator />
           }
 
@@ -97,13 +99,13 @@ class Updates extends Component {
 
           {
             noUpdateToInstall &&
-              <div className={styles.upToDate}>
+              <div className={styles.messageContainer}>
                 <Icon
                   className={styles.upToDateIcon}
                   name={icons.CHECK_CIRCLE}
                   size={30}
                 />
-                <div className={styles.upToDateMessage}>
+                <div className={styles.message}>
                   The latest version of Lidarr is already installed
                 </div>
 
@@ -183,11 +185,18 @@ class Updates extends Component {
           }
 
           {
-            !!error &&
+            !!updatesError &&
               <div>
                 Failed to fetch updates
               </div>
           }
+
+          {
+            !!generalSettingsError &&
+              <div>
+                Failed to update settings
+              </div>
+          }
         </PageContentBodyConnector>
       </PageContent>
     );
@@ -199,7 +208,8 @@ Updates.propTypes = {
   currentVersion: PropTypes.string.isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
+  updatesError: PropTypes.object,
+  generalSettingsError: PropTypes.object,
   items: PropTypes.array.isRequired,
   isInstallingUpdate: PropTypes.bool.isRequired,
   isDocker: PropTypes.bool.isRequired,

frontend/src/System/Updates/UpdatesConnector.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
 import { fetchUpdates } from 'Store/Actions/systemActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@@ -17,29 +18,31 @@ function createMapStateToProps() {
     (state) => state.system.updates,
     (state) => state.settings.general,
     createUISettingsSelector(),
-    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE),
     createSystemStatusSelector(),
+    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE),
     (
       currentVersion,
       status,
       updates,
       generalSettings,
       uiSettings,
-      isInstallingUpdate,
-      systemStatus
+      systemStatus,
+      isInstallingUpdate
     ) => {
       const {
-        isFetching,
-        isPopulated,
-        error,
+        error: updatesError,
         items
       } = updates;
 
+      const isFetching = updates.isFetching || generalSettings.isFetching;
+      const isPopulated = updates.isPopulated && generalSettings.isPopulated;
+
       return {
         currentVersion,
         isFetching,
         isPopulated,
-        error,
+        updatesError,
+        generalSettingsError: generalSettings.error,
         items,
         isInstallingUpdate,
         isDocker: systemStatus.isDocker,
@@ -52,8 +55,9 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchUpdates,
-  executeCommand
+  dispatchFetchUpdates: fetchUpdates,
+  dispatchFetchGeneralSettings: fetchGeneralSettings,
+  dispatchExecuteCommand: executeCommand
 };
 
 class UpdatesConnector extends Component {
@@ -62,14 +66,15 @@ class UpdatesConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.fetchUpdates();
+    this.props.dispatchFetchUpdates();
+    this.props.dispatchFetchGeneralSettings();
   }
 
   //
   // Listeners
 
   onInstallLatestPress = () => {
-    this.props.executeCommand({ name: commandNames.APPLICATION_UPDATE });
+    this.props.dispatchExecuteCommand({ name: commandNames.APPLICATION_UPDATE });
   }
 
   //
@@ -86,8 +91,9 @@ class UpdatesConnector extends Component {
 }
 
 UpdatesConnector.propTypes = {
-  fetchUpdates: PropTypes.func.isRequired,
-  executeCommand: PropTypes.func.isRequired
+  dispatchFetchUpdates: PropTypes.func.isRequired,
+  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
+  dispatchExecuteCommand: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(UpdatesConnector);