refactor: update user data handling in AppointmentPage to improve loading state and editability of fields

components/appointment/index.js

@@ -7,9 +7,9 @@ import Container from "./Container";
 
 const defaultData = {
   phone: { value: "", isEdit: false },
-  national_code: { value: "", isEdit: false },
+  national_code: { value: "", isEdit: true },
-  name: { value: "", isEdit: false },
+  name: { value: "", isEdit: true },
-  basic_insurance: { value: "", isEdit: false },
+  basic_insurance: { value: "", isEdit: true },
 };
 
 function AppointmentPage({ doctor, disabledDates, matchedCity }) {
@@ -30,19 +30,30 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
   const [selectedDate, setSelectedDate] = useState(null);
 
   useEffect(() => {
-    setIsLoading(true);
+    const fetchUserData = async () => {
+      setIsLoading(true);
+
+      const userInfo = Cookies.get("userInfo");
+      const parsedData = userInfo && JSON.parse(userInfo);
+      const usernameFromCookie = parsedData?.username || "";
+
+      // ابتدا شماره موبایل را از Cookie ست می‌کنیم
+      if (usernameFromCookie) {
+        setData(prev => ({
+          ...prev,
+          phone: { value: usernameFromCookie, isEdit: false },
+        }));
+      }
+
+      // سپس اگر uuid داریم، بقیه اطلاعات را از API می‌گیریم
+      if (userInfo && parsedData) {
+        try {
+          const res = await request.getUserProfile(parsedData.uuid);
 
-    const userInfo = Cookies.get("userInfo");
-    const parsedData = userInfo && JSON.parse(userInfo);
-    const usernameFromCookie = parsedData?.username || "";
-    if (userInfo && parsedData) {
-      request
-        .getUserProfile(parsedData.uuid)
-        .then((res) => {
           if (res) {
             const newData = {
               uuid: res.uuid,
-              phone: { value: usernameFromCookie, isEdit: true },
+              phone: { value: usernameFromCookie, isEdit: false },
               national_code: {
                 value: res.national_code || "",
                 isEdit: res.national_code ? false : true,
@@ -55,48 +66,32 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
             };
             setData(newData);
             setPrevData(newData);
-          } else {
-            const emptyData = {
-              uuid: res.uuid,
-              phone: { value: usernameFromCookie, isEdit: false },
-              national_code: { value: "", isEdit: true },
-              name: { value: "", isEdit: true },
-              basic_insurance: {
-                value: res.basic_insurance,
-                isEdit: true,
-              },
-            };
-            setData(emptyData);
-            setPrevData(emptyData);
           }
+        } catch (error) {
+          // خطا در دریافت پروفایل
+        } finally {
           setIsLoading(false);
-        })
+        }
-        .catch((error) => {
+      } else {
-          setIsLoading(false);
+        setIsLoading(false);
-        });
+      }
-    } else if (usernameFromCookie) {
+    };
-      // اگر فقط Cookie داریم بدون UUID
+
-      setData({
+    fetchUserData();
-        ...defaultData,
-        phone: { value: usernameFromCookie, isEdit: false },
-      });
-      setIsLoading(false);
-    } else {
-      setIsLoading(false);
-    }
   }, []); // فقط یک بار در mount اولیه اجرا می‌شه
 
   // useEffect جداگانه برای زمانی که step تغییر می‌کنه
   useEffect(() => {
-    if (step === 3) {
+    const refetchUserData = async () => {
-      const userInfo = Cookies.get("userInfo");
+      if (step === 3) {
-      const parsedData = userInfo && JSON.parse(userInfo);
+        const userInfo = Cookies.get("userInfo");
-      const usernameFromCookie = parsedData?.username || "";
+        const parsedData = userInfo && JSON.parse(userInfo);
+        const usernameFromCookie = parsedData?.username || "";
+
+        if (userInfo && parsedData && !data.uuid) {
+          try {
+            const res = await request.getUserProfile(parsedData.uuid);
 
-      if (userInfo && parsedData && !data.uuid) {
-        request
-          .getUserProfile(parsedData.uuid)
-          .then((res) => {
             if (res) {
               const newData = {
                 uuid: res.uuid,
@@ -114,11 +109,17 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
               setData(newData);
               setPrevData(newData);
             }
-          });
+          } catch (error) {
+            // خطا در دریافت پروفایل
+          }
+        }
       }
-    }
+    };
+
+    refetchUserData();
   }, [step]);
 
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-screen">