diff --git a/frontend/src/System/Updates/Updates.css b/frontend/src/System/Updates/Updates.css index f563cb743..6ed588890 100644 --- a/frontend/src/System/Updates/Updates.css +++ b/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; diff --git a/frontend/src/System/Updates/Updates.js b/frontend/src/System/Updates/Updates.js index bedb1bd93..da821b756 100644 --- a/frontend/src/System/Updates/Updates.js +++ b/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 { { - !isPopulated && !error && + !isPopulated && !hasError && } @@ -97,13 +99,13 @@ class Updates extends Component { { noUpdateToInstall && -
+
-
+
The latest version of Lidarr is already installed
@@ -183,11 +185,18 @@ class Updates extends Component { } { - !!error && + !!updatesError &&
Failed to fetch updates
} + + { + !!generalSettingsError && +
+ Failed to update settings +
+ } ); @@ -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, diff --git a/frontend/src/System/Updates/UpdatesConnector.js b/frontend/src/System/Updates/UpdatesConnector.js index 753df5bbd..f0d93f10b 100644 --- a/frontend/src/System/Updates/UpdatesConnector.js +++ b/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);