fix mail confirm work

src/app/ui/forms/confirm-mail-modal-window.tsx

@@ -1,22 +1,51 @@
 import styles from '@/app/styles/module/login.module.scss';
 import { useTranslations } from 'next-intl';
-import { ChangeEvent, MouseEvent, useActionState, useState, useEffect } from 'react';
+import { ChangeEvent, MouseEvent, useState, useEffect } from 'react';
 import { resendConfirmEmail, confirmEmail } from '@/app/actions/auth';
 import { IconRefresh } from '@/app/ui/icons/icons';
-export default function ConfirmMailModalWindow({ userId, email }: { userId: number | undefined, email: string | undefined }) {
-	const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
-		confirmEmail,
-		undefined,
-	);
+
+export default function ConfirmMailModalWindow({ userId, email, onClose }: { userId: number | undefined, email: string | undefined, onClose?: () => void }) {
+	const [error, setError] = useState<string | null>(null);
+	const [isPending, setIsPending] = useState(false);
 	const [confirmCodeValue, setConfirmCodeValue] = useState('');
 	const [isInputDisabled, setIsInputDisabled] = useState(true);
 	const [timer, setTimer] = useState(30);
 	const t = useTranslations('Login-register-form');
 
+	async function handleConfirmEmail(e: React.FormEvent) {
+		e.preventDefault();
+
+		if (!userId || confirmCodeValue.length !== 6) {
+			return;
+		}
+
+		setIsPending(true);
+		setError(null);
+
+		try {
+			const result = await confirmEmail(userId, confirmCodeValue);
+
+			if (result.error) {
+				setError(t(result.error));
+
+			} else {
+				if (onClose) {
+					setTimeout(() => onClose(), 1500);
+				}
+			}
+		} catch (err) {
+			setError(t('entered-code-is-incorrect'));
+		} finally {
+			setIsPending(false);
+		}
+	}
+
 	async function reSendEmailConfirmCode(e: MouseEvent) {
 		e.preventDefault();
 		if (userId) {
+			setIsInputDisabled(true);
 			await resendConfirmEmail(userId);
+			setTimer(30);
 		}
 	}
 
@@ -47,28 +76,19 @@ export default function ConfirmMailModalWindow({ userId, email }: { userId: numb
 		};
 	}, [timer, isInputDisabled]);
 
-	/* const resetTimer = () => {
-		setIsInputDisabled(true);
-		setTimer(30);
-	}; */
-
 	return (
 		<div
 			className="modal-window"
 			onClick={(e) => e.stopPropagation()}
 		>
 			<div className={`${styles['form-group']} ${styles['form-group-confrim-window']}`}>
-				<form action={(e) => {
-					formActionEmailConfrim(e);
-				}}>
+				<form onSubmit={handleConfirmEmail}>
 					<div className={`${styles['form-group']}`}>
 						<h4>
 							{t('enter-confirmation-code')}
 							<br />
 						</h4>
-						<p
-							className="mb-6"
-						>
+						<p className="mb-6">
 							{email}
 						</p>
 						<input
@@ -78,50 +98,42 @@ export default function ConfirmMailModalWindow({ userId, email }: { userId: numb
 							className={`${styles['form-input']}`}
 							placeholder={t('confirmation-code')}
 							value={confirmCodeValue}
-							onChange={(e: ChangeEvent<HTMLInputElement>) => {
-								onChangeHandler(e)
-							}}
+							onChange={onChangeHandler}
+							disabled={isPending}
 						/>
-						<input
-							type="hiden"
-							id="userId"
-							name="userId"
-							style={{ display: 'none' }}
-							defaultValue={userId ? userId : ''}
-						/>
-						{stateEmailConfrim?.error && (
-							<p
-								className="text-sm text-red-500"
-							>
-								{t('entered-code-is-incorrect')}
+
+						{error && (
+							<p className="text-sm text-red-500">
+								{error}
 							</p>
 						)}
 					</div>
-					<div>
-						{stateEmailConfrim?.error}
-					</div>
-					<div className="flex gap-2">
+
+					<div className={`${styles['form-group-confrim-window-button-group']}`}>
 						<button
 							type="submit"
 							className={`${styles['btn']}`}
-							disabled={confirmCodeValue.length !== 6}
+							disabled={confirmCodeValue.length !== 6 || isPending}
 						>
-							{t('confirm')}
+							{isPending ? t('confirming') : t('confirm')}
 						</button>
+
 						<button
-							className={`${styles['btn'] + ' ' + styles['refresh']} flex`}
-							disabled={isInputDisabled}
-							onClick={(e) => {
-								reSendEmailConfirmCode(e);
-							}}
+							className={`${styles['btn'] + ' ' + styles['refresh']}`}
+							disabled={isInputDisabled || isPending}
+							onClick={reSendEmailConfirmCode}
 							title={t('resend-code')}
+							type="button"
 						>
 							<IconRefresh />
+							<div>
+								{t('resend-code')}
+							</div>
 							{timer !== 0 ? timer : ''}
 						</button>
 					</div>
 				</form>
 			</div>
 		</div>
-	)
+	);
 }