3
\$\begingroup\$

The main goal of this task is to take values from the query parameter and put it in inputu. The first problem is that I don't know much about how to do it so that the code doesn't repeat itself and I don't know how specifically I could improve the code so that multiple things don't happen again. Next, the function should contain a simple validation of min max to prevent them from entering silliness from the query parameter.

getFromQuery = props => {
    const { limitValues } = props;
    const parsed = queryString.parse(location.search);

    const validation = (value, min, max) => {
        if (value < min) {
            return min;
        } else if (value > max) {
            return max;
        }
        return value;
    };

    if (parsed.price) {
        const defautPrice = limitValues.find(item => item.sliderType === 'PRICE');
        props.inputs.PRICE = validation(parsed.price, defautPrice.minValue, defautPrice.maxValue);
    }

    if (parsed.savings) {
        const defautSavings = limitValues.find(item => item.sliderType === 'SAVINGS');
        props.inputs.SAVINGS = validation(parsed.savings, defautSavings.minValue, defautSavings.maxValue);
    }

    if (parsed.maturity) {
        const defautMaturity = limitValues.find(item => item.sliderType === 'MATURITY');
        props.inputs.MATURITY = validation(parsed.maturity, defautMaturity.minValue, defautMaturity.maxValue);
    }
};
\$\endgroup\$
1
  • \$\begingroup\$ I was little refactor, but still there is space to improve, for any help I will be so glad. \$\endgroup\$
    – Paul
    Mar 23 at 15:33
2
\$\begingroup\$

The validation function:

const validation = (value, min, max) => {
    if (value < min) {
        return min;
    } else if (value > max) {
        return max;
    }
    return value;
};

Bounds the value between some minimum and maximum, can can be simplified to the following:

const validation = (value, min, max) => Math.max(min, Math.min(value, max));

For the rest, each "case" abstractly searches the limitValues array for a matching object by slider type, and then bounds the input value for that case. A general purpose utility could look like the following:

const processField = (key, fieldValue) => {
  const val = limitValues.find(({ sliderType }) => sliderType === key);
  props.inputs[key] = val
    ? validation(fieldValue, val.minValue, val.maxValue)
    : fieldValue;
};

Since Array.prototype.find can potentially return undefined for no matches, you should guard check this. the second line uses a ternary to check if a defined value was returned from the find and returns the bounded field value otherwise returns the unbounded field value.

Here is your updated example code:

const validation = (value, min, max) => Math.max(min, Math.min(value, max));

...

getFromQuery = (props) => {
  const { limitValues } = props;
  const parsed = queryString.parse(location.search);

  const processField = (key, fieldValue) => {
    const val = limitValues.find(({ sliderType }) => sliderType === key);
    // Mutates props object
    props.inputs[key] = val
      ? validation(fieldValue, val.minValue, val.maxValue)
      : fieldValue;
  };

  if (parsed.price) {
    processField("PRICE", parsed.price);
  }

  if (parsed.savings) {
    processField("SAVINGS", parsed.savings);
  }

  if (parsed.maturity) {
    processField("MATURITY", parsed.maturity);
  }
};
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.