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;
-  try {
-    const response = await axios.get(`${API_URL}/api/v1/appointment-slots`);
+  let doctor = null;
+  let disabledDates = [];
 
-    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
-      .getAppointmentNotAvailable(47)
-      .then((res) => {
-        setTimeout(() => {
-          setLoading(false);
-        }, 1000);
-        setDisableDates(res.data);
-      })
-      .catch((err) => {
-      });
+    // تنظیم loading به false بعد از یک تاخیر کوتاه
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+
     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}