useCountdown Hook

Створює таймер зворотного відліку. Автоматично викликає onTimeOut після завершення зворотного відліку. По замовчуванню delay 10s

Output:

export type CountdownController = {
  start: () => void;
  dismiss: () => void;
  remaining: number | null;
};


export const EmailVerification: React.FC<{
  initialValues: FormValues;
  onSubmit: (values: FormValues) => void;
}> = ({ initialValues, onSubmit }) => {
  const form = useForm<FormValues>({
    defaultValues: initialValues,
    resolver: zodResolver(verifySchema),
  });

  const sendCodeMutation = useSendVerificationCode();

  const { t } = useTranslation();

  const [countdownFinished, setCountdownFinished] = React.useState(false);
  const { start, remaining } = useCountdown({
    onTimeOut: () => setCountdownFinished(true),
    delay: 59 * 1000,
  });

  React.useEffect(() => {
    start();
  }, []);

  const handleResendCode = () => {
    const email = form.getValues().email;

    if (!email) return;

    sendCodeMutation.mutate(
      { email },
      {
        onSuccess() {
          toast.info(t('Verification code sent to email'));
          start();
          setCountdownFinished(false);
        },
      }
    );
  };

  return (
    <Form></Form>
  );
};