fix quantity inputs allowing unacceptable values (#334)

* fix quantity inputs allowing unacceptable values
jeremyckahn · Oct 9, 2022 · 600d29f · 600d29f
1 parent d6bc3a4
commit 600d29f
Showing 1 changed file with 54 additions and 34 deletions.
diff --git a/src/components/QuantityInput/QuantityInput.js b/src/components/QuantityInput/QuantityInput.js
@@ -66,41 +66,61 @@ const QuantityInput = ({
   maxQuantity,
   setQuantity,
   value,
-}) => (
-  <div className="QuantityInput">
-    <QuantityTextInput
-      {...{ handleSubmit, handleUpdateNumber, maxQuantity, value }}
-    />
-    <span className="quantity">
-      /{' '}
-      <AnimatedNumber {...{ number: maxQuantity, formatter: integerString }} />
-    </span>
-    <div className="number-nudger-container">
-      <Fab
-        disabled={!value}
-        {...{
-          'aria-label': 'Increment',
-          color: 'primary',
-          onClick: () => setQuantity(++value > maxQuantity ? 1 : value),
-          size: 'small',
-        }}
-      >
-        <KeyboardArrowUp />
-      </Fab>
-      <Fab
-        disabled={!value}
-        {...{
-          'aria-label': 'Decrement',
-          color: 'primary',
-          onClick: () => setQuantity(--value === 0 ? maxQuantity : value),
-          size: 'small',
-        }}
-      >
-        <KeyboardArrowDown />
-      </Fab>
+}) => {
+  const decrementQuantity = () => {
+    let newValue = value - 1
+    if (newValue === 0) {
+      newValue = maxQuantity
+    }
+    setQuantity(newValue)
+  }
+
+  const incrementQuantity = () => {
+    let newValue = value + 1
+    if (newValue > maxQuantity) {
+      newValue = 1
+    }
+    setQuantity(newValue)
+  }
+
+  return (
+    <div className="QuantityInput">
+      <QuantityTextInput
+        {...{ handleSubmit, handleUpdateNumber, maxQuantity, value }}
+      />
+      <span className="quantity">
+        /{' '}
+        <AnimatedNumber
+          {...{ number: maxQuantity, formatter: integerString }}
+        />
+      </span>
+      <div className="number-nudger-container">
+        <Fab
+          disabled={!value}
+          {...{
+            'aria-label': 'Increment',
+            color: 'primary',
+            onClick: incrementQuantity,
+            size: 'small',
+          }}
+        >
+          <KeyboardArrowUp />
+        </Fab>
+        <Fab
+          disabled={!value}
+          {...{
+            'aria-label': 'Decrement',
+            color: 'primary',
+            onClick: decrementQuantity,
+            size: 'small',
+          }}
+        >
+          <KeyboardArrowDown />
+        </Fab>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 QuantityInput.propTypes = {
   handleSubmit: func.isRequired,