From a4efd1fd93cb528a4da52ddb2448f7132dc037d4 Mon Sep 17 00:00:00 2001 From: counterweight Date: Fri, 23 May 2025 23:32:34 +0200 Subject: [PATCH] changed strategy, it's sanitizers not validators --- src/components/LoanDurationInput.jsx | 22 +------------- src/components/LoanInterestInput.jsx | 21 +------------- src/components/LoanPanel.jsx | 29 +++++++++++++++++-- src/components/LoanPrincipalInput.jsx | 22 +------------- src/eventMiddlewares/MinMaxEventMiddleware.js | 26 ----------------- .../OnlyDigitsEventMiddleware.js | 7 ----- .../sanitizeInputAsOnlyDigits.js | 6 ++++ src/inputSanitizers/sanitizeInputIntoRange.js | 15 ++++++++++ 8 files changed, 50 insertions(+), 98 deletions(-) delete mode 100644 src/eventMiddlewares/MinMaxEventMiddleware.js delete mode 100644 src/eventMiddlewares/OnlyDigitsEventMiddleware.js create mode 100644 src/inputSanitizers/sanitizeInputAsOnlyDigits.js create mode 100644 src/inputSanitizers/sanitizeInputIntoRange.js diff --git a/src/components/LoanDurationInput.jsx b/src/components/LoanDurationInput.jsx index ceb600a..f48eedb 100644 --- a/src/components/LoanDurationInput.jsx +++ b/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 ( ); diff --git a/src/components/LoanInterestInput.jsx b/src/components/LoanInterestInput.jsx index d15f9b8..3aba3f9 100644 --- a/src/components/LoanInterestInput.jsx +++ b/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 ( ); diff --git a/src/components/LoanPanel.jsx b/src/components/LoanPanel.jsx index 32e0e11..62dbee0 100644 --- a/src/components/LoanPanel.jsx +++ b/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 ( diff --git a/src/components/LoanPrincipalInput.jsx b/src/components/LoanPrincipalInput.jsx index 68431fd..04b201c 100644 --- a/src/components/LoanPrincipalInput.jsx +++ b/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 ( { - 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; diff --git a/src/eventMiddlewares/OnlyDigitsEventMiddleware.js b/src/eventMiddlewares/OnlyDigitsEventMiddleware.js deleted file mode 100644 index 3e08635..0000000 --- a/src/eventMiddlewares/OnlyDigitsEventMiddleware.js +++ /dev/null @@ -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; diff --git a/src/inputSanitizers/sanitizeInputAsOnlyDigits.js b/src/inputSanitizers/sanitizeInputAsOnlyDigits.js new file mode 100644 index 0000000..88ba4c0 --- /dev/null +++ b/src/inputSanitizers/sanitizeInputAsOnlyDigits.js @@ -0,0 +1,6 @@ +const sanitizeInputAsOnlyDigits = ({ value }) => { + const digitsOnly = value.replace(/\D/g, ""); + return digitsOnly; +}; + +export default sanitizeInputAsOnlyDigits; diff --git a/src/inputSanitizers/sanitizeInputIntoRange.js b/src/inputSanitizers/sanitizeInputIntoRange.js new file mode 100644 index 0000000..94321ab --- /dev/null +++ b/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;