From f678375633e0c1fe0f88c10c77817a77b2eea484 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 12 Feb 2025 16:00:41 +0200
Subject: [PATCH] refactor(NumberInput): apply suggested improvements

---
 src/components/NumberInput/NumberInput.tsx | 52 ++++++++--------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/src/components/NumberInput/NumberInput.tsx b/src/components/NumberInput/NumberInput.tsx
index 38433d874..457db28b8 100644
--- a/src/components/NumberInput/NumberInput.tsx
+++ b/src/components/NumberInput/NumberInput.tsx
@@ -31,52 +31,38 @@ const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue, showBut
         }
     }, [props.onKeyDown, props.onSubmit]);
 
+    const updateValueAndNotify = (valueAsNumber: number) => {
+        setValue(valueAsNumber);
+        onUpdate?.(valueAsNumber);
+    };
+
     const handleIncrease = () => {
-        const { max } = props;
-        if (max !== undefined) {
-            return setValue((prevVal) => {
-                const value = prevVal || 0;
-                return value + 1 > max ? max : value + 1;
-            });
+        if (props.max !== undefined) {
+            updateValueAndNotify(Math.min(props.max, (value || 0) + 1));
+            return;
         }
-        setValue((prevVal) => {
-            const value = prevVal || 0;
-            return value + 1;
-        });
+        updateValueAndNotify((value || 0) + 1);
     };
 
     const handleDecrease = () => {
-        const { min } = props;
-        if (min !== undefined) {
-            return setValue((prevVal) => {
-                const value = prevVal || 0;
-                return value - 1 < min ? min : value - 1;
-            });
+        if (props.min !== undefined) {
+            updateValueAndNotify(Math.max(props.min, (value || 0) - 1));
+            return;
         }
-        setValue((prevVal) => {
-            const value = prevVal || 0;
-            return value - 1;
-        });
+        updateValueAndNotify((value || 0) - 1);
     };
 
-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleChange = ({ target: { valueAsNumber }}: ChangeEvent<HTMLInputElement>) => {
         const min = props.min || 0;
-        let newValue = event.target.valueAsNumber;
-        if (newValue && newValue < min) {
-            newValue = min;
+        if (valueAsNumber && valueAsNumber < min) {
+            valueAsNumber = min;
         }
-        if (props.max !== undefined && newValue && newValue > props.max) {
-            newValue = props.max;
+        if (props.max !== undefined && valueAsNumber && valueAsNumber > props.max) {
+            valueAsNumber = props.max;
         }
-        setValue(newValue);
+        updateValueAndNotify(valueAsNumber);
     };
 
-    useEffect(() => {
-        if (typeof onUpdate === 'function') {
-            onUpdate(value);
-        }
-    }, [value]);
-
     return (
         <div className={classnames(props.containerClassName, styles['number-input'])}>
             {