From b33e4f520cdb37253d09abeb8c2aad5192033ae2 Mon Sep 17 00:00:00 2001 From: Uzair-Manzoor Date: Tue, 13 Feb 2024 15:38:04 +0500 Subject: [PATCH 1/5] fix book appointment issues --- package-lock.json | 16 ++++++++-------- package.json | 2 +- .../appointmentForm/AppointmentForm.jsx | 8 ++++---- src/redux/appointment/appointmentsSlice.js | 11 +++++++---- 4 files changed, 20 insertions(+), 17 deletions(-) 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..e640020 100644 --- a/src/components/appointmentForm/AppointmentForm.jsx +++ b/src/components/appointmentForm/AppointmentForm.jsx @@ -25,7 +25,7 @@ function BookAppointment() { const [selectedTime, setSelectedTime] = useState(dayjs()); // 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(); @@ -63,7 +63,7 @@ function BookAppointment() { doctor_id: doctorId, }; dispatch(createAppointment(dataAppoinment)); - navigate('/myappointment'); + navigate('/doctors/my-appointments'); }; useEffect(() => { @@ -75,8 +75,8 @@ function BookAppointment() { }, [dispatch, selectedDoctor, selectedDate, selectedTime, id, name]); return ( -
-
+
+

Book Appointment

diff --git a/src/redux/appointment/appointmentsSlice.js b/src/redux/appointment/appointmentsSlice.js index f82759b..a32c516 100644 --- a/src/redux/appointment/appointmentsSlice.js +++ b/src/redux/appointment/appointmentsSlice.js @@ -1,14 +1,16 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; +import Cookies from 'js-cookie'; const url = 'http://localhost:3001'; const createAppointment = createAsyncThunk('user/createAppointment', async (data) => { try { - const response = await fetch(url, { + const token = Cookies.get('jwt_token'); + const response = await fetch(`${url}/api/v1/doctors/${data.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), }); @@ -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/doctors/${data.doctor_id}/appointments`, { headers, }); From 05e2b38b996679a001be899a878849253a4dcfbb Mon Sep 17 00:00:00 2001 From: Uzair-Manzoor Date: Wed, 14 Feb 2024 16:52:05 +0500 Subject: [PATCH 2/5] fix MyAppointmentForm style and functionality --- .../appointmentForm/AppointmentForm.jsx | 49 ++++++++++--------- .../appointmentForm/MyAppointments.jsx | 25 ++++++---- src/redux/appointment/appointmentsSlice.js | 10 ++-- 3 files changed, 46 insertions(+), 38 deletions(-) diff --git a/src/components/appointmentForm/AppointmentForm.jsx b/src/components/appointmentForm/AppointmentForm.jsx index e640020..09ddfcc 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,7 +21,7 @@ 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.doctors) || []; @@ -31,8 +30,7 @@ function BookAppointment() { 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,12 +53,15 @@ 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)); + dispatch(createAppointment(dataAppointment)); navigate('/doctors/my-appointments'); }; @@ -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,20 @@ function BookAppointment() { onChange={handleDateChange} /> - - -
+
+ +
diff --git a/src/redux/appointment/appointmentsSlice.js b/src/redux/appointment/appointmentsSlice.js index a32c516..5604c48 100644 --- a/src/redux/appointment/appointmentsSlice.js +++ b/src/redux/appointment/appointmentsSlice.js @@ -3,16 +3,16 @@ 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 token = Cookies.get('jwt_token'); - const response = await fetch(`${url}/api/v1/doctors/${data.doctor_id}/appointments`, { + const response = await fetch(`${url}/api/v1/doctors/${dataAppointment.appointment.doctor_id}/appointments`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}`, }, - body: JSON.stringify(data), + body: JSON.stringify(dataAppointment), }); if (!response.ok) { @@ -33,7 +33,7 @@ const fetchAppointments = createAsyncThunk('doctors/fetchAppointments', async () Authorization: `Bearer ${token}`, }; - const response = await fetch(`${url}/api/v1/doctors/${data.doctor_id}/appointments`, { + const response = await fetch(`${url}/api/v1/appointments`, { headers, }); @@ -42,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 }; } From 6d5da2d7231e0d7f27288fa3a1905576b0c779cb Mon Sep 17 00:00:00 2001 From: Uzair-Manzoor Date: Wed, 14 Feb 2024 19:57:59 +0500 Subject: [PATCH 3/5] 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 />
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 (
@@ -19,7 +35,7 @@ function DoctorDetails() {

{doctor.name}

{doctor.bio}

{doctor.specialization}

- +
); From fe95db5b41d1bd1e593e3842b7beeb9333a2f22a Mon Sep 17 00:00:00 2001 From: Uzair-Manzoor Date: Wed, 14 Feb 2024 20:45:31 +0500 Subject: [PATCH 4/5] remove unused code --- src/components/doctors/DoctorDetails.jsx | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/doctors/DoctorDetails.jsx b/src/components/doctors/DoctorDetails.jsx index 8053aa7..80605f8 100644 --- a/src/components/doctors/DoctorDetails.jsx +++ b/src/components/doctors/DoctorDetails.jsx @@ -1,27 +1,19 @@ -import { useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; -import { useSelector, useDispatch } from 'react-redux'; +import { useSelector } 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(); + // export const doctorId = (id) => { + // {id} + // } - const handleSubmit = (event) => { - event.preventDefault(); - const dataAppointment = { - appointment: { - doctor_id: doctorId, - }, - }; - dispatch(createAppointment(dataAppointment)); + const handleSubmit = () => { navigate('/doctors/book-appointment'); }; From 67db078823e4308e80be2d3e53a41ef89f39c669 Mon Sep 17 00:00:00 2001 From: Uzair-Manzoor Date: Wed, 14 Feb 2024 21:18:50 +0500 Subject: [PATCH 5/5] complete appointment functionality --- src/components/doctors/DoctorDetails.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/doctors/DoctorDetails.jsx b/src/components/doctors/DoctorDetails.jsx index 80605f8..914791b 100644 --- a/src/components/doctors/DoctorDetails.jsx +++ b/src/components/doctors/DoctorDetails.jsx @@ -9,12 +9,8 @@ function DoctorDetails() { const doctor = doctors.doctors.find((p) => p.id === Number(id)); const navigate = useNavigate(); - // export const doctorId = (id) => { - // {id} - // } - const handleSubmit = () => { - navigate('/doctors/book-appointment'); + navigate('/doctors/book-appointment', { state: { doctor } }); }; return (