mardi 9 mars 2021

Filtering the balance with a low value and hide empty checkbox

I am using React + Typescript. I would like to ask you for help in filtering. I have two filters

hide accounts with low value

hide empty account

Low value set as props by user <"thresholdLowValue" and User can define this threshold as for example number 3. And filter Hide empty account <0. Filtering after checking the checkbox works, but there is one case when the hide empty account filter overwrites the Hide accounts with low value filter.

After the combination checked = true: Hide accounts wit low value && hide empty account = only hide empty account works.

const [preparedItems, setPreparedItems] = useState(items);
const [checkboxState, setCheckboxState] = React.useState({
    lowValue: false,
    emptyValue: false
  });

const filterChange = (value): void => {
    if (value.lowValue) {
      setPreparedItems(
        items.filter(item => item.balance >= (thresholdLowValue || 0))
      );
    } else {
      if (value.emptyValue) {
        setPreparedItems(items.filter(item => item.balance > 0));
      } else {
        setPreparedItems(items);
      }
    }
  };

const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    event.stopPropagation();
    filterChange({[event.target.name]: event.target.checked})
    setCheckboxState({
      ...checkboxState,
      [event.target.name]: event.target.checked
    })
  };
<FormGroup>
            <FormControlLabel
              control={(
                <Checkbox
                  checked={checkboxState.lowValue}
                  onChange={handleChange}
                  name="lowValue"
                  color="primary"
                />
              )}
              label="Hide accounts with low value"
            />
            <FormControlLabel
              control={(
                <Checkbox
                  checked={checkboxState.emptyValue}
                  disableRipple
                  onChange={handleChange}
                  name="emptyValue"
                  color="primary"
                />
              )}
              label="Hide empty account"
            />
       </FormGroup>

Could you help me with this behaviour. Maybe you have a better solution?




Aucun commentaire:

Enregistrer un commentaire