diff --git a/components/ResendVerificationCode/ResendVerificationCode.tsx b/components/ResendVerificationCode/ResendVerificationCode.tsx new file mode 100644 index 0000000..3ef6c80 --- /dev/null +++ b/components/ResendVerificationCode/ResendVerificationCode.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { FC, useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { Button } from "@mantine/core"; +import { setLastSendTime } from "@/lib/features/verification/verificationSlice"; +import { RootState } from "@/lib/store"; +import { MAX_COUNTDOWN } from "@/constants/verification"; + +const ResendVerificationCode: FC = () => { + const [countdown, setCountdown] = useState(0); + const dispatch = useDispatch(); + const lastSendTime = useSelector( + (state: RootState) => state.verification.lastSendTime + ); + + useEffect(() => { + dispatch(setLastSendTime(Date.now())); + setCountdown(MAX_COUNTDOWN); + }, []); + + useEffect(() => { + if (lastSendTime) { + const elapsed = Math.floor((Date.now() - lastSendTime) / 1000); + const remaining = Math.max(0, MAX_COUNTDOWN - elapsed); + setCountdown(remaining); + } + }, [lastSendTime]); + + useEffect(() => { + if (countdown > 0) { + const timer = setTimeout(() => setCountdown(countdown - 1), 1000); + return () => clearTimeout(timer); + } + }, [countdown]); + + const sendCode = () => { + if (countdown > 0) return; + }; + + const handleResend = () => { + sendCode(); + dispatch(setLastSendTime(Date.now())); + setCountdown(MAX_COUNTDOWN); + }; + + return ( + + ); +}; + +export default ResendVerificationCode; diff --git a/components/VerifyPhoneForm/VerifyPhoneForm.tsx b/components/VerifyPhoneForm/VerifyPhoneForm.tsx index f48a69b..7c8e98d 100644 --- a/components/VerifyPhoneForm/VerifyPhoneForm.tsx +++ b/components/VerifyPhoneForm/VerifyPhoneForm.tsx @@ -4,6 +4,7 @@ import { FC } from "react"; import { redirect } from "next/navigation"; import { Button, PinInput, Stack } from "@mantine/core"; import { useForm } from "@mantine/form"; +import ResendVerificationCode from "@/components/ResendVerificationCode/ResendVerificationCode"; import style from "@/components/VerifyPhoneForm/VerifyPhone.module.css"; type VerifyNumberForm = { @@ -48,6 +49,7 @@ const VerifyPhoneForm: FC = () => { disabled={form.values.code.length !== 6}> Подтвердить +