From ff54daf1ae62462a7483c5431905ee17076880ed Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Mon, 15 Jun 2026 15:18:06 +0330
Subject: [PATCH] fix(doctor): unwrap double-nested API response and guard
 empty sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The GET /api/v1/doctor/{uuid} response is double-nested
({ success, data: { data: {...} } }), but the page only unwrapped one
level, leaving every field (name, specialties, expertise, address)
undefined — so خدمات / موقعیت مکانی / نظرات rendered empty or broken.

- Extract the doctor object with res.data?.data?.data in both
  generateMetadata and the page.
- Hide the خدمات block when expertise is empty (no fabricated data).
- Render the location map iframe and routing buttons only when the
  address has real latitude/longitude (was building q=null,null).
- Fix the comments list rendering a stray 0 on empty arrays.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/component/comment/index.js                |  3 +-
 app/doctor/[slug]/page.js                     |  4 +-
 .../doctor/detailDoctor/cards/AboutDcotor.js  | 36 ++++++-----
 .../detailDoctor/cards/locations/Item.js      | 62 ++++++++++---------
 4 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/app/component/comment/index.js b/app/component/comment/index.js
index 373e4ba..59e4def 100644
--- a/app/component/comment/index.js
+++ b/app/component/comment/index.js
@@ -11,8 +11,7 @@ function Comment({ comments }) {
         false && "w-full"
       }`}
     >
-      {comments &&
-        comments.length &&
+      {comments?.length > 0 &&
         comments.map((item, idx) => (
           <ItemUser
             key={idx}
diff --git a/app/doctor/[slug]/page.js b/app/doctor/[slug]/page.js
index 164a50d..a3efc2e 100644
--- a/app/doctor/[slug]/page.js
+++ b/app/doctor/[slug]/page.js
@@ -11,7 +11,7 @@ export async function generateMetadata({ params }) {
 
   try {
     const res = await axiosInstance.get(`${API_URL}/api/v1/doctor/${slug}`);
-    const doctor = res.data;
+    const doctor = res.data?.data?.data;
     if (!doctor) return {};
 
     const specialtyNames = doctor.specialties?.map((s) => s.name).join(" و ") || "";
@@ -49,7 +49,7 @@ async function Doctor({ params }) {
 
   try {
     const resDoctor = await axiosInstance.get(`${API_URL}/api/v1/doctor/${slug}`);
-    doctor = resDoctor.data;
+    doctor = resDoctor.data?.data?.data;
     if (doctor) {
       const resComments = await axiosInstance.get(
         `${API_URL}/api/v1/clinicpro/comments/${doctor.id}`
diff --git a/components/doctor/detailDoctor/cards/AboutDcotor.js b/components/doctor/detailDoctor/cards/AboutDcotor.js
index ccb2a53..917ca0c 100644
--- a/components/doctor/detailDoctor/cards/AboutDcotor.js
+++ b/components/doctor/detailDoctor/cards/AboutDcotor.js
@@ -39,23 +39,25 @@ function AboutDcotor({ doctor }) {
           </Button>
         </MultilineLoading>
       </div>
-      <div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
-        <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
-          خدمات
-        </p>
-        <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
-          {doctor?.expertise?.map((item, idx) => (
-            <li key={idx} className="flex items-center justify-start gap-1">
-              <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
-              <TextLoading width={70} height={18}>
-                <h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
-                  {item.name}
-                </h4>
-              </TextLoading>
-            </li>
-          ))}
-        </ul>
-      </div>
+      {doctor?.expertise?.length > 0 && (
+        <div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
+          <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+            خدمات
+          </p>
+          <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
+            {doctor.expertise.map((item, idx) => (
+              <li key={idx} className="flex items-center justify-start gap-1">
+                <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
+                <TextLoading width={70} height={18}>
+                  <h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
+                    {item.name}
+                  </h4>
+                </TextLoading>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/components/doctor/detailDoctor/cards/locations/Item.js b/components/doctor/detailDoctor/cards/locations/Item.js
index d19a7f5..715e9b8 100644
--- a/components/doctor/detailDoctor/cards/locations/Item.js
+++ b/components/doctor/detailDoctor/cards/locations/Item.js
@@ -49,6 +49,35 @@ function Item({ data }) {
             <p className="text-[#525252] text-[16px] font-normal">
               تلفن: {data.telephone}
             </p>
+            {data?.map?.latitude && data?.map?.longitude && (
+              <ModalOpenLocation
+                open={open}
+                data={data}
+                setOpen={setOpen}
+                handleClose={handleClose}
+              >
+                <Button
+                  className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
+                  onClick={handleOpen}
+                  variant="outlined"
+                >
+                  <RoutingC />
+                  مسیریابی
+                </Button>
+              </ModalOpenLocation>
+            )}
+          </div>
+        </div>
+        {data?.map?.latitude && data?.map?.longitude && (
+          <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
+            <iframe
+              src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
+              className="w-full rounded-lg mt-4 h-full"
+              referrerPolicy="no-referrer-when-downgrade"
+              allowFullScreen=""
+              loading="lazy"
+            ></iframe>
+
             <ModalOpenLocation
               open={open}
               data={data}
@@ -56,41 +85,16 @@ function Item({ data }) {
               handleClose={handleClose}
             >
               <Button
-                className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
+                className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
+                              !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
                 onClick={handleOpen}
-                variant="outlined"
               >
-                <RoutingC />
+                <RoutingWhiteC />
                 مسیریابی
               </Button>
             </ModalOpenLocation>
           </div>
-        </div>
-        <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
-          <iframe
-            src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
-            className="w-full rounded-lg mt-4 h-full"
-            referrerPolicy="no-referrer-when-downgrade"
-            allowFullScreen=""
-            loading="lazy"
-          ></iframe>
-
-          <ModalOpenLocation
-            open={open}
-            data={data}
-            setOpen={setOpen}
-            handleClose={handleClose}
-          >
-            <Button
-              className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
-                            !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
-              onClick={handleOpen}
-            >
-              <RoutingWhiteC />
-              مسیریابی
-            </Button>
-          </ModalOpenLocation>
-        </div>
+        )}
       </div>
     </>
   );