From 3db4c7e8516b7e84cfc385456629ef7fbe035073 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Mon, 17 Nov 2025 16:10:14 +0330
Subject: [PATCH] refactor: improve loading state management and enhance user
 profile data handling in AppointmentPage component

---
 components/appointment/index.js | 69 ++++++++++++++++++++++++++++++---
 1 file changed, 63 insertions(+), 6 deletions(-)

diff --git a/components/appointment/index.js b/components/appointment/index.js
index ef761d4..bf7fec1 100644
--- a/components/appointment/index.js
+++ b/components/appointment/index.js
@@ -15,6 +15,7 @@ const defaultData = {
 function AppointmentPage({ doctor, disabledDates, matchedCity }) {
   const [step, setStep] = useState(0);
   const [isForAnother, setIsForAnother] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const [prevData, setPrevData] = useState(defaultData);
   const [data, setData] = useState(defaultData);
@@ -29,9 +30,11 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
   const [selectedDate, setSelectedDate] = useState(null);
 
   useEffect(() => {
+    setIsLoading(true);
+
     const userInfo = Cookies.get("userInfo");
     const parsedData = userInfo && JSON.parse(userInfo);
-
+    const usernameFromCookie = parsedData?.username || "";
     if (userInfo && parsedData) {
       request
         .getUserProfile(parsedData.uuid)
@@ -39,7 +42,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
           if (res) {
             const newData = {
               uuid: res.uuid,
-              phone: { value: parsedData.username || "", isEdit: false },
+              phone: { value: usernameFromCookie, isEdit: true },
               national_code: {
                 value: res.national_code || "",
                 isEdit: res.national_code ? false : true,
@@ -55,7 +58,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
           } else {
             const emptyData = {
               uuid: res.uuid,
-              phone: { value: parsedData.username || "", isEdit: false },
+              phone: { value: usernameFromCookie, isEdit: false },
               national_code: { value: "", isEdit: true },
               name: { value: "", isEdit: true },
               basic_insurance: {
@@ -66,12 +69,66 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
             setData(emptyData);
             setPrevData(emptyData);
           }
+          setIsLoading(false);
         })
-        .catch(() => {
-          //
+        .catch((error) => {
+          setIsLoading(false);
         });
+    } else if (usernameFromCookie) {
+      // اگر فقط Cookie داریم بدون UUID
+      setData({
+        ...defaultData,
+        phone: { value: usernameFromCookie, isEdit: false },
+      });
+      setIsLoading(false);
+    } else {
+      setIsLoading(false);
     }
-  }, [step]); // وقتی step تغییر کرد، دوباره چک می‌کنه
+  }, []); // فقط یک بار در mount اولیه اجرا می‌شه
+
+  // useEffect جداگانه برای زمانی که step تغییر می‌کنه
+  useEffect(() => {
+    if (step === 3) {
+      const userInfo = Cookies.get("userInfo");
+      const parsedData = userInfo && JSON.parse(userInfo);
+      const usernameFromCookie = parsedData?.username || "";
+
+      if (userInfo && parsedData && !data.uuid) {
+        request
+          .getUserProfile(parsedData.uuid)
+          .then((res) => {
+            if (res) {
+              const newData = {
+                uuid: res.uuid,
+                phone: { value: usernameFromCookie, isEdit: false },
+                national_code: {
+                  value: res.national_code || "",
+                  isEdit: res.national_code ? false : true,
+                },
+                name: { value: `${res.name} ${res.family}`, isEdit: true },
+                basic_insurance: {
+                  value: res.basic_insurance,
+                  isEdit: true,
+                },
+              };
+              setData(newData);
+              setPrevData(newData);
+            }
+          });
+      }
+    }
+  }, [step]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-12 h-12 border-4 border-[#5559CE] border-t-transparent rounded-full animate-spin"></div>
+          <p className="text-[#3B3B3B] text-[16px]">در حال بارگذاری...</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <Container