feat(clinic): improve image handling and map integration in clinic components

app/clinic/[slug]/page.js

@@ -2,6 +2,7 @@ import ClinicPage from "@/components/clinic";
 import Layout from "@/components/layout/StLayout";
 import { fetchReq } from "@/lib/req";
 import { getStateInfo } from "@/lib/getStateInfo";
+import { imageUrl } from "@/helper";
 
 export async function generateMetadata({ params }) {
   const { slug } = await params;
@@ -10,7 +11,8 @@ export async function generateMetadata({ params }) {
   const siteName = matchedCity?.site_name || "نوبت 724";
 
   try {
-    const clinic = await fetchReq(`${API_URL}/api/v1/clinic/${slug}`);
+    const res = await fetchReq(`${API_URL}/api/v1/clinic/${slug}`);
+    const clinic = res?.data?.data;
     if (!clinic) return {};
 
     const title = `${clinic.title} | ${siteName}`;
@@ -22,8 +24,8 @@ export async function generateMetadata({ params }) {
       openGraph: {
         title,
         description,
-        images: clinic.images_clinic?.[0]
-          ? [clinic.images_clinic[0]]
+        images: clinic.images_clinic?.[0]?.url
+          ? [imageUrl(clinic.images_clinic[0].url)]
           : ["https://www.nobat724.com/assets/images/logo.png"],
       },
     };
@@ -34,8 +36,9 @@ export async function generateMetadata({ params }) {
 
 async function Clinic({ params, searchParams }) {
   const { slug } = await params;
+  const sp = await searchParams;
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
-  const page = Number(searchParams?.page) || 1;
+  const page = Number(sp?.page) || 1;
   const limit = 50;
 
   const reqClinics = await fetchReq(`${API_URL}/api/v1/clinic/${slug}`);
@@ -43,16 +46,18 @@ async function Clinic({ params, searchParams }) {
     `${API_URL}/api/v1/clinic/doctor-list/${slug}?page=${page}&limit=${limit}`
   );
 
-  const clinic = reqClinics;
-  const doctors = reqDoctors?.data || [];
-  const pagedoctors = reqDoctors?.page;
+  const clinic = reqClinics?.data?.data || null;
+  const doctors = reqDoctors?.data?.data || [];
+  const pagedoctors = reqDoctors?.data?.meta;
 
   const jsonLd = clinic
     ? {
         "@context": "https://schema.org",
         "@type": "MedicalClinic",
         name: clinic.title,
-        ...(clinic.images_clinic?.[0] && { image: clinic.images_clinic[0] }),
+        ...(clinic.images_clinic?.[0]?.url && {
+          image: imageUrl(clinic.images_clinic[0].url),
+        }),
       }
     : null;
 

components/clinic/components/about/images/Images.js

@@ -2,9 +2,10 @@ import List from "./List";
 import Slider from "./Slider";
 import Image from "next/image";
 import CustomLoading from "@/app/component/loading/Custom";
+import { imageUrl } from "@/helper";
 
 function Images({ data }) {
-  const images_clinic = data.images_clinic;
+  const images_clinic = data?.images_clinic || [];
 
   return (
     <div
@@ -16,12 +17,12 @@ function Images({ data }) {
       <div className="w-full">
         <div
           className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px]
-          ${data.images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
+          ${images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
         >
           <CustomLoading width={600} height={400}>
             <Image
               className="rounded-[8px] overflow-hidden w-full h-full object-cover"
-              src={images_clinic[0]?.url || "/assets/images/clinic-img.png"}
+              src={imageUrl(images_clinic[0]?.url, "/assets/images/clinic-img.png")}
               alt="img clinic"
               height={432}
               width={600}

components/clinic/components/about/images/List.js

@@ -1,8 +1,9 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
+import { imageUrl } from "@/helper";
 
 function List({ data }) {
-  const images_clinic = data.images_clinic;
+  const images_clinic = data?.images_clinic || [];
   const lengthImgClinics = images_clinic.length;
 
   return (
@@ -36,7 +37,7 @@ function List({ data }) {
             <CustomLoading width="full" height={190}>
               <Image
                 className="rounded-[8px] overflow-hidden w-full h-full object-cover"
-                src={img.url || "/assets/images/clinic-img.png"}
+                src={imageUrl(img.url, "/assets/images/clinic-img.png")}
                 alt="img clinic"
                 height={204}
                 width={288}

components/clinic/components/contact/index.js

@@ -41,7 +41,11 @@ function Contact({ data }) {
       <div className="w-full relative h-[460px] mt-[24px]">
         <CustomLoading width="full" height={400}>
           <iframe
-            src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
+            src={`https://maps.google.com/maps?q=${
+              data?.map?.latitude && data?.map?.longitude
+                ? `${data.map.latitude},${data.map.longitude}`
+                : encodeURIComponent(data?.location || data?.title || "")
+            }&z=14&output=embed`}
             className="w-full h-full rounded-lg"
             loading="lazy"
           ></iframe>