Refine profile interaction logic, synchronize UI components, and update API request formatting to use FormData

src/pages/ProfileDetailPage.jsx

@@ -11,18 +11,19 @@ const ProfileDetailPage = () => {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
 
+  const fetchDetail = async (showLoading = true) => {
+    if (showLoading) setLoading(true);
+    try {
+      const res = await getProfileDetail(id);
+      setData(res);
+    } catch (error) {
+      console.error("Failed to fetch profile details:", error);
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  };
+
   useEffect(() => {
-    const fetchDetail = async () => {
-      setLoading(true);
-      try {
-        const res = await getProfileDetail(id);
-        setData(res);
-      } catch (error) {
-        console.error("Failed to fetch profile details:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
     if (id) {
       fetchDetail();
     }
@@ -47,7 +48,7 @@ const ProfileDetailPage = () => {
   return (
     <>
     <div className="w-[100%] max-w-[1400px] mx-auto my-10">
-      <MatrimonyProfile data={data} />
+      <MatrimonyProfile data={data} onRefresh={fetchDetail} />
       <PartnerPreferences data={data} />
       <MatchingList matches={data.all_matches} />
     </div>