88 lines
2.8 KiB
JavaScript
88 lines
2.8 KiB
JavaScript
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);
|
|
const [loanPrincipal, setLoanPrincipal] = useState("");
|
|
const [loanDuration, setLoanDuration] = useState(12);
|
|
const [loanInterest, setLoanInterest] = useState(5);
|
|
|
|
const sanitizeInputToIntWithinRange = ({ value, min, max }) => {
|
|
const onlyDigitsValue = sanitizeInputAsOnlyDigits({ value });
|
|
const inRangeValue = sanitizeInputIntoRange({
|
|
value: onlyDigitsValue,
|
|
min: min,
|
|
max: max,
|
|
});
|
|
|
|
return inRangeValue;
|
|
};
|
|
|
|
const handleLoanPrincipalChange = (event) => {
|
|
setHasBeenInteracted(1);
|
|
const inputValue = event.target.value;
|
|
const sanitizedInputValue = sanitizeInputToIntWithinRange({
|
|
value: inputValue,
|
|
min: 0,
|
|
max: 1_000_000,
|
|
});
|
|
setLoanPrincipal(sanitizedInputValue);
|
|
};
|
|
|
|
const handleLoanDurationChange = (event) => {
|
|
setHasBeenInteracted(1);
|
|
const inputValue = event.target.value;
|
|
const sanitizedInputValue = sanitizeInputToIntWithinRange({
|
|
value: inputValue,
|
|
min: 1,
|
|
max: 360,
|
|
});
|
|
setLoanDuration(sanitizedInputValue);
|
|
};
|
|
|
|
const handleLoanInterestChange = (event) => {
|
|
setHasBeenInteracted(1);
|
|
const inputValue = event.target.value;
|
|
const sanitizedInputValue = sanitizeInputToIntWithinRange({
|
|
value: inputValue,
|
|
min: 0,
|
|
max: 50,
|
|
});
|
|
setLoanInterest(sanitizedInputValue);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
|
|
<form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
|
|
<LoanPrincipalInput
|
|
onChangeCallback={handleLoanPrincipalChange}
|
|
loanPrincipal={loanPrincipal}
|
|
/>
|
|
<LoanDurationInput
|
|
onChangeCallback={handleLoanDurationChange}
|
|
loanDuration={loanDuration}
|
|
/>
|
|
<LoanInterestInput
|
|
onChangeCallback={handleLoanInterestChange}
|
|
loanInterest={loanInterest}
|
|
/>
|
|
</form>
|
|
{hasBeenInteracted ? (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
|
|
<p className="font-light">
|
|
Calculando los detalles del préstamo...
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LoanPanel;
|