changed strategy, it's sanitizers not validators

src/components/LoanDurationInput.jsx

@@ -1,31 +1,11 @@
 import BaseInput from "./BaseInput";
-import OnlyDigitsEventMiddleware from "../eventMiddlewares/OnlyDigitsEventMiddleware";
-import MinMaxEventMiddleware from "../eventMiddlewares/MinMaxEventMiddleware";
 
 const LoanDurationInput = ({ onChangeCallback, loanDuration }) => {
-  const decoratedChangeHandler = (event) => {
-    const digitDecoratedHandler = () => {
-      OnlyDigitsEventMiddleware({
-        event: event,
-        next: onChangeCallback,
-      });
-    };
-
-    const minMaxDecoratedHandler = MinMaxEventMiddleware({
-      event: event,
-      next: digitDecoratedHandler,
-      min: 1,
-      max: 360,
-    });
-
-    return minMaxDecoratedHandler;
-  };
-
   return (
     <BaseInput
       label="Duración"
       value={loanDuration}
-      onChangeCallback={decoratedChangeHandler}
+      onChangeCallback={onChangeCallback}
       suffix="Meses"
     />
   );

src/components/LoanInterestInput.jsx

@@ -1,30 +1,11 @@
 import BaseInput from "./BaseInput";
-import OnlyDigitsEventMiddleware from "../eventMiddlewares/OnlyDigitsEventMiddleware";
-import MinMaxEventMiddleware from "../eventMiddlewares/MinMaxEventMiddleware";
 
 const LoanInterestInput = ({ onChangeCallback, loanInterest }) => {
-  const decoratedChangeHandler = (event) => {
-    const digitDecoratedHandler = () => {
-      OnlyDigitsEventMiddleware({
-        event: event,
-        next: onChangeCallback,
-      });
-    };
-
-    const minMaxDecoratedHandler = MinMaxEventMiddleware({
-      event: event,
-      next: digitDecoratedHandler,
-      min: 0,
-    });
-
-    return minMaxDecoratedHandler;
-  };
-
   return (
     <BaseInput
       label="Interés (TIN)"
       value={loanInterest}
-      onChangeCallback={decoratedChangeHandler}
+      onChangeCallback={onChangeCallback}
       suffix="%"
     />
   );

src/components/LoanPanel.jsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import LoanPrincipalInput from "./LoanPrincipalInput";
 import LoanDurationInput from "./LoanDurationInput";
 import LoanInterestInput from "./LoanInterestInput";
+import sanitizeInputIntoRange from "../inputSanitizers/sanitizeInputIntoRange";
+import sanitizeInputAsOnlyDigits from "../inputSanitizers/sanitizeInputAsOnlyDigits";
 
 const LoanPanel = () => {
   const [hasBeenInteracted, setHasBeenInteracted] = useState(false);
@@ -11,17 +13,38 @@ const LoanPanel = () => {
 
   const handleLoanPrincipalChange = (event) => {
     setHasBeenInteracted(1);
-    setLoanPrincipal(event.target.value);
+    const inputValue = event.target.value;
+    const onlyDigitsValue = sanitizeInputAsOnlyDigits({ value: inputValue });
+    const inRangeValue = sanitizeInputIntoRange({
+      value: onlyDigitsValue,
+      min: 0,
+      max: 1_000_000,
+    });
+    setLoanPrincipal(inRangeValue);
   };
 
   const handleLoanDurationChange = (event) => {
     setHasBeenInteracted(1);
-    setLoanDuration(event.target.value);
+    const inputValue = event.target.value;
+    const onlyDigitsValue = sanitizeInputAsOnlyDigits({ value: inputValue });
+    const inRangeValue = sanitizeInputIntoRange({
+      value: onlyDigitsValue,
+      min: 1,
+      max: 360,
+    });
+    setLoanDuration(inRangeValue);
   };
 
   const handleLoanInterestChange = (event) => {
     setHasBeenInteracted(1);
-    setLoanInterest(event.target.value);
+    const inputValue = event.target.value;
+    const onlyDigitsValue = sanitizeInputAsOnlyDigits({ value: inputValue });
+    const inRangeValue = sanitizeInputIntoRange({
+      value: onlyDigitsValue,
+      min: 0,
+      max: 50,
+    });
+    setLoanInterest(inRangeValue);
   };
 
   return (

src/components/LoanPrincipalInput.jsx

@@ -1,31 +1,11 @@
 import BaseInput from "./BaseInput";
-import OnlyDigitsEventMiddleware from "../eventMiddlewares/OnlyDigitsEventMiddleware";
-import MinMaxEventMiddleware from "../eventMiddlewares/MinMaxEventMiddleware";
 
 const LoanPrincipalInput = ({ onChangeCallback, loanPrincipal }) => {
-  const decoratedChangeHandler = (event) => {
-    const digitDecoratedHandler = () => {
-      OnlyDigitsEventMiddleware({
-        event: event,
-        next: onChangeCallback,
-      });
-    };
-
-    const minMaxDecoratedHandler = MinMaxEventMiddleware({
-      event: event,
-      next: digitDecoratedHandler,
-      min: 0,
-      max: 100_000_000,
-    });
-
-    return minMaxDecoratedHandler;
-  };
-
   return (
     <BaseInput
       label="Capital prestado"
       value={loanPrincipal}
-      onChangeCallback={decoratedChangeHandler}
+      onChangeCallback={onChangeCallback}
       suffix="€"
       inputWidth="w-[120px]"
       placeholder="1000"

src/eventMiddlewares/MinMaxEventMiddleware.js

@@ -1,26 +0,0 @@
-const MinMaxEventMiddleware = ({ event, next, min = null, max = null }) => {
-  const valueNumber = Number(event.target.value);
-
-  if ((min || min === 0) && max) {
-    if (min <= valueNumber && valueNumber <= max) {
-      next(event);
-    }
-    return;
-  }
-
-  if (min || min === 0) {
-    if (min <= valueNumber) {
-      next(event);
-    }
-    return;
-  }
-
-  if (max) {
-    if (valueNumber <= max) {
-      next(event);
-    }
-    return;
-  }
-};
-
-export default MinMaxEventMiddleware;

src/eventMiddlewares/OnlyDigitsEventMiddleware.js

@@ -1,7 +0,0 @@
-const OnlyDigitsEventMiddleware = ({ event, next }) => {
-  const digitsOnly = event.target.value.replace(/\D/g, "");
-  event.target.value = digitsOnly;
-  next(event);
-};
-
-export default OnlyDigitsEventMiddleware;

src/inputSanitizers/sanitizeInputAsOnlyDigits.js

@@ -0,0 +1,6 @@
+const sanitizeInputAsOnlyDigits = ({ value }) => {
+  const digitsOnly = value.replace(/\D/g, "");
+  return digitsOnly;
+};
+
+export default sanitizeInputAsOnlyDigits;

src/inputSanitizers/sanitizeInputIntoRange.js

@@ -0,0 +1,15 @@
+const sanitizeInputIntoRange = ({ value, min = null, max = null }) => {
+  const valueNumber = Number(value);
+
+  if (min && valueNumber < min) {
+    return min;
+  }
+
+  if (max && valueNumber > max) {
+    return max;
+  }
+
+  return valueNumber;
+};
+
+export default sanitizeInputIntoRange;