Fix appointment issues

package.json

@@ -7,7 +7,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/lab": "^5.0.0-alpha.165",
-    "@mui/material": "^5.15.9",
+    "@mui/material": "^5.15.10",
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
     "@mui/x-date-pickers": "^6.19.4",
     "@reduxjs/toolkit": "^2.1.0",

src/components/appointmentForm/AppointmentForm.jsx

@@ -8,7 +8,6 @@ import Select from '@mui/material/Select';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { fetchDoctors } from '../../redux/doctor/doctorSlice';
@@ -22,17 +21,16 @@ function BookAppointment() {
   const [doctorId, setDoctorId] = useState();
   const [selectedCity, setSelectedCity] = useState('');
   const [selectedDate, setSelectedDate] = useState(dayjs());
-  const [selectedTime, setSelectedTime] = useState(dayjs());
+  const [selectedReason, setSelectedReason] = useState('');
 
   // Ensure fetchedDoctors is initialized as an array
-  const fetchedDoctors = useSelector((state) => state.doctors.doctors) || [];
+  const fetchedDoctors = useSelector((state) => state.doctors.doctors.doctors) || [];
 
   const dispatch = useDispatch();
 
   const handleBookAppointment = () => {
     const formattedDate = selectedDate.format('YYYY-MM-DD');
-    const formattedTime = selectedTime.format('HH:mm:ss.SSS');
-    const formattedDateTime = `${formattedDate}T${formattedTime}Z`;
+    const formattedDateTime = `${formattedDate}`;
     return formattedDateTime;
   };
 
@@ -44,9 +42,7 @@ function BookAppointment() {
     setSelectedDate(newDate);
   };
 
-  const handleTimeChange = (newTime) => {
-    setSelectedTime(newTime);
-  };
+  const handleInputChange = (event) => { setSelectedReason(event.target.value); };
 
   const handleSelectedDoctor = (event) => {
     const doctor = event.target.value;
@@ -57,13 +53,16 @@ function BookAppointment() {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    const dataAppoinment = {
-      appointment_time: handleBookAppointment(),
-      city: selectedCity,
-      doctor_id: doctorId,
+    const dataAppointment = {
+      appointment: {
+        date: handleBookAppointment(),
+        city: selectedCity,
+        doctor_id: doctorId,
+        reason: selectedReason,
+      },
     };
-    dispatch(createAppointment(dataAppoinment));
-    navigate('/myappointment');
+    dispatch(createAppointment(dataAppointment));
+    navigate('/doctors/my-appointments');
   };
 
   useEffect(() => {
@@ -72,14 +71,14 @@ function BookAppointment() {
       setSelectedDoctor(name);
     }
     dispatch(fetchDoctors());
-  }, [dispatch, selectedDoctor, selectedDate, selectedTime, id, name]);
+  }, [dispatch, selectedDoctor, selectedDate, id, name]);
 
   return (
-    <div className="flex flex-row justify-center items-center md:items-end w-[100vw] h-[100vh] overflow-hidden">
-      <div className="flex flex-col h-full items-center md:items-end w-[85%] bg-white justify-center overflow-hidden">
+    <div className="flex flex-row justify-center items-center w-[100%] h-[100vh]">
+      <div className="flex flex-col h-full items-center md:items-end bg-white justify-center">
         <div className="flex h-full flex-col justify-center  items-end gap-12 md:pr-16 pr-0 w-full">
           <div>
-            <h1 className="md:text-right md:text-slate-800 text-4xl md:text-6xl md:font-bold  font-bold text-center md:font-['Inter'] md:leading-[72px]">Book Appointment</h1>
+            <h1 className="md:text-right text-4xl md:text-6xl md:font-bold font-bold text-center md:font-['Inter'] md:leading-[72px]">Book Appointment</h1>
           </div>
           <form className="flex w-full md:max-w-fit flex-col md:flex-row items-center justify-center gap-6 md:pl-8">
             <FormControl className="flex md:flex-1 flex-none w-full" sx={{ m: 1, minWidth: 200 }}>
@@ -127,16 +126,18 @@ function BookAppointment() {
                     onChange={handleDateChange}
                   />
                 </DemoContainer>
-                <DemoContainer components={['TimePicker']}>
-                  <TimePicker
-                    className="flex md:flex-1 flex-none"
-                    label="Select a time"
-                    value={selectedTime}
-                    onChange={handleTimeChange}
-                  />
-                </DemoContainer>
               </LocalizationProvider>
             </div>
+            <div>
+              <input
+                className="w-60 h-14 border border-solid border-gray-300 border-1"
+                onChange={handleInputChange}
+                value={selectedReason}
+                type="text"
+                placeholder="Enter the reason"
+                required
+              />
+            </div>
           </form>
           <div className="flex w-full justify-center md:justify-end">
             <button

src/components/appointmentForm/MyAppointments.jsx

@@ -7,6 +7,8 @@ function MyAppointments() {
   const isLoading = useSelector((state) => state.appointments.isLoading);
   const error = useSelector((state) => state.appointments.error);
   const appointments = useSelector((state) => state.appointments.appointments);
+  const fetchedDoctors = useSelector((state) => state.doctors.doctors.doctors) || [];
+  const names = fetchedDoctors.map(({ id, name }) => ({ id, name }));
 
   useEffect(() => {
     dispatch(fetchAppointments());
@@ -37,20 +39,23 @@ function MyAppointments() {
               <thead className="text-xs bg-primary main-bg-dark dark:bg-secondary dark:text-gray-800">
                 <tr>
                   <th className="text-start text-base px-2 md:px-6 py-2">Doctor Name</th>
-                  <th className="text-start text-base px-2 md:px-6 py-2">Appointment Time</th>
+                  <th className="text-start text-base px-2 md:px-6 py-2">Appointment Date</th>
                   <th className="text-start text-base px-2 md:px-6 py-2">City</th>
+                  <th className="text-start text-base px-2 md:px-6 py-2">Reason</th>
                 </tr>
               </thead>
               <tbody>
-                {/* {appointments?.map((appointment) => (
-                  <tr key={appointment.id} className="bg-white border-b dark:border-gray-300">
-                    <td className="text-gray-600 px-2 md:px-6 py-2 font-medium">
-                    {appointment.doctor_name}</td>
-                    <td className="text-gray-600 px-2 md:px-6 py-2">
-                    {appointment.appointment_time}</td>
-                    <td className="text-gray-600 px-2 md:px-6 py-2">{appointment.city}</td>
-                  </tr>
-                ))} */}
+                {appointments?.map((appointment) => {
+                  const name = names.find((doctor) => doctor.id === appointment.doctor_id)?.name;
+                  return (
+                    <tr key={appointment.id} className="bg-white border-b dark:border-gray-300">
+                      <td className="text-gray-600 px-2 md:px-6 py-2 font-medium">{name}</td>
+                      <td className="text-gray-600 px-2 md:px-6 py-2">{appointment.date}</td>
+                      <td className="text-gray-600 px-2 md:px-6 py-2">{appointment.city}</td>
+                      <td className="text-gray-600 px-2 md:px-6 py-2">{appointment.reason}</td>
+                    </tr>
+                  );
+                })}
               </tbody>
             </table>
           </div>

src/components/doctors/DoctorDetails.jsx

@@ -9,6 +9,10 @@ function DoctorDetails() {
   const doctor = doctors.doctors.find((p) => p.id === Number(id));
   const navigate = useNavigate();
 
+  const handleSubmit = () => {
+    navigate('/doctors/book-appointment', { state: { doctor } });
+  };
+
   return (
     <section className={styles.container}>
       <button className={styles.btn} type="button" aria-label="back" onClick={() => navigate(-1)}><FaArrowLeft /></button>
@@ -19,7 +23,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>
   );

src/redux/appointment/appointmentsSlice.js

@@ -1,16 +1,18 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import Cookies from 'js-cookie';
 
 const url = 'http://localhost:3001';
 
-const createAppointment = createAsyncThunk('user/createAppointment', async (data) => {
+const createAppointment = createAsyncThunk('user/createAppointment', async (dataAppointment) => {
   try {
-    const response = await fetch(url, {
+    const token = Cookies.get('jwt_token');
+    const response = await fetch(`${url}/api/v1/doctors/${dataAppointment.appointment.doctor_id}/appointments`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${JSON.parse(localStorage.getItem('user'))?.token}`,
+        Authorization: `Bearer ${token}`,
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(dataAppointment),
     });
 
     if (!response.ok) {
@@ -25,12 +27,13 @@ const createAppointment = createAsyncThunk('user/createAppointment', async (data
 
 const fetchAppointments = createAsyncThunk('doctors/fetchAppointments', async () => {
   try {
+    const token = Cookies.get('jwt_token');
     const headers = {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${JSON.parse(localStorage.getItem('user'))?.token}`,
+      Authorization: `Bearer ${token}`,
     };
 
-    const response = await fetch(url, {
+    const response = await fetch(`${url}/api/v1/appointments`, {
       headers,
     });
 
@@ -39,7 +42,7 @@ const fetchAppointments = createAsyncThunk('doctors/fetchAppointments', async ()
     }
 
     const data = await response.json();
-    return data;
+    return data.appointments;
   } catch (error) {
     return { error: error.message };
   }