From 6d5da2d7231e0d7f27288fa3a1905576b0c779cb Mon Sep 17 00:00:00 2001
From: Uzair-Manzoor <uzair.kayani555@gmail.com>
Date: Wed, 14 Feb 2024 19:57:59 +0500
Subject: [PATCH] link doctorPage to appointmentPage to book an appointment

---
 .../appointmentForm/AppointmentForm.jsx       |  4 +---
 src/components/doctors/DoctorDetails.jsx      | 20 +++++++++++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/appointmentForm/AppointmentForm.jsx b/src/components/appointmentForm/AppointmentForm.jsx
index 09ddfcc..56260aa 100644
--- a/src/components/appointmentForm/AppointmentForm.jsx
+++ b/src/components/appointmentForm/AppointmentForm.jsx
@@ -134,9 +134,7 @@ function BookAppointment() {
                 onChange={handleInputChange}
                 value={selectedReason}
                 type="text"
-                placeholder="Enter-reason"
-                id="image"
-                name="image"
+                placeholder="Enter the reason"
                 required
               />
             </div>
diff --git a/src/components/doctors/DoctorDetails.jsx b/src/components/doctors/DoctorDetails.jsx
index 2b61dee..8053aa7 100644
--- a/src/components/doctors/DoctorDetails.jsx
+++ b/src/components/doctors/DoctorDetails.jsx
@@ -1,13 +1,29 @@
+import { useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { FaArrowLeft } from 'react-icons/fa';
 import styles from './doctorDetails.module.css';
+import { createAppointment } from '../../redux/appointment/appointmentsSlice';
 
 function DoctorDetails() {
   const { doctors } = useSelector((state) => state.doctors);
   const { id } = useParams();
   const doctor = doctors.doctors.find((p) => p.id === Number(id));
   const navigate = useNavigate();
+  const [doctorId] = useState();
+
+  const dispatch = useDispatch();
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const dataAppointment = {
+      appointment: {
+        doctor_id: doctorId,
+      },
+    };
+    dispatch(createAppointment(dataAppointment));
+    navigate('/doctors/book-appointment');
+  };
 
   return (
     <section className={styles.container}>
@@ -19,7 +35,7 @@ function DoctorDetails() {
         <h2 className={styles.doctor_name}>{doctor.name}</h2>
         <p>{doctor.bio}</p>
         <p>{doctor.specialization}</p>
-        <button className={styles.reserve_btn} type="button">Book an appointment</button>
+        <button className={styles.reserve_btn} onClick={handleSubmit} type="button">Book an appointment</button>
       </div>
     </section>
   );