Show download client field only when download clients are set

This commit is contained in:
Bogdan
2023-07-04 20:40:55 +03:00
parent 826828e8ec
commit 712404ddca
2 changed files with 38 additions and 19 deletions

View File

@@ -26,6 +26,8 @@ function EditIndexerModalContent(props) {
isTesting, isTesting,
saveError, saveError,
item, item,
hasUsenetDownloadClients,
hasTorrentDownloadClients,
onInputChange, onInputChange,
onFieldChange, onFieldChange,
onModalClose, onModalClose,
@@ -54,6 +56,7 @@ function EditIndexerModalContent(props) {
} = item; } = item;
const indexerDisplayName = implementationName === definitionName ? implementationName : `${implementationName} (${definitionName})`; const indexerDisplayName = implementationName === definitionName ? implementationName : `${implementationName} (${definitionName})`;
const showDownloadClientInput = downloadClientId.value > 0 || protocol.value === 'usenet' && hasUsenetDownloadClients || protocol.value === 'torrent' && hasTorrentDownloadClients;
return ( return (
<ModalContent onModalClose={onModalClose}> <ModalContent onModalClose={onModalClose}>
@@ -158,22 +161,24 @@ function EditIndexerModalContent(props) {
/> />
</FormGroup> </FormGroup>
<FormGroup {showDownloadClientInput ?
advancedSettings={advancedSettings} <FormGroup
isAdvanced={true} advancedSettings={advancedSettings}
> isAdvanced={true}
<FormLabel>{translate('DownloadClient')}</FormLabel> >
<FormLabel>{translate('DownloadClient')}</FormLabel>
<FormInputGroup <FormInputGroup
type={inputTypes.DOWNLOAD_CLIENT_SELECT} type={inputTypes.DOWNLOAD_CLIENT_SELECT}
name="downloadClientId" name="downloadClientId"
helpText={translate('IndexerDownloadClientHelpText')} helpText={translate('IndexerDownloadClientHelpText')}
{...downloadClientId} {...downloadClientId}
includeAny={true} includeAny={true}
protocol={protocol.value} protocol={protocol.value}
onChange={onInputChange} onChange={onInputChange}
/> />
</FormGroup> </FormGroup> : null
}
<FormGroup> <FormGroup>
<FormLabel>{translate('Tags')}</FormLabel> <FormLabel>{translate('Tags')}</FormLabel>
@@ -241,6 +246,8 @@ EditIndexerModalContent.propTypes = {
isTesting: PropTypes.bool.isRequired, isTesting: PropTypes.bool.isRequired,
saveError: PropTypes.object, saveError: PropTypes.object,
item: PropTypes.object.isRequired, item: PropTypes.object.isRequired,
hasUsenetDownloadClients: PropTypes.bool.isRequired,
hasTorrentDownloadClients: PropTypes.bool.isRequired,
onInputChange: PropTypes.func.isRequired, onInputChange: PropTypes.func.isRequired,
onFieldChange: PropTypes.func.isRequired, onFieldChange: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired, onModalClose: PropTypes.func.isRequired,

View File

@@ -3,17 +3,23 @@ import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer } from 'Store/Actions/indexerActions'; import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer } from 'Store/Actions/indexerActions';
import { toggleAdvancedSettings } from 'Store/Actions/settingsActions'; import { fetchDownloadClients, toggleAdvancedSettings } from 'Store/Actions/settingsActions';
import createIndexerSchemaSelector from 'Store/Selectors/createIndexerSchemaSelector'; import createIndexerSchemaSelector from 'Store/Selectors/createIndexerSchemaSelector';
import EditIndexerModalContent from './EditIndexerModalContent'; import EditIndexerModalContent from './EditIndexerModalContent';
function createMapStateToProps() { function createMapStateToProps() {
return createSelector( return createSelector(
(state) => state.settings.advancedSettings, (state) => state.settings.advancedSettings,
(state) => state.settings.downloadClients,
createIndexerSchemaSelector(), createIndexerSchemaSelector(),
(advancedSettings, indexer) => { (advancedSettings, downloadClients, indexer) => {
const usenetDownloadClients = downloadClients.items.filter((downloadClient) => downloadClient.protocol === 'usenet');
const torrentDownloadClients = downloadClients.items.filter((downloadClient) => downloadClient.protocol === 'torrent');
return { return {
advancedSettings, advancedSettings,
hasUsenetDownloadClients: usenetDownloadClients.length > 0,
hasTorrentDownloadClients: torrentDownloadClients.length > 0,
...indexer ...indexer
}; };
} }
@@ -25,7 +31,8 @@ const mapDispatchToProps = {
setIndexerFieldValue, setIndexerFieldValue,
saveIndexer, saveIndexer,
testIndexer, testIndexer,
toggleAdvancedSettings toggleAdvancedSettings,
dispatchFetchDownloadClients: fetchDownloadClients
}; };
class EditIndexerModalContentConnector extends Component { class EditIndexerModalContentConnector extends Component {
@@ -33,6 +40,10 @@ class EditIndexerModalContentConnector extends Component {
// //
// Lifecycle // Lifecycle
componentDidMount() {
this.props.dispatchFetchDownloadClients();
}
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) { if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
this.props.onModalClose(); this.props.onModalClose();
@@ -90,7 +101,8 @@ EditIndexerModalContentConnector.propTypes = {
toggleAdvancedSettings: PropTypes.func.isRequired, toggleAdvancedSettings: PropTypes.func.isRequired,
saveIndexer: PropTypes.func.isRequired, saveIndexer: PropTypes.func.isRequired,
testIndexer: PropTypes.func.isRequired, testIndexer: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired onModalClose: PropTypes.func.isRequired,
dispatchFetchDownloadClients: PropTypes.func.isRequired
}; };
export default connect(createMapStateToProps, mapDispatchToProps)(EditIndexerModalContentConnector); export default connect(createMapStateToProps, mapDispatchToProps)(EditIndexerModalContentConnector);