Minor Fixes

src/components/DoctorSelector.jsx

@@ -9,12 +9,11 @@ const DoctorSelector = ({ doctors, selectedDoctorIndex, onChange }) => (
       onChange={(e) => onChange(e.target.value !== '' ? parseInt(e.target.value, 10) : null)}
       className="p-2 border border-gray-300 rounded-md"
       id="doc-select"
-      defaultValue={selectedDoctorIndex}
     >
       <option value="">Select a doctor</option>
       {doctors.map((doctor) => (
         <option key={doctor.id} value={doctor.id}>
-          {doctor.name}
+          {`${doctor.name}, ${doctor.specialization.name}`}
         </option>
       ))}
     </select>
@@ -26,8 +25,12 @@ DoctorSelector.propTypes = {
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
-  selectedDoctorIndex: PropTypes.number.isRequired,
+  selectedDoctorIndex: PropTypes.number,
   onChange: PropTypes.func.isRequired,
 };
 
+DoctorSelector.defaultProps = {
+  selectedDoctorIndex: null,
+};
+
 export default DoctorSelector;

src/components/TimeSelector.jsx

@@ -53,7 +53,6 @@ const TimeSelector = ({ selectedTime, doctor, onChange }) => {
         onChange={handleTimeChange}
         id="hour-select"
         className="p-2 border border-gray-300 rounded-md"
-        defaultValue={selectedTime}
       >
         <option value="">Select a time</option>
         {availableTimes.map((time) => (

src/routes/AppointmentUpdate.jsx

@@ -21,7 +21,7 @@ const AppointmentUpdate = () => {
   const doctorsState = useSelector((state) => state.doctors);
   const appointment = appointmentsState.appointments.filter((elem) => elem.id === +appId);
   const [selectedDate, setSelectedDate] = useState(
-    appointment[0]?.appointment_date || new Date(),
+    appointment[0]?.appointment_date ? new Date(appointment[0].appointment_date) : new Date(),
   );
   const [selectedTime, setSelectedTime] = useState(
     appointment[0]?.appointment_time || '',
@@ -82,15 +82,15 @@ const AppointmentUpdate = () => {
   return (
     <div className="flex flex-col items-center justify-center w-full min-h-screen p-4 space-y-4 bg-gray-100 appointment-booking-container">
       <div className="bg-white md:px-24 md:py-6 md:rounded-2xl md:border-2 md:border-green-400">
-        <h1 className="my-5 text-2xl font-bold text-center md:mt-10">Schedule a new Appointment</h1>
+        <h1 className="my-5 text-2xl font-bold text-center md:mt-10">Update Your Appointment</h1>
         <form className="flex flex-col items-center justify-center w-full gap-4">
           <DoctorSelector
             doctors={doctorsState.doctors}
             selectedDoctorIndex={selectedDoctorIndex}
             onChange={handleDoctorChange}
           />
           <DateSelector selectedDate={selectedDate} onChange={handleDateChange} />
-          {selectedDoctorIndex !== null && (
+          {selectedDoctorIndex !== null && doctorsState.doctors.length > 0 && (
             <TimeSelector
               selectedTime={selectedTime}
               doctor={

src/routes/CreateAppointment.jsx

@@ -15,7 +15,6 @@ const CreateAppointment = () => {
   const dispatch = useDispatch();
   const doctorsState = useSelector((state) => state.doctors);
   const navigate = useNavigate();
-
   useEffect(() => {
     dispatch(fetchdoctors());
   }, [dispatch]);