From 600d29fc3570d8cbfc2e728087ba58c58d2bcf2f Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Sun, 9 Oct 2022 11:49:00 -0700
Subject: [PATCH] fix quantity inputs allowing unacceptable values (#334)

* fix quantity inputs allowing unacceptable values
---
 src/components/QuantityInput/QuantityInput.js | 88 ++++++++++++-------
 1 file changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/components/QuantityInput/QuantityInput.js b/src/components/QuantityInput/QuantityInput.js
index aaa723fcf..1660354df 100644
--- 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,