feat: add validation message to cost filter

Closes #48
agrc · Jul 22, 2022 · d37686a · d37686a
1 parent 2e41ec5
commit d37686a
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/components/AdvancedControls.jsx b/src/components/AdvancedControls.jsx
@@ -2,7 +2,7 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import NumberFormat from 'react-number-format';
-import { Button, Col, Collapse, Container, Input, Label, Row } from 'reactstrap';
+import { Button, Col, Collapse, Container, FormFeedback, Input, Label, Row } from 'reactstrap';
 import config from '../services/config';
 import Checkbox from './Checkbox';
 import InfoPopup from './InfoPopup';
@@ -34,6 +34,9 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
     ({ value }) =>
       dispatch({ type: 'cost', payload: value, meta: costType });
 
+  const costIsValid =
+    !state.cost.min || !state.cost.max || parseInt(state.cost.max, 10) >= parseInt(state.cost.min, 10);
+
   return (
     <>
       <div className="d-flex justify-content-center mt-2 mb-1">
@@ -218,6 +221,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                 prefix="$"
                 className="mb-1"
                 onValueChange={getHandleCostChange('min')}
+                invalid={!costIsValid}
               />
             </Col>
             <Col>
@@ -231,7 +235,9 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                 prefix="$"
                 className="mb-1"
                 onValueChange={getHandleCostChange('max')}
+                invalid={!costIsValid}
               />
+              <FormFeedback>max should be less than min</FormFeedback>
             </Col>
           </Row>
         </Container>