From 63d968be1eafe65d767a3ed70a69be3ffe8e5901 Mon Sep 17 00:00:00 2001 From: hamed <15238-genius.ha@users.noreply.drupalcode.org> Date: Wed, 12 Nov 2025 21:28:15 +0330 Subject: [PATCH] refactor: update appointment components to fetch and handle doctor data and disabled dates --- app/appointment/[doctorId]/page.js | 35 +++++++++++++++---- app/component/date/datePicker/index.js | 25 +++++-------- components/appointment/Container.js | 3 +- .../appointment/date/Time/SelectDatePicker.js | 4 +-- components/appointment/date/Time/index.js | 4 +-- components/appointment/date/index.js | 3 +- components/appointment/index.js | 6 ++-- components/appointment/information/Detail.js | 5 ++- components/appointment/information/Head.js | 12 +++++-- components/appointment/location/Address.js | 2 +- components/appointment/location/Head.js | 12 +++++-- 11 files changed, 72 insertions(+), 39 deletions(-) diff --git a/app/appointment/[doctorId]/page.js b/app/appointment/[doctorId]/page.js index 6deec55..d13873f 100644 --- a/app/appointment/[doctorId]/page.js +++ b/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 ; + return ( + + ); } export default Appointment; diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js index f13e1a9..45e67a9 100644 --- a/app/component/date/datePicker/index.js +++ b/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 (
, + , // , // , ; +function SelectDatePicker({ setDate, disabledDates }) { + return ; } export default SelectDatePicker; diff --git a/components/appointment/date/Time/index.js b/components/appointment/date/Time/index.js index 519fe90..6a75bad 100644 --- a/components/appointment/date/Time/index.js +++ b/components/appointment/date/Time/index.js @@ -1,12 +1,12 @@ import SelectDatePicker from "./SelectDatePicker"; -function Time({ isStep, setDate }) { +function Time({ isStep, setDate, disabledDates }) { return (

1. انتخاب روز

- + {!isStep && (
)} diff --git a/components/appointment/date/index.js b/components/appointment/date/index.js index bb0b81d..d7b0af7 100644 --- a/components/appointment/date/index.js +++ b/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} /> item.id === +slug); - +function AppointmentPage({ doctor, disabledDates, matchedCity }) { 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} /> ); } diff --git a/components/appointment/information/Detail.js b/components/appointment/information/Detail.js index 607041a..ac16ed8 100644 --- a/components/appointment/information/Detail.js +++ b/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 (
    @@ -14,7 +17,7 @@ function Detail({ doctor, step, setStep }) {

- آدرس: {doctor?.location} + آدرس: {firstAddress}

  • diff --git a/components/appointment/information/Head.js b/components/appointment/information/Head.js index 7fe5ee7..2162194 100644 --- a/components/appointment/information/Head.js +++ b/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 (
    @@ -25,7 +33,7 @@ function Head({ doctor }) { {doctor?.name}

    - تخصص: {doctor?.expertise} + تخصص: {expertiseText}

    • diff --git a/components/appointment/location/Address.js b/components/appointment/location/Address.js index 7535791..af1a7cd 100644 --- a/components/appointment/location/Address.js +++ b/components/appointment/location/Address.js @@ -5,7 +5,7 @@ function Address({ doctor }) {

  • {`${item.name}: `}

    -

    {item.location}

    +

    {item.address || item.location}

    {doctor.address.length > idx + 1 && ( diff --git a/components/appointment/location/Head.js b/components/appointment/location/Head.js index db83784..a31fa6f 100644 --- a/components/appointment/location/Head.js +++ b/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 (
    profile

    - تخصص: {doctor?.expertise} + تخصص: {expertiseText}