handle api register & change design dashboard tabs and page disease

components/register/SetCodePage.js

@@ -1,6 +1,5 @@
 import { useRef, useState } from "react";
 
-import Link from "next/link";
 import { Button } from "@mui/material";
 import OTPForm from "./element/OTPForm";
 import EditLogin from "../icons/EditLogin";
@@ -15,6 +14,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
   const retryIcon = useRef();
 
   const [timer, setTimer] = useState(0);
+  const [loading, setLoading] = useState(false);
   const [code, setCode] = useState(["", "", "", ""]);
   const [isError, setIsError] = useState(false);
   const inputRefs = Array.from({ length: 5 }, () => useRef());
@@ -36,6 +36,9 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
     if (newCode.join("").length === 4 && isError) {
       setIsError(false);
     }
+    if (newCode.join("").length === 4) {
+      handleReq();
+    }
 
     setCode(newCode);
 
@@ -59,6 +62,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
   };
 
   const handleReq = () => {
+    setLoading(true);
     request
       .getToken(
         "mobile",
@@ -68,10 +72,10 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
         code.join("")
       )
       .then((response) => {
-        console.log(response);
+        setLoading(false);
       })
       .catch((err) => {
-        console.log(err);
+        setLoading(false);
       });
   };
 
@@ -142,9 +146,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
             onClick={() => {
               if (!timer && timer !== "loading") {
                 handleTimer();
-
                 retryIcon.current.classList.add("retry-icon");
-
                 setTimeout(() => {
                   retryIcon.current &&
                     retryIcon.current.classList.remove("retry-icon");
@@ -171,6 +173,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
       </div>
       <Button
         fullWidth
+        loading={loading}
         variant="contained"
         onClick={() => {
           setIsSendMsg && setIsSendMsg(true);