Final Frontend Integration, Role-Based Routing, and Navigation in React
In this lab, you will perform the final frontend integration of the Medicare Healthcare Management System by connecting and verifying the major React components, routes, and navigation flows
Business Scenario
Pre-Lab Preparation
Module:
1. React Frontend Setup: Ensure the Medicare React project is configured with React Router, Axios, and Bootstrap.
2. Backend and Authentication: Ensure the Spring Boot backend, MySQL database, JWT authentication, and Patient/Doctor login functionality are working correctly.
3. Frontend Components: Ensure Patient and Doctor dashboards, appointment management, profile, and prescription components are implemented and ready for testing.
Phase 12J — Final Frontend Wiring
After this phase, these should all work
PATIENT
├── Dashboard
├── Doctors
├── Book Appointment
├── My Appointments
├── View Prescription
└── My Profile
PATIENT
├── Dashboard
├── Doctors
├── Book Appointment
├── My Appointments
├── View Prescription
└── My Profile
DOCTOR
├── Dashboard
├── My Schedule
├── Complete Appointment
├── Prescription
└── My Profile
Since you had some confusion earlier with partial file modifications, for this phase I’ll give you the complete final versions of the important wiring files
1
Final router.jsx
Replace:
src/routes/router.jsx
with:
import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;This should now be your final Phase 12 route configuration.
2
Final ProtectedRoute.jsx
Verify:
src/routes/ProtectedRoute.jsxis:
import {
Navigate
} from "react-router";
import {
useAuth
} from "../context/AuthContext";
function ProtectedRoute({
children,
allowedRoles = []
}) {
const {
user,
isAuthenticated
} = useAuth();
// User is not logged in
if (!isAuthenticated) {
return (
<Navigate
to="/login"
replace
/>
);
}
// User is logged in,
// but doesn't have required role
if (
allowedRoles.length > 0
&&
!allowedRoles.includes(
user?.role
)
) {
return (
<Navigate
to="/unauthorized"
replace
/>
);
}
return children;
}
export default ProtectedRoute;import {
createBrowserRouter
} from "react-router";
import MainLayout
from "../components/layout/MainLayout";
import ProtectedRoute
from "./ProtectedRoute";
// COMMON PAGES
import Home
from "../pages/common/Home";
import Unauthorized
from "../pages/common/Unauthorized";
import NotFound
from "../pages/common/NotFound";
// AUTH PAGES
import Login
from "../pages/auth/Login";
import Register
from "../pages/auth/Register";
// PATIENT PAGES
import PatientDashboard
from "../pages/patient/PatientDashboard";
import Doctors
from "../pages/patient/Doctors";
import BookAppointment
from "../pages/patient/BookAppointment";
import MyAppointments
from "../pages/patient/MyAppointments";
import MyProfile
from "../pages/patient/MyProfile";
// DOCTOR PAGES
import DoctorDashboard
from "../pages/doctor/DoctorDashboard";
import DoctorSchedule
from "../pages/doctor/DoctorSchedule";
import DoctorProfile
from "../pages/doctor/DoctorProfile";
import DoctorPrescription
from "../pages/doctor/DoctorPrescription";
const router =
createBrowserRouter([
{
path: "/",
element:
<MainLayout />,
children: [
// -----------------------------------
// PUBLIC ROUTES
// -----------------------------------
{
index: true,
element:
<Home />
},
{
path: "login",
element:
<Login />
},
{
path: "register",
element:
<Register />
},
// -----------------------------------
// PATIENT ROUTES
// -----------------------------------
{
path:
"patient/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<PatientDashboard />
</ProtectedRoute>
)
},
{
path:
"patient/doctors",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<Doctors />
</ProtectedRoute>
)
},
{
path:
"patient/doctors/:doctorId/book",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<BookAppointment />
</ProtectedRoute>
)
},
{
path:
"patient/appointments",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyAppointments />
</ProtectedRoute>
)
},
{
path:
"patient/profile",
element: (
<ProtectedRoute
allowedRoles={[
"PATIENT"
]}
>
<MyProfile />
</ProtectedRoute>
)
},
// -----------------------------------
// DOCTOR ROUTES
// -----------------------------------
{
path:
"doctor/dashboard",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorDashboard />
</ProtectedRoute>
)
},
{
path:
"doctor/schedule",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorSchedule />
</ProtectedRoute>
)
},
{
path:
"doctor/profile",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorProfile />
</ProtectedRoute>
)
},
{
path:
"doctor/appointments/:appointmentId/prescription",
element: (
<ProtectedRoute
allowedRoles={[
"DOCTOR"
]}
>
<DoctorPrescription />
</ProtectedRoute>
)
},
// -----------------------------------
// COMMON ROUTES
// -----------------------------------
{
path:
"unauthorized",
element:
<Unauthorized />
},
{
path: "*",
element:
<NotFound />
}
]
}
]);
export default router;import {
Navigate
} from "react-router";
import {
useAuth
} from "../context/AuthContext";
function ProtectedRoute({
children,
allowedRoles = []
}) {
const {
user,
isAuthenticated
} = useAuth();
// User is not logged in
if (!isAuthenticated) {
return (
<Navigate
to="/login"
replace
/>
);
}
// User is logged in,
// but doesn't have required role
if (
allowedRoles.length > 0
&&
!allowedRoles.includes(
user?.role
)
) {
return (
<Navigate
to="/unauthorized"
replace
/>
);
}
return children;
}
export default ProtectedRoute;import {
Navigate
} from "react-router";
import {
useAuth
} from "../context/AuthContext";
function ProtectedRoute({
children,
allowedRoles = []
}) {
const {
user,
isAuthenticated
} = useAuth();
// User is not logged in
if (!isAuthenticated) {
return (
<Navigate
to="/login"
replace
/>
);
}
// User is logged in,
// but doesn't have required role
if (
allowedRoles.length > 0
&&
!allowedRoles.includes(
user?.role
)
) {
return (
<Navigate
to="/unauthorized"
replace
/>
);
}
return children;
}
export default ProtectedRoute;The important concept remains:
ProtectedRoute
↓
Frontend UX protection
Spring Security
↓
Actual securityNever depend only on React for authorization.
3
Final MainLayout.jsx
Never depend only on React for authorization.
Verify:
src/components/layout/MainLayout.jsx
import {
Outlet
} from "react-router";
import Navbar
from "../navbar/Navbar";
function MainLayout() {
return (
<>
<Navbar />
<main>
<Outlet />
</main>
</>
);
}
export default MainLayout;import {
Outlet
} from "react-router";
import Navbar
from "../navbar/Navbar";
function MainLayout() {
return (
<>
<Navbar />
<main>
<Outlet />
</main>
</>
);
}
export default MainLayout;Outlet renders whichever child route currently matches. That is exactly what React Router documents it for. React Router
4
Improve Navbar with active links
Now let's polish the Navbar slightly.
Replace:
src/components/navbar/Navbar.jsx
import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;import {
Link,
NavLink,
useNavigate
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Navbar() {
const navigate =
useNavigate();
const {
user,
isAuthenticated,
logout
} = useAuth();
const handleLogout = () => {
logout();
navigate(
"/login"
);
};
const getNavClass =
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
};
return (
<nav
className="
navbar
navbar-expand-lg
bg-white
border-bottom
shadow-sm
"
>
<div className="container">
{/* BRAND */}
<Link
className="
navbar-brand
fw-bold
text-primary
"
to="/"
>
Medicare
</Link>
{/* MOBILE BUTTON */}
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
>
<span
className="navbar-toggler-icon"
>
</span>
</button>
<div
className="
collapse
navbar-collapse
"
id="mainNavbar"
>
<ul
className="
navbar-nav
ms-auto
align-items-lg-center
"
>
{/* -------------------------------- */}
{/* LOGGED OUT */}
{/* -------------------------------- */}
{
!isAuthenticated
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/login"
>
Login
</NavLink>
</li>
<li className="nav-item">
<Link
className="
btn
btn-primary
ms-lg-2
"
to="/register"
>
Register
</Link>
</li>
</>
)
}
{/* -------------------------------- */}
{/* PATIENT */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"PATIENT"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/doctors"
>
Doctors
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/appointments"
>
My Appointments
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/patient/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* DOCTOR */}
{/* -------------------------------- */}
{
isAuthenticated
&&
user?.role ===
"DOCTOR"
&& (
<>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/dashboard"
>
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/schedule"
>
My Schedule
</NavLink>
</li>
<li className="nav-item">
<NavLink
className={
getNavClass
}
to="/doctor/profile"
>
My Profile
</NavLink>
</li>
</>
)
}
{/* -------------------------------- */}
{/* LOGOUT */}
{/* -------------------------------- */}
{
isAuthenticated
&& (
<li className="nav-item ms-lg-3">
<button
type="button"
className="
btn
btn-outline-danger
"
onClick={
handleLogout
}
>
Logout
</button>
</li>
)
}
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;NavLink is useful here because it provides active-route information, letting us visually highlight the current page. It remains supported in current React Router data-router mode. React Router
5
Why switch Navbar Link → NavLink?
Ordinary:
<Link>
navigates.
But:
<NavLink>
navigates and tells us whether that route is active.
We use:
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
}
({ isActive }) => {
return isActive
? "nav-link active fw-semibold"
: "nav-link";
}
So if patient is currently on:
/patient/appointments
Navbar visually highlights:
My Appointments
Small change, much nicer UI.
6
Final Home.jsx
Let's also clean the homepage so logged-in users don't unnecessarily see only Login/Register buttons.
Replace:
src/pages/common/Home.jsx
with:
import {
Link
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Home() {
const {
user,
isAuthenticated
} = useAuth();
const getDashboardPath = () => {
if (
user?.role === "PATIENT"
) {
return "/patient/dashboard";
}
if (
user?.role === "DOCTOR"
) {
return "/doctor/dashboard";
}
return "/";
};
return (
<div className="container py-5">
<div
className="
row
justify-content-center
text-center
py-5
"
>
<div className="col-lg-8">
<h1
className="
display-5
fw-bold
text-primary
mb-3
"
>
Medicare Healthcare
</h1>
<p
className="
lead
text-secondary
mb-4
"
>
Find doctors,
manage appointments
and access your
prescriptions from
one place.
</p>
{
isAuthenticated
? (
<>
<p className="mb-3">
Welcome back,{" "}
<strong>
{user?.name}
</strong>
</p>
<Link
to={
getDashboardPath()
}
className="
btn
btn-primary
btn-lg
"
>
Go to Dashboard
</Link>
</>
)
: (
<div
className="
d-flex
justify-content-center
gap-3
"
>
<Link
to="/login"
className="
btn
btn-primary
btn-lg
"
>
Login
</Link>
<Link
to="/register"
className="
btn
btn-outline-primary
btn-lg
"
>
Register
</Link>
</div>
)
}
</div>
</div>
</div>
);
}
export default Home;import {
Link
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Home() {
const {
user,
isAuthenticated
} = useAuth();
const getDashboardPath = () => {
if (
user?.role === "PATIENT"
) {
return "/patient/dashboard";
}
if (
user?.role === "DOCTOR"
) {
return "/doctor/dashboard";
}
return "/";
};
return (
<div className="container py-5">
<div
className="
row
justify-content-center
text-center
py-5
"
>
<div className="col-lg-8">
<h1
className="
display-5
fw-bold
text-primary
mb-3
"
>
Medicare Healthcare
</h1>
<p
className="
lead
text-secondary
mb-4
"
>
Find doctors,
manage appointments
and access your
prescriptions from
one place.
</p>
{
isAuthenticated
? (
<>
<p className="mb-3">
Welcome back,{" "}
<strong>
{user?.name}
</strong>
</p>
<Link
to={
getDashboardPath()
}
className="
btn
btn-primary
btn-lg
"
>
Go to Dashboard
</Link>
</>
)
: (
<div
className="
d-flex
justify-content-center
gap-3
"
>
<Link
to="/login"
className="
btn
btn-primary
btn-lg
"
>
Login
</Link>
<Link
to="/register"
className="
btn
btn-outline-primary
btn-lg
"
>
Register
</Link>
</div>
)
}
</div>
</div>
</div>
);
}
export default Home;import {
Link
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Home() {
const {
user,
isAuthenticated
} = useAuth();
const getDashboardPath = () => {
if (
user?.role === "PATIENT"
) {
return "/patient/dashboard";
}
if (
user?.role === "DOCTOR"
) {
return "/doctor/dashboard";
}
return "/";
};
return (
<div className="container py-5">
<div
className="
row
justify-content-center
text-center
py-5
"
>
<div className="col-lg-8">
<h1
className="
display-5
fw-bold
text-primary
mb-3
"
>
Medicare Healthcare
</h1>
<p
className="
lead
text-secondary
mb-4
"
>
Find doctors,
manage appointments
and access your
prescriptions from
one place.
</p>
{
isAuthenticated
? (
<>
<p className="mb-3">
Welcome back,{" "}
<strong>
{user?.name}
</strong>
</p>
<Link
to={
getDashboardPath()
}
className="
btn
btn-primary
btn-lg
"
>
Go to Dashboard
</Link>
</>
)
: (
<div
className="
d-flex
justify-content-center
gap-3
"
>
<Link
to="/login"
className="
btn
btn-primary
btn-lg
"
>
Login
</Link>
<Link
to="/register"
className="
btn
btn-outline-primary
btn-lg
"
>
Register
</Link>
</div>
)
}
</div>
</div>
</div>
);
}
export default Home;import {
Link
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Home() {
const {
user,
isAuthenticated
} = useAuth();
const getDashboardPath = () => {
if (
user?.role === "PATIENT"
) {
return "/patient/dashboard";
}
if (
user?.role === "DOCTOR"
) {
return "/doctor/dashboard";
}
return "/";
};
return (
<div className="container py-5">
<div
className="
row
justify-content-center
text-center
py-5
"
>
<div className="col-lg-8">
<h1
className="
display-5
fw-bold
text-primary
mb-3
"
>
Medicare Healthcare
</h1>
<p
className="
lead
text-secondary
mb-4
"
>
Find doctors,
manage appointments
and access your
prescriptions from
one place.
</p>
{
isAuthenticated
? (
<>
<p className="mb-3">
Welcome back,{" "}
<strong>
{user?.name}
</strong>
</p>
<Link
to={
getDashboardPath()
}
className="
btn
btn-primary
btn-lg
"
>
Go to Dashboard
</Link>
</>
)
: (
<div
className="
d-flex
justify-content-center
gap-3
"
>
<Link
to="/login"
className="
btn
btn-primary
btn-lg
"
>
Login
</Link>
<Link
to="/register"
className="
btn
btn-outline-primary
btn-lg
"
>
Register
</Link>
</div>
)
}
</div>
</div>
</div>
);
}
export default Home;import {
Link
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Home() {
const {
user,
isAuthenticated
} = useAuth();
const getDashboardPath = () => {
if (
user?.role === "PATIENT"
) {
return "/patient/dashboard";
}
if (
user?.role === "DOCTOR"
) {
return "/doctor/dashboard";
}
return "/";
};
return (
<div className="container py-5">
<div
className="
row
justify-content-center
text-center
py-5
"
>
<div className="col-lg-8">
<h1
className="
display-5
fw-bold
text-primary
mb-3
"
>
Medicare Healthcare
</h1>
<p
className="
lead
text-secondary
mb-4
"
>
Find doctors,
manage appointments
and access your
prescriptions from
one place.
</p>
{
isAuthenticated
? (
<>
<p className="mb-3">
Welcome back,{" "}
<strong>
{user?.name}
</strong>
</p>
<Link
to={
getDashboardPath()
}
className="
btn
btn-primary
btn-lg
"
>
Go to Dashboard
</Link>
</>
)
: (
<div
className="
d-flex
justify-content-center
gap-3
"
>
<Link
to="/login"
className="
btn
btn-primary
btn-lg
"
>
Login
</Link>
<Link
to="/register"
className="
btn
btn-outline-primary
btn-lg
"
>
Register
</Link>
</div>
)
}
</div>
</div>
</div>
);
}
export default Home;import {
Link
} from "react-router";
import {
useAuth
} from "../../context/AuthContext";
function Home() {
const {
user,
isAuthenticated
} = useAuth();
const getDashboardPath = () => {
if (
user?.role === "PATIENT"
) {
return "/patient/dashboard";
}
if (
user?.role === "DOCTOR"
) {
return "/doctor/dashboard";
}
return "/";
};
return (
<div className="container py-5">
<div
className="
row
justify-content-center
text-center
py-5
"
>
<div className="col-lg-8">
<h1
className="
display-5
fw-bold
text-primary
mb-3
"
>
Medicare Healthcare
</h1>
<p
className="
lead
text-secondary
mb-4
"
>
Find doctors,
manage appointments
and access your
prescriptions from
one place.
</p>
{
isAuthenticated
? (
<>
<p className="mb-3">
Welcome back,{" "}
<strong>
{user?.name}
</strong>
</p>
<Link
to={
getDashboardPath()
}
className="
btn
btn-primary
btn-lg
"
>
Go to Dashboard
</Link>
</>
)
: (
<div
className="
d-flex
justify-content-center
gap-3
"
>
<Link
to="/login"
className="
btn
btn-primary
btn-lg
"
>
Login
</Link>
<Link
to="/register"
className="
btn
btn-outline-primary
btn-lg
"
>
Register
</Link>
</div>
)
}
</div>
</div>
</div>
);
}
export default Home;Now:
Not logged in
↓
Login / Register
Logged-in Patient
↓
Go to Patient Dashboard
Logged-in Doctor
↓
Go to Doctor DashboardNot logged in
↓
Login / Register
Logged-in Patient
↓
Go to Patient Dashboard
Logged-in Doctor
↓
Go to Doctor Dashboard7
Verify main.jsx
You probably already have this correct.
It should be:
import React from "react";
import ReactDOM
from "react-dom/client";
import {
RouterProvider
} from "react-router/dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import "./index.css";
import router
from "./routes/router";
import {
AuthProvider
} from "./context/AuthContext";
ReactDOM
.createRoot(
document.getElementById(
"root"
)
)
.render(
<React.StrictMode>
<AuthProvider>
<RouterProvider
router={
router
}
/>
</AuthProvider>
</React.StrictMode>
);import React from "react";
import ReactDOM
from "react-dom/client";
import {
RouterProvider
} from "react-router/dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import "./index.css";
import router
from "./routes/router";
import {
AuthProvider
} from "./context/AuthContext";
ReactDOM
.createRoot(
document.getElementById(
"root"
)
)
.render(
<React.StrictMode>
<AuthProvider>
<RouterProvider
router={
router
}
/>
</AuthProvider>
</React.StrictMode>
);import React from "react";
import ReactDOM
from "react-dom/client";
import {
RouterProvider
} from "react-router/dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import "./index.css";
import router
from "./routes/router";
import {
AuthProvider
} from "./context/AuthContext";
ReactDOM
.createRoot(
document.getElementById(
"root"
)
)
.render(
<React.StrictMode>
<AuthProvider>
<RouterProvider
router={
router
}
/>
</AuthProvider>
</React.StrictMode>
);This also matches the current documented data-router setup: create the router outside the React tree and provide it to RouterProvider. React Router
8
Final Patient Route Test
Login as:
PATIENTYou should now be able to move through:
Login
↓
Patient Dashboard
↓
Doctors
↓
Search / Filter
↓
Book Appointment
↓
My Appointments
↓
Cancel Appointment
or
COMPLETED
↓
View Prescription
and
My ProfileLogin
↓
Patient Dashboard
↓
Doctors
↓
Search / Filter
↓
Book Appointment
↓
My Appointments
↓
Cancel Appointment
or
COMPLETED
↓
View Prescription
and
My ProfileTry manually opening:
/doctor/dashboard
Expected:
/unauthorized
9
Final Doctor Route Test
Login as:
DOCTOR
Test:
Doctor Dashboard
↓
My Schedule
↓
Patient Appointment
↓
Mark Completed
↓
Prescription
↓
Diagnosis
Medicines
Notes
↓
Save PrescriptionDoctor Dashboard
↓
My Schedule
↓
Patient Appointment
↓
Mark Completed
↓
Prescription
↓
Diagnosis
Medicines
Notes
↓
Save PrescriptionAlso
Doctor Dashboard
↓
My Profile
↓
Create / Update Profile
Try manually opening:
/patient/dashboard
Expected:
/unauthorized
10
Final Auth Test
Test logout:
Logged in
↓
Logout
↓
localStorage token removed
↓
localStorage user removed
↓
/loginThen manually enter:
/patient/dashboard
or:
/doctor/dashboard
Expected:
/login
11
Check Browser Storage
While logged in
DevTools
↓
Application
↓
Local Storage
You should have:
token
user
You should not have:
password ❌
12
Check Network Requests
For protected API calls:
GET /api/users/me
GET /api/doctors
POST /api/appointments
GET /api/appointments/my
GET /api/appointments/doctor/me
PATCH /cancel
PATCH /complete
POST /api/prescriptions
GET /api/prescriptions/appointment/{id}GET /api/users/me
GET /api/doctors
POST /api/appointments
GET /api/appointments/my
GET /api/appointments/doctor/me
PATCH /cancel
PATCH /complete
POST /api/prescriptions
GET /api/prescriptions/appointment/{id}verify:
Authorization: Bearer eyJ...
is present.
12
Final Phase 12 Architecture
At this point our frontend is
React UI
↓
Pages
↓
Reusable Components
↓
Service Files
↓
api.js
↓
Axios
↓
Authorization: Bearer JWT
↓
Spring Boot REST API
↓
Spring Security
↓
Service Layer
↓
JPA
↓
MySQLReact UI
↓
Pages
↓
Reusable Components
↓
Service Files
↓
api.js
↓
Axios
↓
Authorization: Bearer JWT
↓
Spring Boot REST API
↓
Spring Security
↓
Service Layer
↓
JPA
↓
MySQLAnd our state strategy remains nice and simple:
Global:
AuthContext
Local:
useState
Lifecycle:
useEffect
Routing:
createBrowserRouter
Styling:
Bootstrap
API:
Axios + Service Files
Global:
AuthContext
Local:
useState
Lifecycle:
useEffect
Routing:
createBrowserRouter
Styling:
Bootstrap
API:
Axios + Service Files
Phase 12 is now essentially complete
After 12J testing succeeds:
12A Foundation
12B Authentication
12C Navbar/Profile
12D Doctor Search
12E Book Appointment
12F Patient Appointments
12G Doctor Schedule
12H Doctor Profile
12I Prescription
12J Cleanup & Wiring
The entire core React frontend is done
Next — Phase 13: Razorpay Payment
This is the next major step, and it requires changes to both Spring Boot and React.
We will not just drop Razorpay code into BookAppointment.jsx. We’ll build the payment flow properly:
Patient chooses
Doctor + Date + Slot
↓
Create Appointment
PENDING + UNPAID
↓
Spring Boot
creates Razorpay Order
↓
Razorpay Checkout
↓
Patient pays
↓
Razorpay returns
paymentId
orderId
signature
↓
React sends them
to Spring Boot
↓
Backend verifies signature
↓
Valid
↓
Appointment
CONFIRMED + PAIDPatient chooses
Doctor + Date + Slot
↓
Create Appointment
PENDING + UNPAID
↓
Spring Boot
creates Razorpay Order
↓
Razorpay Checkout
↓
Patient pays
↓
Razorpay returns
paymentId
orderId
signature
↓
React sends them
to Spring Boot
↓
Backend verifies signature
↓
Valid
↓
Appointment
CONFIRMED + PAIDThat is the next implementation phase.
Great job!
Verify that all Patient and Doctor pages, protected routes, navigation links, authentication, logout functionality, and API integrations work correctly without errors.
Checkpoint
Git Push
git push origin branchNameNext-Lab Preparation
Module:
1. Razorpay Account Setup: Create a Razorpay account, enable Test Mode, generate API Key ID and Key Secret, and configure automatic payment capture.
2. Backend Preparation: Ensure the Spring Boot backend, MySQL database, JWT authentication, and appointment booking APIs are working correctly.
3. Frontend Preparation: Ensure the React application supports appointment booking and displays appointment status (PENDING) and payment status (UNPAID) before integrating Razorpay Checkout.