76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
import RetryLogin from "@/components/icons/RetryLogin";
|
|
import { changeNumToDefault } from "@/helper";
|
|
import { request } from "@/services/response";
|
|
import { Button } from "@mui/material";
|
|
const time_resend_code = 120;
|
|
|
|
function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
|
|
const handleTimer = () => {
|
|
setTimer("loading");
|
|
setTimeout(() => {
|
|
setTimer(time_resend_code);
|
|
let timePresent = time_resend_code;
|
|
const timerInterval = setInterval(() => {
|
|
timePresent--;
|
|
setTimer(timePresent);
|
|
|
|
!timePresent && clearInterval(timerInterval);
|
|
}, 1000);
|
|
}, 1000);
|
|
};
|
|
|
|
const rotateIcon = () => {
|
|
retryIcon.current.classList.add("retry-icon");
|
|
setTimeout(() => {
|
|
retryIcon.current && retryIcon.current.classList.remove("retry-icon");
|
|
}, 1000);
|
|
};
|
|
|
|
const handleReq = () => {
|
|
rotateIcon();
|
|
const interval = setInterval(() => {
|
|
rotateIcon();
|
|
}, 1200);
|
|
request
|
|
.sendCode(changeNumToDefault(num), "")
|
|
.then((response) => {
|
|
clearInterval(interval);
|
|
if (response.uuid) {
|
|
setUuid(response.uuid);
|
|
handleTimer();
|
|
}
|
|
})
|
|
.catch(() => clearInterval(interval));
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
|
|
disabled={typeof timer === "number" && timer !== 0}
|
|
onClick={() => {
|
|
if (!timer && timer !== "loading") {
|
|
// handleTimer();
|
|
handleReq();
|
|
}
|
|
}}
|
|
>
|
|
{timer && timer !== "loading" ? (
|
|
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
|
{timer} ثانیه
|
|
</p>
|
|
) : (
|
|
<>
|
|
<div ref={retryIcon}>
|
|
<RetryLogin />
|
|
</div>
|
|
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
|
دریافت مجدد کد
|
|
</p>
|
|
</>
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default Recode;
|