Refactor code structure for improved readability and maintainability

components/register/verificationPage/Recode.js

@@ -2,13 +2,16 @@ import RetryLogin from "@/components/icons/RetryLogin";
 import { changeNumToDefault } from "@/helper";
 import { request } from "@/services/response";
 import { Button } from "@mui/material";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import Altcha from "@/components/Altcha";
 
 const time_resend_code = 120;
 
 function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
   const timerIntervalRef = useRef(null);
   const animIntervalRef = useRef(null);
+  const [altcha, setAltcha] = useState("");
+  const [altchaKey, setAltchaKey] = useState(0);
 
   useEffect(() => {
     return () => {
@@ -49,7 +52,7 @@ function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
       rotateIcon();
     }, 1200);
     request
-      .sendCode(changeNumToDefault(num), "", typeof window !== "undefined" ? window.location.hostname : "")
+      .sendCode(changeNumToDefault(num), altcha, typeof window !== "undefined" ? window.location.hostname : "")
       .then((response) => {
         clearInterval(animIntervalRef.current);
         animIntervalRef.current = null;
@@ -61,10 +64,15 @@ function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
       .catch(() => {
         clearInterval(animIntervalRef.current);
         animIntervalRef.current = null;
+        // challenge یک‌بارمصرف؛ برای تلاش بعدی تازه بگیر
+        setAltcha("");
+        setAltchaKey((k) => k + 1);
       });
   };
 
   return (
+    <>
+    <Altcha key={altchaKey} onVerified={setAltcha} />
     <Button
       className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
       disabled={typeof timer === "number" && timer !== 0}
@@ -89,6 +97,7 @@ function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
         </>
       )}
     </Button>
+    </>
   );
 }