fix(doctor): unwrap double-nested API response and guard empty sections

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>
This commit is contained in:
hamed
2026-06-15 15:18:06 +03:30
co-authored by Claude Opus 4.8
parent 0a48c854cb
commit ff54daf1ae
4 changed files with 55 additions and 50 deletions
+1 -2
View File
@@ -11,8 +11,7 @@ function Comment({ comments }) {
false && "w-full"
}`}
>
{comments &&
comments.length &&
{comments?.length > 0 &&
comments.map((item, idx) => (
<ItemUser
key={idx}
+2 -2
View File
@@ -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}`
@@ -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>
);
}
@@ -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>
</>
);