handle register & retry code & edit phone number & fix bug select city and state & add basic modal to all tabs in dashboard

components/register/verificationPage/Recode.js

@@ -1,8 +1,10 @@
 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, setTimer }) {
+function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
   const handleTimer = () => {
     setTimer("loading");
     setTimeout(() => {
@@ -17,18 +19,38 @@ function Recode({ retryIcon, timer, setTimer }) {
     }, 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();
-          retryIcon.current.classList.add("retry-icon");
-          setTimeout(() => {
-            retryIcon.current &&
-              retryIcon.current.classList.remove("retry-icon");
-          }, 1000);
+          // handleTimer();
+          handleReq();
         }
       }}
     >

components/register/verificationPage/index.js

@@ -9,7 +9,7 @@ import ArrowRightS from "../../icons/ArrowRightS";
 import Recode from "./Recode";
 import SendReq from "./SendReq";
 
-function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) {
+function VerificationPage({ setIsSendMsg, uuid, link, setUuid, num, setStep }) {
   const retryIcon = useRef();
 
   const [timer, setTimer] = useState(0);
@@ -99,7 +99,13 @@ function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) {
             </p>
           </Button>
 
-          <Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} />
+          <Recode
+            num={num}
+            timer={timer}
+            setUuid={setUuid}
+            setTimer={setTimer}
+            retryIcon={retryIcon}
+          />
         </div>
       </div>
       <SendReq