Set student view and updated role permissions (#47)

Co-authored-by: Ethan Ho <[email protected]> Co-authored-by: ThatMegamind <[email protected]>
ctc-uci · Mar 5, 2024 · 2a1a57f · 2a1a57f
1 parent 035081f
commit 2a1a57f
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 40 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -15,26 +15,29 @@ import PublishedSchedule from './pages/PublishedSchedule/PublishedSchedule';
 import Playground from './pages/Playground/Playground';
 import Planner from './pages/Planner/Planner';
 import Navbar from './components/Navbar/Navbar';
-import { auth, getCurrentUser } from './utils/auth_utils';
 import NotificationSandbox from './pages/NotificationSandbox/NotificationSandbox';
+import { AuthContextProvider, useAuthContext } from './common/AuthContext';
 
 const { ADMIN_ROLE, USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
-const currentUser = getCurrentUser(auth);
-console.log(currentUser);
 
 const App = () => {
-  const NavBarWrapper = () => (
-    <>
-      <Navbar />
-      <Outlet />
-    </>
-  );
+  const NavBarWrapper = () => {
+    const { currentUser } = useAuthContext();
+    return (
+      <>
+        <Navbar hasLoaded={currentUser != null} isAdmin={currentUser?.type === ADMIN_ROLE}/>
+        <Outlet />
+      </>
+    );
+  };
+
   return (
     <ChakraProvider>
       <CookiesProvider>
+      <AuthContextProvider>
         <Router>
           <Routes>
-            <Route element={currentUser ? <NavBarWrapper /> : null}>
+            <Route element={<NavBarWrapper />}>
               <Route
                 exact
                 path="/"
@@ -66,7 +69,7 @@ const App = () => {
                   <ProtectedRoute
                     Component={Catalog}
                     redirectPath="/login"
-                    roles={[ADMIN_ROLE, USER_ROLE]}
+                    roles={[ADMIN_ROLE]}
                   />
                 }
               />
@@ -82,10 +85,17 @@ const App = () => {
                 }
               />
               <Route exact path="/playground" element={<Playground />} />
-              <Route exact path="/planner" element={<Planner />} />
+              <Route exact path="/planner" element={
+                  <ProtectedRoute
+                    Component={Planner}
+                    redirectPath="/login"
+                    roles={[ADMIN_ROLE]}
+                  />
+                } />
             </Route>
           </Routes>
         </Router>
+        </AuthContextProvider>
       </CookiesProvider>
     </ChakraProvider>
   );

diff --git a/src/common/AuthContext.jsx b/src/common/AuthContext.jsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import { createContext, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const AuthContext = createContext({
+  currentUser: null,
+  setCurrentUser: () => {},
+});
+
+const useAuthContext = () => {
+  return useContext(AuthContext);
+};
+
+const AuthContextProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState(null);
+  return (
+    <AuthContext.Provider value={{ currentUser, setCurrentUser }}>{children}</AuthContext.Provider>
+  );
+};
+
+AuthContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export { useAuthContext, AuthContextProvider };
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,9 +1,12 @@
 import { NavLink } from 'react-router-dom';
 import { Flex, HStack, Link, Text, Image } from '@chakra-ui/react';
 import { BellIcon } from '@chakra-ui/icons';
+import PropTypes from 'prop-types';
+
 import Logout from '../Authentication/Logout';
 
-const Navbar = () => {
+const Navbar = ({ hasLoaded, isAdmin }) => {
+  // console.log(hasLoaded, isAdmin);
   const makeNavTabs = (page, path) => {
     const selectedTab = location.pathname == path;
     return (
@@ -28,7 +31,42 @@ const Navbar = () => {
       </Link>
     );
   };
-  return (
+
+  if (!hasLoaded) {
+    return null;
+  }
+
+  if (isAdmin) {
+    return (
+      <Flex
+        style={{ backgroundColor: '#243268', padding: '0 100px 0 100px' }}
+        justify={'space-between'}
+        width={'100%'}
+        align="center"
+        position={'sticky'}
+        as={'nav'}
+      >
+        <HStack>
+          <Flex align={'center'}>
+            <Image src="../../../aiss-logo.png" marginRight={'48px'}></Image>
+            {makeNavTabs('Schedule', '/publishedSchedule')}
+            {makeNavTabs('Catalog', '/catalog')}
+          </Flex>
+        </HStack>
+        <Flex alignSelf={'right'} marginLeft={'auto'}>
+          <BellIcon
+            color="white"
+            alignSelf={'right'}
+            width={'24px'}
+            height={'24px'}
+            marginRight={'48px'}
+          />
+          <Logout alignSelf={'right'} />
+        </Flex>
+      </Flex>
+    )
+  }
+  return (      
     <Flex
       style={{ backgroundColor: '#243268', padding: '0 100px 0 100px' }}
       justify={'space-between'}
@@ -41,21 +79,24 @@ const Navbar = () => {
         <Flex align={'center'}>
           <Image src="../../../aiss-logo.png" marginRight={'48px'}></Image>
           {makeNavTabs('Schedule', '/publishedSchedule')}
-          {makeNavTabs('Catalog', '/catalog')}
         </Flex>
       </HStack>
       <Flex alignSelf={'right'} marginLeft={'auto'}>
-        <BellIcon
-          color="white"
-          alignSelf={'right'}
-          width={'24px'}
-          height={'24px'}
-          marginRight={'48px'}
-        />
         <Logout alignSelf={'right'} />
       </Flex>
+
     </Flex>
   );
 };
 
+Navbar.propTypes = {
+  hasLoaded: PropTypes.bool,
+  isAdmin: PropTypes.bool,
+};
+
+Navbar.defaultProps = {
+  hasLoaded: false,
+  isAdmin: false,
+};
+
 export default Navbar;
diff --git a/src/pages/PublishedSchedule/PublishedSchedule.jsx b/src/pages/PublishedSchedule/PublishedSchedule.jsx
@@ -1,11 +1,15 @@
 import { NPOBackend } from '../../utils/auth_utils.js';
 import PublishedScheduleTable from '../../components/Events/PublishedScheduleTable.jsx';
+import AUTH_ROLES from '../../utils/auth_config.js';
+import { useAuthContext } from '../../common/AuthContext.jsx';
 
 import { useEffect, useState } from 'react';
+const { ADMIN_ROLE, USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 import { Box, Select, Text } from '@chakra-ui/react';
 
 const PublishedSchedule = () => {
   // get data from database
+  const {currentUser} = useAuthContext();
   const [allSeasons, setAllSeasons] = useState([]);
   const [selectedSeason, setSelectedSeason] = useState('');
 
@@ -30,6 +34,9 @@ const PublishedSchedule = () => {
   useEffect(() => {
     const renderTable = async () => {
       const { data } = await NPOBackend.get('/published-schedule/all-seasons');
+
+      setSelectedSeason(currentUser.type === USER_ROLE ? data[0] : ''); // We assume the current season is the first one in the list
+
       const index = data.indexOf(curSeason);
       if (index !== -1) {
         data.splice(index, 1);
@@ -44,10 +51,12 @@ const PublishedSchedule = () => {
           return seasonOrder.indexOf(a.split(' ')[0]) - seasonOrder.indexOf(b.split(' ')[0]);
         }
       });
+
       setAllSeasons(data);
+
     };
-    renderTable();
-  }, []);
+    renderTable();    
+  }, [currentUser]);
 
   const curSeason = getTodaySeason();
 
@@ -71,11 +80,10 @@ const PublishedSchedule = () => {
         onChange={() => setSelectedSeason(event.target.value)}
         width="23%"
       >
-        {allSeasons.map(item => (
-          <option key={item} value={item}>
-            {item}
-          </option>
-        ))}
+        { currentUser.type === ADMIN_ROLE ?
+          allSeasons.map(item => (
+            <option key={item} value={item}>{item}</option>
+          )) : null }
       </Select>
 
       {/* tables for each season */}

diff --git a/src/utils/ProtectedRoute.jsx b/src/utils/ProtectedRoute.jsx
@@ -3,17 +3,21 @@ import { Navigate } from 'react-router-dom';
 import { PropTypes, instanceOf } from 'prop-types';
 import { withCookies, cookieKeys, Cookies, clearCookies } from './cookie_utils';
 import { NPOBackend, refreshToken } from './auth_utils';
+import { useAuthContext } from '../common/AuthContext';
 
 const userIsAuthenticated = async (roles, cookies) => {
   try {
-    const accessToken = await refreshToken(cookies);
+    const { accessToken, currentUser } = await refreshToken(cookies);
+    // const accessToken = await refreshToken(cookies);
     if (!accessToken) {
       return false;
     }
     const loggedIn = await NPOBackend.get(`/auth/verifyToken/${accessToken}`);
 
-    return roles.includes(cookies.get(cookieKeys.ROLE)) && loggedIn.status === 200 && cookies.get(cookieKeys.APPROVED);
-    // return roles.includes(cookies.get(cookieKeys.ROLE));
+    return {
+      authenticated: roles.includes(cookies.get(cookieKeys.ROLE)) && loggedIn.status === 200 && cookies.get(cookieKeys.APPROVED),
+      currentUser,
+    };
   } catch (err) {
     console.log(err);
     clearCookies(cookies);
@@ -32,16 +36,18 @@ const userIsAuthenticated = async (roles, cookies) => {
 const ProtectedRoute = ({ Component, redirectPath, roles, cookies }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const { setCurrentUser } = useAuthContext();
 
   useEffect(() => {
     const checkAuthentication = async () => {
-      const authenticated = await userIsAuthenticated(roles, cookies);
+      const { authenticated, currentUser } = await userIsAuthenticated(roles, cookies);
       setIsAuthenticated(authenticated);
+      setCurrentUser(currentUser);
       setIsLoading(false);
     };
 
     checkAuthentication();
-  }, [roles, cookies]);
+  }, [roles, cookies, setCurrentUser]);
   if (isLoading) {
     return <h1>LOADING...</h1>;
   }

diff --git a/src/utils/auth_config.js b/src/utils/auth_config.js
@@ -1,7 +1,7 @@
 // Sample roles, feel free to change
 const AUTH_ROLES = {
-  ADMIN_ROLE: 'superadmin',
-  USER_ROLE: 'admin',
+  ADMIN_ROLE: 'admin',
+  USER_ROLE: 'student',
 };
 
 export default { AUTH_ROLES };
diff --git a/src/utils/auth_utils.js b/src/utils/auth_utils.js
@@ -92,10 +92,9 @@ const refreshToken = async () => {
     });
     // Sets the appropriate cookies after refreshing access token
     setCookie(cookieKeys.ACCESS_TOKEN, idToken, cookieConfig);
-    // const user = await NPOBackend.get(`/users/${auth.currentUser.uid}`);
-    // setCookie(cookieKeys.ROLE, user.data.user.role, cookieConfig);
-    setCookie(cookieKeys.ROLE, 'admin', cookieConfig);
-    return idToken;
+    const user = await NPOBackend.get(`/users/${auth.currentUser.uid}`);
+    setCookie(cookieKeys.ROLE, user.data[0].type, cookieConfig);
+    return {accessToken: idToken, currentUser: user.data[0]};
   }
   return null;
 };