duration sanitized

src/components/LoanDurationInput.jsx

@@ -1,12 +1,34 @@
 import BaseInput from "./BaseInput";
+import OnlyDigitsEventMiddleware from "../eventMiddlewares/OnlyDigitsEventMiddleware";
+import MinMaxEventMiddleware from "../eventMiddlewares/MinMaxEventMiddleware";
 
-const LoanDurationInput = ({ onChangeCallback, loanDuration }) => (
+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={onChangeCallback}
+      onChangeCallback={decoratedChangeHandler}
       suffix="Meses"
     />
   );
+};
 
 export default LoanDurationInput;