fun with middlewares

src/components/BaseInput.jsx

@@ -4,6 +4,7 @@ const BaseInput = ({
   onChangeCallback,
   placeholder = "",
   suffix,
+  inputMode,
   inputWidth = "w-[60px]",
   inputClassName = "",
 }) => {

src/components/LoanPrincipalInput.jsx

@@ -1,15 +1,37 @@
 import BaseInput from "./BaseInput";
+import OnlyDigitsEventMiddleware from "../eventMiddlewares/OnlyDigitsEventMiddleware";
+import MinMaxEventMiddleware from "../eventMiddlewares/MinMaxEventMiddleware";
 
-const LoanPrincipalInput = ({ onChangeCallback, loanPrincipal }) => (
-  <BaseInput
-    label="Capital prestado"
-    value={loanPrincipal}
-    onChangeCallback={onChangeCallback}
-    suffix="€"
-    inputWidth="w-[120px]"
-    placeholder="1000"
-    inputClassName="placeholder-gray-400"
-  />
-);
+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}
+      suffix="€"
+      inputWidth="w-[120px]"
+      placeholder="1000"
+      inputClassName="!placeholder-gray-400"
+    />
+  );
+};
 
 export default LoanPrincipalInput;

src/eventMiddlewares/MinMaxEventMiddleware.js

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

src/eventMiddlewares/OnlyDigitsEventMiddleware.js

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