diff --git a/package-lock.json b/package-lock.json index 6d3f868..b5a3a6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -3994,9 +3994,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.9", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.9.tgz", - "integrity": "sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==", + "version": "5.15.10", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.10.tgz", + "integrity": "sha512-qPv7B+LeMatYuzRjB3hlZUHqinHx/fX4YFBiaS19oC02A1e9JFuDKDvlyRQQ5oRSbJJt0QlaLTlr0IcauVcJRQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -4043,13 +4043,13 @@ } }, "node_modules/@mui/material": { - "version": "5.15.9", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.9.tgz", - "integrity": "sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg==", + "version": "5.15.10", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.10.tgz", + "integrity": "sha512-YJJGHjwDOucecjDEV5l9ISTCo+l9YeWrho623UajzoHRYxuKUmwrGVYOW4PKwGvCx9SU9oklZnbbi2Clc5XZHw==", "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.36", - "@mui/core-downloads-tracker": "^5.15.9", + "@mui/core-downloads-tracker": "^5.15.10", "@mui/system": "^5.15.9", "@mui/types": "^7.2.13", "@mui/utils": "^5.15.9", diff --git a/package.json b/package.json index f59e0c5..96172a1 100644 --- a/package.json +++ b/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", diff --git a/src/components/appointmentForm/AppointmentForm.jsx b/src/components/appointmentForm/AppointmentForm.jsx index e9af918..56260aa 100644 --- a/src/components/appointmentForm/AppointmentForm.jsx +++ b/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 ( -
-
+
+
-

Book Appointment

+

Book Appointment

@@ -127,16 +126,18 @@ function BookAppointment() { onChange={handleDateChange} /> - - -
+
+ +
diff --git a/src/components/doctors/DoctorDetails.jsx b/src/components/doctors/DoctorDetails.jsx index 2b61dee..914791b 100644 --- a/src/components/doctors/DoctorDetails.jsx +++ b/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 (
@@ -19,7 +23,7 @@ function DoctorDetails() {

{doctor.name}

{doctor.bio}

{doctor.specialization}

- +
); diff --git a/src/redux/appointment/appointmentsSlice.js b/src/redux/appointment/appointmentsSlice.js index f82759b..5604c48 100644 --- a/src/redux/appointment/appointmentsSlice.js +++ b/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 }; }