diff --git a/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.jsx b/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.jsx index 32b59e041c94..6e421b1f24a7 100644 --- a/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.jsx +++ b/packages/bot-web-ui/src/components/quick-strategy/quick-strategy.jsx @@ -34,12 +34,12 @@ const InputSize = ({ setCurrentFocus, touched, is_mobile, - getFieldNames, - toggleValuesFlags, - setValidationErrors, - validateQuickStrategy, - values, }) => { + const field_name = Object.freeze({ + 0: 'quick-strategy__size', + 1: 'alembert-unit', + 2: 'oscar-unit', + }); const input_name = Object.freeze({ 0: 'input_size', 1: 'input_alembert_unit', @@ -47,7 +47,7 @@ const InputSize = ({ }); return ( - + {({ field }) => ( setCurrentFocus(e.currentTarget.name)} - onBlur={e => { - setCurrentFocus(null); - toggleValuesFlags(e.currentTarget.name); - setValidationErrors(validateQuickStrategy(values)); - }} + onBlur={() => setCurrentFocus(null)} placeholder='2' trailing_icon={ { - const [validation_errors, setValidationErrors] = React.useState({}); - let formValues = {}; - React.useEffect(() => { - // Check values in favour of isValid, this is a hack to persist validation through tab switching. - setValidationErrors(validateQuickStrategy(formValues)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - return ( - - {({ errors, handleChange, values, isSubmitting, setFieldValue, touched, submitForm }) => { - formValues = values; - const is_valid = Object.keys(validation_errors).length === 0; - const is_submit_enabled = !isSubmitting && is_valid; +}) => ( + + {({ errors, handleChange, values, isSubmitting, setFieldValue, touched, submitForm }) => { + // Check values in favour of isValid, this is a hack to persist validation through tab switching. - return ( -
- + const validation_errors = validateQuickStrategy(values); + const is_valid = Object.keys(validation_errors).length === 0; + + const is_submit_enabled = !isSubmitting && is_valid; + + return ( + + +
+
{description}
+
+ + {({ field }) => ( + <> + {is_mobile ? ( + { + onChangeDropdownItem('symbol', e.target.value, setFieldValue); + }} + /> + ) : ( + { + onHideDropdownList('symbol', values[field.name], setFieldValue); + }} + onItemSelection={({ value }) => { + onChangeDropdownItem('symbol', value, setFieldValue); + }} + onScrollStop={() => onScrollStopDropdownList('symbol')} + leading_icon={ + selected_symbol.value && ( + + ) + } + /> + )} + + )} + +
+
+ + {({ field }) => ( + <> + {is_mobile ? ( + { + onChangeDropdownItem( + 'trade-type', + e.target.value, + setFieldValue + ); + }} + /> + ) : ( + { + onHideDropdownList( + 'trade-type', + values[field.name], + setFieldValue + ); + }} + onItemSelection={({ value }) => { + onChangeDropdownItem('trade-type', value, setFieldValue); + }} + onScrollStop={() => onScrollStopDropdownList('trade-type')} + leading_icon={ + selected_trade_type.icon && ( + + + + + ) + } + /> + )} + + )} + +
-
{description}
-
- - {({ field }) => ( - <> - {is_mobile ? ( - { - onChangeDropdownItem( - 'symbol', - e.target.value, - setFieldValue - ); - }} - /> - ) : ( - { - onHideDropdownList( - 'symbol', - values[field.name], - setFieldValue - ); - }} - onItemSelection={({ value }) => { - onChangeDropdownItem('symbol', value, setFieldValue); - }} - onScrollStop={() => onScrollStopDropdownList('symbol')} - leading_icon={ - selected_symbol.value && ( - - ) - } - /> - )} - - )} - -
-
- - {({ field }) => ( - <> - {is_mobile ? ( - { - onChangeDropdownItem( - 'trade-type', - e.target.value, - setFieldValue - ); - }} - /> - ) : ( - { - onHideDropdownList( - 'trade-type', - values[field.name], - setFieldValue - ); - }} - onItemSelection={({ value }) => { - onChangeDropdownItem('trade-type', value, setFieldValue); - }} - onScrollStop={() => onScrollStopDropdownList('trade-type')} - leading_icon={ - selected_trade_type.icon && ( - - - - - ) - } - /> - )} - - )} - -
-
- - {({ field }) => ( - <> - {is_mobile ? ( - { - onChangeDropdownItem( - 'duration-unit', - e.target.value, - setFieldValue - ); - }} - /> - ) : ( - { - onHideDropdownList( - 'duration-unit', - values[field.name], - setFieldValue - ); - }} - onItemSelection={({ value }) => { - onChangeDropdownItem('duration-unit', value, setFieldValue); - }} - onScrollStop={() => onScrollStopDropdownList('duration-unit')} - /> - )} - - )} - - - {({ field }) => ( - { - handleChange(e); - onChangeInputValue('input_duration_value', e); - }} - onFocus={e => setCurrentFocus(e.currentTarget.name)} - onBlur={e => { - setCurrentFocus(null); - toggleValuesFlags(e.currentTarget.name); - setValidationErrors(validateQuickStrategy(values)); - }} - placeholder='5' - trailing_icon={ - - - - } - /> - )} - -
-
- - {({ field }) => ( - { - handleChange(e); - onChangeInputValue('input_stake', e); - }} - onFocus={e => setCurrentFocus(e.currentTarget.name)} - onBlur={e => { - setCurrentFocus(null); - toggleValuesFlags(e.currentTarget.name); - setValidationErrors(validateQuickStrategy(values)); - }} - placeholder='10' - trailing_icon={ - - - - } - /> - )} - - - {({ field }) => ( - { - handleChange(e); - onChangeInputValue('input_loss', e); - }} - onFocus={e => { - setCurrentFocus(e.currentTarget.name); - toggleValuesFlags(e.currentTarget.name); - setValidationErrors(validateQuickStrategy(values)); - }} - onBlur={() => setCurrentFocus(null)} - placeholder='5000' - trailing_icon={ - - - - } - /> - )} - -
-
- + + {({ field }) => ( + <> + {is_mobile ? ( + { + onChangeDropdownItem( + 'duration-unit', + e.target.value, + setFieldValue + ); + }} + /> + ) : ( + { + onHideDropdownList( + 'duration-unit', + values[field.name], + setFieldValue + ); + }} + onItemSelection={({ value }) => { + onChangeDropdownItem('duration-unit', value, setFieldValue); + }} + onScrollStop={() => onScrollStopDropdownList('duration-unit')} + /> + )} + + )} + + + {({ field }) => ( + { + handleChange(e); + onChangeInputValue('input_duration_value', e); + }} + onFocus={e => setCurrentFocus(e.currentTarget.name)} + onBlur={() => setCurrentFocus(null)} + placeholder='5' + trailing_icon={ + + + + } + /> + )} + +
+
+ + {({ field }) => ( + { + handleChange(e); + onChangeInputValue('input_stake', e); + }} + onFocus={e => setCurrentFocus(e.currentTarget.name)} + onBlur={() => setCurrentFocus(null)} + placeholder='10' + trailing_icon={ + + + + } + /> + )} + + + {({ field }) => ( + { + handleChange(e); + onChangeInputValue('input_loss', e); + }} + onFocus={e => setCurrentFocus(e.currentTarget.name)} + onBlur={() => setCurrentFocus(null)} + placeholder='5000' + trailing_icon={ + + + + } + /> + )} + +
+
+ - - {({ field }) => ( - { - handleChange(e); - onChangeInputValue('input_profit', e); - }} - onFocus={e => { - setCurrentFocus(e.currentTarget.name); - toggleValuesFlags(e.currentTarget.name); - setValidationErrors(validateQuickStrategy(values)); - }} - onBlur={() => setCurrentFocus(null)} - placeholder='5000' - trailing_icon={ - - - - } - /> - )} - -
+ + {({ field }) => ( + { + handleChange(e); + onChangeInputValue('input_profit', e); + }} + onFocus={e => setCurrentFocus(e.currentTarget.name)} + onBlur={() => setCurrentFocus(null)} + placeholder='5000' + trailing_icon={ + + + + } + /> + )} +
- -
- - {!is_mobile && ( -
+ +
+ + {!is_mobile && (
- - ); - }} - - ); -}; + )} +
+ + ); + }} +
+); const MarketOption = ({ symbol }) => (
@@ -564,12 +509,10 @@ const ContentRenderer = props => { onHideDropdownList, onScrollStopDropdownList, validateQuickStrategy, - getFieldNames, selected_symbol, selected_trade_type, setCurrentFocus, selected_duration_unit, - toggleValuesFlags, } = props; const symbol_dropdown_options = symbol_dropdown .map(symbol => ({ @@ -603,7 +546,6 @@ const ContentRenderer = props => { onHideDropdownList={onHideDropdownList} onScrollStopDropdownList={onScrollStopDropdownList} validateQuickStrategy={validateQuickStrategy} - getFieldNames={getFieldNames} symbol_dropdown={symbol_dropdown_options} trade_type_dropdown={trade_type_dropdown_options} is_mobile={is_mobile} @@ -612,7 +554,6 @@ const ContentRenderer = props => { selected_duration_unit={selected_duration_unit} description={description} setCurrentFocus={setCurrentFocus} - toggleValuesFlags={toggleValuesFlags} />
); @@ -679,12 +620,10 @@ QuickStrategy.propTypes = { toggleStrategyModal: PropTypes.func, trade_type_dropdown: PropTypes.array, validateQuickStrategy: PropTypes.func, - getFieldNames: PropTypes.object, }; export default connect(({ run_panel, quick_strategy, ui }) => ({ active_index: quick_strategy.active_index, - toggleValuesFlags: quick_strategy.toggleValuesFlags, createStrategy: quick_strategy.createStrategy, duration_unit_dropdown: quick_strategy.duration_unit_dropdown, getSizeDesc: quick_strategy.getSizeDesc, @@ -708,6 +647,5 @@ export default connect(({ run_panel, quick_strategy, ui }) => ({ toggleStrategyModal: quick_strategy.toggleStrategyModal, trade_type_dropdown: quick_strategy.trade_type_dropdown, validateQuickStrategy: quick_strategy.validateQuickStrategy, - getFieldNames: quick_strategy.getFieldNames, setCurrentFocus: ui.setCurrentFocus, }))(QuickStrategy); diff --git a/packages/bot-web-ui/src/stores/quick-strategy-store.js b/packages/bot-web-ui/src/stores/quick-strategy-store.js index ce9951410d21..f023bbcfeb2c 100644 --- a/packages/bot-web-ui/src/stores/quick-strategy-store.js +++ b/packages/bot-web-ui/src/stores/quick-strategy-store.js @@ -26,7 +26,6 @@ export default class QuickStrategyStore { @observable symbol_dropdown = []; @observable trade_type_dropdown = []; @observable duration_unit_dropdown = []; - @observable values_flags = []; @computed get initial_values() { @@ -38,13 +37,15 @@ export default class QuickStrategyStore { this.getFieldValue(this.duration_unit_dropdown, this.selected_duration_unit.value) || '', 'quick-strategy__duration-value': this.input_duration_value || '', 'quick-strategy__stake': this.input_stake, - 'quick-strategy__size': this.input_size, - 'alembert-unit': this.input_alembert_unit, - 'oscar-unit': this.input_oscar_unit, + ...(this.active_index === 0 && { 'quick-strategy__size': this.input_size }), + ...(this.active_index === 1 && { 'alembert-unit': this.input_alembert_unit }), + ...(this.active_index === 2 && { 'oscar-unit': this.input_oscar_unit }), + 'quick-strategy__loss': this.input_loss, 'quick-strategy__profit': this.input_profit, }; storeSetting('quick_strategy', this.qs_cache); + return init; } @@ -177,13 +178,6 @@ export default class QuickStrategyStore { } } - @action.bound - toggleValuesFlags(value_flag) { - if (!this.values_flags.includes(value_flag)) { - this.values_flags.push(value_flag); - } - } - @action.bound async createStrategy({ button }) { const symbol = this.selected_symbol.value; @@ -434,20 +428,14 @@ export default class QuickStrategyStore { } @action.bound - validateQuickStrategy(current_form_values, should_ignore_empty = false) { - const values = { ...current_form_values }; - if (this.getFieldNames()) - Object.keys(this.getFieldNames()) - .filter(key => +key !== this.active_index) - .map(key => delete values[this.getFieldNames()[key]]); - + validateQuickStrategy(values, should_ignore_empty = false) { const errors = {}; const number_fields = [ 'quick-strategy__duration-value', 'quick-strategy__stake', - ...(values['quick-strategy__size'] ? ['quick-strategy__size'] : []), - ...(values['alembert-unit'] ? ['alembert-unit'] : []), - ...(values['oscar-unit'] ? ['oscar-unit'] : []), + ...(this.active_index === 0 ? ['quick-strategy__size'] : []), + ...(this.active_index === 1 ? ['alembert-unit'] : []), + ...(this.active_index === 2 ? ['oscar-unit'] : []), 'quick-strategy__profit', 'quick-strategy__loss', ]; @@ -458,7 +446,7 @@ export default class QuickStrategyStore { return; } - if (this.values_flags.includes(key) && number_fields.includes(key)) { + if (number_fields.includes(key)) { if (isNaN(value)) { errors[key] = localize('Must be a number'); } else if (value <= 0) { @@ -468,13 +456,13 @@ export default class QuickStrategyStore { } } - if (this.values_flags.includes(key) && value === '') { + if (value === '') { errors[key] = localize('Field cannot be empty'); } + if (key === 'quick-strategy__size' && values[key] < 2) { + errors[key] = localize('Value must be higher than 2'); + } }); - if (this.active_index === 0 && values['quick-strategy__size'] > 0 && values['quick-strategy__size'] < 2) { - errors['quick-strategy__size'] = localize('Value must be higher than 2'); - } const duration = this.duration_unit_dropdown.find(d => d.text === values['quick-strategy__duration-unit']); @@ -487,7 +475,6 @@ export default class QuickStrategyStore { errors['quick-strategy__duration-value'] = localize('Maximum duration: {{ max }}', { max }); } } - return errors; } @@ -554,12 +541,4 @@ export default class QuickStrategyStore { return list_obj?.text || ''; }; - - getFieldNames = () => { - return Object.freeze({ - 0: 'quick-strategy__size', - 1: 'alembert-unit', - 2: 'oscar-unit', - }); - }; }