amam/fix_duration_error

src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx

@@ -6,6 +6,7 @@ import Dropdown                       from 'App/Components/Form/DropDown';
 import ButtonToggleMenu               from 'App/Components/Form/ButtonToggleMenu';
 import InputField                     from 'App/Components/Form/InputField';
 import RangeSlider                    from 'App/Components/Form/RangeSlider';
+import { connect }                    from 'Stores/connect';
 import { hasIntradayDurationUnit }    from 'Stores/Modules/Trading/Helpers/duration';
 import { toMoment }                   from 'Utils/Date';
 import TradingDatePicker              from '../../DatePicker';
@@ -27,6 +28,7 @@ const AdvancedDuration = ({
     server_time,
     shared_input_props,
     start_date,
+    validation_errors,
 }) => {
     let is_24_hours_contract = false;
 
@@ -88,6 +90,7 @@ const AdvancedDuration = ({
                         { (advanced_duration_unit !== 't' && advanced_duration_unit !== 'd') &&
                             <InputField
                                 classNameInput='trade-container__input'
+                                error_messages={validation_errors.duration}
                                 label={duration_units_list.length === 1 ? duration_units_list[0].text : null}
                                 name='duration'
                                 value={getDurationFromUnit(advanced_duration_unit)}
@@ -139,6 +142,11 @@ AdvancedDuration.propTypes = {
         PropTypes.number,
         PropTypes.string,
     ]),
+    validation_errors: PropTypes.object,
 };
 
-export default AdvancedDuration;
+export default connect(
+    ({ modules }) => ({
+        validation_errors: modules.trade.validation_errors,
+    })
+)(AdvancedDuration);

src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx

@@ -2,9 +2,15 @@ import PropTypes                      from 'prop-types';
 import React                          from 'react';
 import { PropTypes as MobxPropTypes } from 'mobx-react';
 import { connect }                    from 'Stores/connect';
+import { convertDurationLimit }       from 'Stores/Modules/Trading/Helpers/duration';
 import Duration                       from './duration.jsx';
 
 class DurationWrapper extends React.Component {
+    state = {
+        min_value: 0,
+        max_value: 0,
+    }
+
     hasDurationUnit = (duration_unit) => {
         let duration_list = [...this.props.duration_units_list];
 
@@ -43,23 +49,52 @@ class DurationWrapper extends React.Component {
     }
 
     componentDidMount() {
-        const current_unit = this.props.is_advanced_duration ?
-            this.props.advanced_duration_unit : this.props.simple_duration_unit;
-        const current_duration = this.props.getDurationFromUnit(this.props.duration_unit);
-
-        if (this.props.duration_unit !== current_unit) {
-            this.props.onChangeUiStore({ name: `${this.props.is_advanced_duration ? 'advanced' : 'simple'}_duration_unit`, value: this.props.duration_unit });
+        const {
+            advanced_duration_unit,
+            advanced_expiry_type,
+            contract_expiry_type,
+            duration,
+            duration_min_max,
+            duration_unit,
+            expiry_type,
+            getDurationFromUnit,
+            is_advanced_duration,
+            onChange,
+            onChangeUiStore,
+            simple_duration_unit,
+        } = this.props;
+
+        const current_unit = is_advanced_duration ? advanced_duration_unit : simple_duration_unit;
+        const current_duration = getDurationFromUnit(current_unit);
+        const max_value = convertDurationLimit(+duration_min_max[contract_expiry_type].max, current_unit);
+        const min_value = convertDurationLimit(+duration_min_max[contract_expiry_type].min, current_unit);
+
+        if (duration_unit !== current_unit) {
+            onChangeUiStore({ name: `${is_advanced_duration ? 'advanced' : 'simple'}_duration_unit`, value: duration_unit });
         }
 
-        if (this.props.duration !== current_duration) {
-            this.props.onChangeUiStore({ name: `duration_${current_unit}`, value: this.props.duration });
+        if (duration !== current_duration) {
+            onChangeUiStore({ name: `duration_${current_unit}`, value: duration });
         }
 
-        if (this.props.expiry_type === 'endtime') this.handleEndTime();
+        if (expiry_type === 'endtime') this.handleEndTime();
 
         if (this.advancedHasWrongExpiry()) {
-            this.props.onChange({ target: { name: 'expiry_type', value: this.props.advanced_expiry_type } });
+            onChange({ target: { name: 'expiry_type', value: advanced_expiry_type } });
         }
+
+        if (current_duration < min_value) {
+            onChangeUiStore({ name: `duration_${current_unit}`, value: min_value });
+            onChange({ target: { name: 'duration', value: min_value } });
+        } else if (current_duration > max_value) {
+            onChangeUiStore({ name: `duration_${current_unit}`, value: max_value });
+            onChange({ target: { name: 'duration', value: max_value } });
+        }
+
+        this.setState({
+            min_value,
+            max_value,
+        });
     }
 
     // intercept changes to contract duration and check that trade_store and ui_store are aligned.
@@ -94,6 +129,7 @@ class DurationWrapper extends React.Component {
         return (
             <Duration
                 hasDurationUnit={this.hasDurationUnit}
+                {...this.state}
                 {...this.props}
             />
         );
@@ -150,9 +186,8 @@ DurationWrapper.propTypes = {
         PropTypes.number,
         PropTypes.string,
     ]),
-    start_time       : PropTypes.string,
-    symbol           : PropTypes.string,
-    validation_errors: PropTypes.object,
+    start_time: PropTypes.string,
+    symbol    : PropTypes.string,
 };
 
 export default connect(({ modules, ui }) => ({
@@ -174,6 +209,5 @@ export default connect(({ modules, ui }) => ({
     onChangeMultiple      : modules.trade.onChangeMultiple,
     simple_duration_unit  : ui.simple_duration_unit,
     start_date            : modules.trade.start_date,
-    validation_errors     : modules.trade.validation_errors,
     market_open_times     : modules.trade.market_open_times,
 }))(DurationWrapper);

src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration.jsx

@@ -5,7 +5,6 @@ import React, { Fragment }            from 'react';
 import { localize }                   from '_common/localize';
 import Fieldset                       from 'App/Components/Form/fieldset.jsx';
 import RangeSlider                    from 'App/Components/Form/RangeSlider';
-import { convertDurationLimit }       from 'Stores/Modules/Trading/Helpers/duration';
 import { toMoment }                   from 'Utils/Date';
 import DurationToggle                 from './duration-toggle.jsx';
 import AdvancedDuration               from './advanced-duration.jsx';
@@ -14,11 +13,9 @@ import SimpleDuration                 from './simple-duration.jsx';
 const Duration = ({
     advanced_duration_unit,
     advanced_expiry_type,
-    contract_expiry_type,
     duration,
     duration_unit,
     duration_units_list,
-    duration_min_max,
     duration_t,
     expiry_date,
     expiry_time,
@@ -27,13 +24,14 @@ const Duration = ({
     hasDurationUnit,
     is_advanced_duration,
     is_minimized,
+    min_value,
+    max_value,
     onChange,
     onChangeUiStore,
     onChangeMultiple,
     simple_duration_unit,
     server_time,
     start_date,
-    validation_errors,
     market_open_times,
 }) => {
     const expiry_list = [
@@ -110,12 +108,6 @@ const Duration = ({
         onChangeMultiple({ ...new_trade_store_values });
     };
 
-    let max_value, min_value;
-    if (duration_min_max[contract_expiry_type]) {
-        max_value = convertDurationLimit(+duration_min_max[contract_expiry_type].max, duration_unit);
-        min_value = convertDurationLimit(+duration_min_max[contract_expiry_type].min, duration_unit);
-    }
-
     const props = {
         shared_input: {
             max_value,
@@ -125,7 +117,6 @@ const Duration = ({
         number_input: {
             type            : 'number',
             is_incrementable: true,
-            error_messages  : validation_errors.duration || [],
         },
     };
     // e.g. digit contracts only has range slider - does not have toggle between advanced / simple
@@ -188,13 +179,11 @@ const Duration = ({
 Duration.propTypes = {
     advanced_duration_unit: PropTypes.string,
     advanced_expiry_type  : PropTypes.string,
-    contract_expiry_type  : PropTypes.string,
     duration              : PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string,
     ]),
-    duration_min_max: PropTypes.object,
-    duration_t      : PropTypes.oneOfType([
+    duration_t: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string,
     ]),
@@ -211,6 +200,8 @@ Duration.propTypes = {
     is_advanced_duration: PropTypes.bool,
     is_minimized        : PropTypes.bool,
     market_open_times   : PropTypes.array,
+    max_value           : PropTypes.number,
+    min_value           : PropTypes.number,
     onChange            : PropTypes.func,
     onChangeUiStore     : PropTypes.func,
     server_time         : PropTypes.object,

src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/simple-duration.jsx

@@ -4,6 +4,7 @@ import React, { Fragment }            from 'react';
 import ButtonToggleMenu               from 'App/Components/Form/ButtonToggleMenu';
 import InputField                     from 'App/Components/Form/InputField';
 import RangeSlider                    from 'App/Components/Form/RangeSlider';
+import { connect }                    from 'Stores/connect';
 import TradingDatePicker              from '../../DatePicker';
 
 const SimpleDuration = ({
@@ -14,6 +15,7 @@ const SimpleDuration = ({
     number_input_props,
     shared_input_props,
     simple_duration_unit,
+    validation_errors,
 }) => {
     const filterMinutesAndTicks = (arr) => {
         const filtered_arr = arr.filter(du => du.value === 't' || du.value === 'm');
@@ -52,6 +54,7 @@ const SimpleDuration = ({
             { (simple_duration_unit !== 't' && simple_duration_unit !== 'd') &&
                 <InputField
                     classNameInput='trade-container__input'
+                    error_messages={validation_errors.duration}
                     name='duration'
                     label={has_label ? duration_units_list[0].text : null}
                     value={getDurationFromUnit(simple_duration_unit)}
@@ -74,6 +77,11 @@ SimpleDuration.propTypes = {
     number_input_props  : PropTypes.object,
     shared_input_props  : PropTypes.object,
     simple_duration_unit: PropTypes.string,
+    validation_errors   : PropTypes.object,
 };
 
-export default SimpleDuration;
+export default connect(
+    ({ modules }) => ({
+        validation_errors: modules.trade.validation_errors,
+    })
+)(SimpleDuration);