refactor: update appointment components to fetch and handle doctor data and disabled dates

app/appointment/[doctorId]/page.js

@@ -2,20 +2,41 @@ import AppointmentPage from "@/components/appointment";
 import { getStateInfo } from "@/lib/getStateInfo";
 import axios from "axios";
 
-async function Appointment({ params: { slug } }) {
+async function Appointment({ params: { doctorId } }) {
   const { matchedCity } = getStateInfo();
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
-  let apt = null;
+  let doctor = null;
-  try {
+  let disabledDates = [];
-    const response = await axios.get(`${API_URL}/api/v1/appointment-slots`);
 
-    apt = response.data.data;
+  try {
+    // دریافت اطلاعات دکتر با UUID
+    const doctorRes = await axios.get(`${API_URL}/api/v1/doctor/${doctorId}`);
+    doctor = doctorRes.data;
+
+    // دریافت روزهای غیرفعال با استفاده از doctor.id
+    if (doctor && doctor.id) {
+      const disabledDatesRes = await axios.get(
+        `${API_URL}/api/v1/appointment/not-available/${doctor.id}`,
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+      disabledDates = disabledDatesRes.data?.data || [];
+    }
   } catch (error) {
-    // console.error("problem with req:", error.message);
+    console.error("Error fetching appointment data:", error.message);
   }
 
-  return <AppointmentPage slug={slug} matchedCity={matchedCity} />;
+  return (
+    <AppointmentPage
+      doctor={doctor}
+      disabledDates={disabledDates}
+      matchedCity={matchedCity}
+    />
+  );
 }
 
 export default Appointment;

app/component/date/datePicker/index.js

@@ -4,10 +4,9 @@ import { useEffect, useRef, useState } from "react";
 import FirstDatePicker from "./date/FirstDatePicker";
 import SecondDatePicker from "./date/SecondDatePicker";
 import { dateToTimestamp } from "@/helper";
-import { request } from "@/services/response";
 import moment from "moment-jalaali";
 
-function DatePicker({ setDate }) {
+function DatePicker({ setDate, disabledDates = [] }) {
   const nextIconDatePickerF = useRef();
   const prevIconDatePickerF = useRef();
   const nextIconDatePickerS = useRef();
@@ -16,7 +15,6 @@ function DatePicker({ setDate }) {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState();
   const [loading, setLoading] = useState(true);
-  const [disableDates, setDisableDates] = useState([]);
 
   const handleStartDateChange = (date, e) => {
     if (date) {
@@ -42,7 +40,7 @@ function DatePicker({ setDate }) {
     if (date.isBefore(today)) return true;
 
     if (
-      disableDates.some((ts) => date.isSame(moment.unix(ts).startOf("day")))
+      disabledDates.some((ts) => date.isSame(moment.unix(ts).startOf("day")))
     ) {
       return true;
     }
@@ -51,27 +49,22 @@ function DatePicker({ setDate }) {
   };
 
   useEffect(() => {
-    request
+    // تنظیم loading به false بعد از یک تاخیر کوتاه
-      .getAppointmentNotAvailable(47)
+    setTimeout(() => {
-      .then((res) => {
+      setLoading(false);
-        setTimeout(() => {
+    }, 1000);
-          setLoading(false);
+
-        }, 1000);
-        setDisableDates(res.data);
-      })
-      .catch((err) => {
-      });
     if (nextIconDatePickerS.current) {
       nextIconDatePickerS.current.click();
     }
-  }, [nextIconDatePickerS]);
+  }, [nextIconDatePickerS, disabledDates]);
 
   return (
     <div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
       <FirstDatePicker
         loading={loading}
         startDate={startDate}
-        disableDates={disableDates}
+        disableDates={disabledDates}
         handleDisableDate={handleDisableDate}
         nextIconDatePickerF={nextIconDatePickerF}
         prevIconDatePickerF={prevIconDatePickerF}

components/appointment/Container.js

@@ -18,9 +18,10 @@ function Container({
   matchedCity,
   isForAnother,
   setIsForAnother,
+  disabledDates,
 }) {
   const elements = [
-    <Date doctor={doctor} setStep={setStep} />,
+    <Date doctor={doctor} setStep={setStep} disabledDates={disabledDates} />,
     // <LogInPage setIsSendMsg={false} setStep={setStep} />,
     // <VerificationPage setIsSendMsg={false} link={false} setStep={setStep} />,
     <Detail

components/appointment/date/Time/SelectDatePicker.js

@@ -1,7 +1,7 @@
 import DatePicker from "@/app/component/date/datePicker";
 
-function SelectDatePicker({ setDate }) {
+function SelectDatePicker({ setDate, disabledDates }) {
-  return <DatePicker setDate={setDate} />;
+  return <DatePicker setDate={setDate} disabledDates={disabledDates} />;
 }
 
 export default SelectDatePicker;

components/appointment/date/Time/index.js

@@ -1,12 +1,12 @@
 import SelectDatePicker from "./SelectDatePicker";
 
-function Time({ isStep, setDate }) {
+function Time({ isStep, setDate, disabledDates }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
         1. انتخاب روز
       </p>
-      <SelectDatePicker setDate={setDate} />
+      <SelectDatePicker setDate={setDate} disabledDates={disabledDates} />
       {!isStep && (
         <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
       )}

components/appointment/date/index.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Hour from "./hour";
 import Time from "./Time";
 
-function Date({ doctor, setStep }) {
+function Date({ doctor, setStep, disabledDates }) {
   const [locateVisit, setLocateVisit] = useState(true);
   const [date, setDate] = useState();
 
@@ -16,6 +16,7 @@ function Date({ doctor, setStep }) {
           setDate={setDate}
           locateVisit={locateVisit}
           isStep={doctor?.multiwork ? locateVisit : true}
+          disabledDates={disabledDates}
         />
         <Hour
           isStep={doctor?.multiwork ? locateVisit : true}

components/appointment/index.js

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import doctors from "@/data/doctors.json";
 import { request } from "@/services/response";
 import Cookies from "js-cookie";
 import Container from "./Container";
@@ -13,9 +12,7 @@ const defaultData = {
   basic_insurance: { value: "", isEdit: false },
 };
 
-function AppointmentPage({ slug, matchedCity }) {
+function AppointmentPage({ doctor, disabledDates, matchedCity }) {
-  const doctor = doctors.find((item) => item.id === +slug);
-
   const [step, setStep] = useState(0);
   const [isForAnother, setIsForAnother] = useState(false);
 
@@ -78,6 +75,7 @@ function AppointmentPage({ slug, matchedCity }) {
       matchedCity={matchedCity}
       isForAnother={isForAnother}
       setIsForAnother={setIsForAnother}
+      disabledDates={disabledDates}
     />
   );
 }

components/appointment/information/Detail.js

@@ -6,6 +6,9 @@ import TickCircleOrange from "@/components/icons/TickCircleOrange";
 import { Button } from "@mui/material";
 
 function Detail({ doctor, step, setStep }) {
+  // دریافت اولین آدرس از لیست
+  const firstAddress = doctor?.address?.[0]?.address || doctor?.location || "آدرس موجود نیست";
+
   return (
     <div className="">
       <ul className="flex flex-col items-start justify-start gap-[24px]">
@@ -14,7 +17,7 @@ function Detail({ doctor, step, setStep }) {
             <LocationA />
           </div>
           <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
-            آدرس: {doctor?.location}
+            آدرس: {firstAddress}
           </p>
         </li>
         <li className="flex items-center justify-between w-full">

components/appointment/information/Head.js

@@ -1,6 +1,14 @@
 import Image from "next/image";
 
 function Head({ doctor }) {
+  // تبدیل img array به string
+  const doctorImage = doctor?.img?.[0]?.url || "/default-doctor.jpg";
+
+  // تبدیل expertise array به string
+  const expertiseText = doctor?.expertise
+    ?.map((exp) => exp.name)
+    .join("، ") || "";
+
   return (
     <div
       className="
@@ -16,7 +24,7 @@ function Head({ doctor }) {
                     h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
                 "
         alt="profile doctor"
-        src={doctor?.img}
+        src={doctorImage}
         height={95}
         width={95}
       />
@@ -25,7 +33,7 @@ function Head({ doctor }) {
           {doctor?.name}
         </p>
         <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-          تخصص: {doctor?.expertise}
+          تخصص: {expertiseText}
         </p>
       </div>
     </div>

components/appointment/location/Address.js

@@ -5,7 +5,7 @@ function Address({ doctor }) {
         <li key={idx}>
           <div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
             <p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
-            <p className="font-normal">{item.location}</p>
+            <p className="font-normal">{item.address || item.location}</p>
           </div>
           {doctor.address.length > idx + 1 && (
             <span className="bg-[#EFEFEF] block h-px w-full"></span>

components/appointment/location/Head.js

@@ -1,6 +1,14 @@
 import Image from "next/image";
 
 function Head({ doctor }) {
+  // تبدیل img array به string
+  const doctorImage = doctor?.img?.[0]?.url || "/default-doctor.jpg";
+
+  // تبدیل expertise array به string
+  const expertiseText = doctor?.expertise
+    ?.map((exp) => exp.name)
+    .join("، ") || "";
+
   return (
     <div className="flex items-center justify-start gap-[12px]">
       <Image
@@ -8,7 +16,7 @@ function Head({ doctor }) {
                     w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
                     h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
                 "
-        src={doctor?.img}
+        src={doctorImage}
         alt="profile"
         height={56}
         width={56}
@@ -18,7 +26,7 @@ function Head({ doctor }) {
           {doctor?.name}
         </h2>
         <h3 className="text-[#525252] text-[12px] md:text-[14px] font-medium">
-          تخصص: {doctor?.expertise}
+          تخصص: {expertiseText}
         </h3>
       </div>
     </div>