Get default value from query params + repeating code

Question

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);
    }
};

I was little refactor, but still there is space to improve, for any help I will be so glad. — Paul
– Paul, Commented Mar 23, 2021 at 15:33

Drew Reese · Accepted Answer · 2021-04-24 05:36:52Z

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);
  }
};

Stack Exchange Network

Get default value from query params + repeating code

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Get default value from query params + repeating code

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions