Fixed Bug w/ RoleProvider Role Being Undefined

src/App.jsx

@@ -33,7 +33,6 @@ import NavbarContext from './utils/NavbarContext';
 import QRCodePage from './pages/QRCodePage';
 import PastEvents from './pages/PastEvents';
 import ViewEvents from './pages/ViewEvents';
-
 import { useDisclosure, useBreakpointValue, Box } from '@chakra-ui/react';
 
 const Layout = () => {
@@ -61,29 +60,35 @@ const Layout = () => {
 import { theme } from './utils/chakraTheme';
 import InputDataPage from './pages/InputDataPage';
 import VolunteerHomePage from './pages/VolunteerHomePage';
+import RoleConsumer from './components/RoleConsumer';
+
 
 const App = () => {
+
   return (
     <ChakraProvider theme={theme}>
       <Router>
         <RoleProvider>
           <UserProvider>
+            <RoleConsumer>
+            {role => (
             <Routes>
               <Route element={<Layout />}>
                 {/* Admin and Volunteer Pages */}
                 <Route
                   path="/"
                   element={
                     <ProtectedRoute pageType="volunteer">
-                      {RoleProvider.role == 'admin' ? <HomePage /> : <VolunteerHomePage />}
+                      {role == 'admin' ? <HomePage /> : <VolunteerHomePage />}
                     </ProtectedRoute>
                   }
                 />
+
                 <Route
                   path="/event"
                   element={
-                    <ProtectedRoute pageType="volunteer">
-                      {RoleProvider.role == 'admin' ? <EventPage /> : <VolunteerEventPage />}
+                    <ProtectedRoute pageType="volunteer" >
+                      {role == 'admin' ? <EventPage /> : <VolunteerEventPage />}
                     </ProtectedRoute>
                   }
                 />
@@ -265,6 +270,8 @@ const App = () => {
               <Route path="/profiles" element={<DummyProfiles />} />
               <Route path="/select-event" element={<SelectEvent />} />
             </Routes>
+            )}
+            </RoleConsumer>
           </UserProvider>
         </RoleProvider>
       </Router>

src/components/RoleConsumer.jsx

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import RoleContext from '../utils/RoleContext';
+
+const RoleConsumer = ({ children }) => {
+  const { role } = useContext(RoleContext);
+  return children(role);
+};
+
+export default RoleConsumer;