refactor: pass doctorSlug prop to AppointmentList and ItemAppointment components

app/doctor/[slug]/page.js

@@ -24,7 +24,7 @@ async function Doctor({ params: { slug } }) {
 
   return (
     <Layout>
-      <DoctorPage doctor={doctor} comments={comments} />
+      <DoctorPage doctor={doctor} comments={comments} slug={slug} />
     </Layout>
   );
 }

components/doctor/appointmentList/ItemAppointment.js

@@ -6,7 +6,7 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
 
-function ItemAppointment({ turn, loading }) {
+function ItemAppointment({ turn, loading, doctorSlug }) {
   return (
     <li
       key={turn.id}
@@ -50,7 +50,7 @@ function ItemAppointment({ turn, loading }) {
             </p>
           </TextLoading>
         </div>
-        <Link href={loading ? "#" : `/appointment/${turn.id}`}>
+        <Link href={loading ? "#" : `/appointment/${doctorSlug}`}>
           <Button
             variant="contained"
             className="!py-2 !px-3 xl:!px-6 gap-1"

components/doctor/appointmentList/index.js

@@ -5,12 +5,12 @@ import ItemAppointment from "./ItemAppointment";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import Link from "next/link";
 
-function AppointmentList({ doctor, loading }) {
+function AppointmentList({ doctor, loading, doctorSlug }) {
   return (
     <>
       <ul className="hidden sticky top-[122px] sm:top-[150px] mt:top-[178px] lg:top-[206px] lg:flex w-[38%] flex-col justify-start items-center gap-8">
         {doctor && (
-          <ItemAppointment loading={loading} turn={doctor} key={doctor.id} />
+          <ItemAppointment loading={loading} turn={doctor} key={doctor.id} doctorSlug={doctorSlug} />
         )}
       </ul>
       <div
@@ -20,7 +20,7 @@ function AppointmentList({ doctor, loading }) {
         <p className="text-[#05BA58] text-[11px] font-normal">
           {doctor && doctor?.free_turn}
         </p>
-        <Link href={`/appointment/${doctor && doctor?.id}`}>
+        <Link href={`/appointment/${doctorSlug}`}>
           <Button
             variant="contained"
             className="!py-2 !px-4 gap-1 !text-[14px] !font-medium"

components/doctor/index.js

@@ -3,7 +3,7 @@ import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function DoctorPage({ doctor, comments }) {
+function DoctorPage({ doctor, comments, slug }) {
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <div className="flex items-center justify-between">
@@ -24,7 +24,7 @@ function DoctorPage({ doctor, comments }) {
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
         <DetailDoctor doctor={doctor} comments={comments} />
-        <AppointmentList doctor={doctor} />
+        <AppointmentList doctor={doctor} doctorSlug={slug} />
       </div>
     </div>
   );