fix(navbar): show Dashboard instead of Classes label for admin users

__tests__/components/navbar.test.jsx

@@ -2,6 +2,7 @@ import Navbar from '../../components/navbar';
 import React from 'react';
 import { SessionProvider } from 'next-auth/react';
 import renderer from 'react-test-renderer';
+import Link from 'next/link';
 
 describe('Navbar rendering correctly', () => {
   it('renders correctly', () => {
@@ -14,4 +15,40 @@ describe('Navbar rendering correctly', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders Classes link as "Classes" for non-admin session', () => {
+    const tree = renderer
+      .create(
+        <SessionProvider session={{ user: { name: 'test user', role: 'TEACHER' } }}>
+          <Navbar>
+            <div>
+              <Link href="/classes">Classes</Link>
+            </div>
+          </Navbar>
+        </SessionProvider>
+      )
+      .toJSON();
+
+    const jsonString = JSON.stringify(tree);
+    expect(jsonString).toContain('Classes');
+    expect(jsonString).not.toContain('Dashboard');
+  });
+
+  it('renders Classes link as "Dashboard" for ADMIN session', () => {
+    const tree = renderer
+      .create(
+        <SessionProvider session={{ user: { name: 'admin user', role: 'ADMIN' } }}>
+          <Navbar>
+            <div>
+              <Link href="/classes">Classes</Link>
+            </div>
+          </Navbar>
+        </SessionProvider>
+      )
+      .toJSON();
+
+    const jsonString = JSON.stringify(tree);
+    expect(jsonString).toContain('Dashboard');
+    expect(jsonString).not.toContain('Classes');
+  });
 });

components/navbar.js

@@ -1,9 +1,41 @@
 import Image from 'next/legacy/image';
 import Link from 'next/link';
 import React from 'react';
+import { useSession } from 'next-auth/react';
 import AuthButton from '../components/authButton';
 
+function updateClassesLinkLabel(child, isAdmin) {
+  if (!child) return child;
+
+  if (React.isValidElement(child)) {
+    const isClassesLink =
+      child.props.href === '/classes' && child.props.children === 'Classes';
+
+    if (isClassesLink) {
+      return React.cloneElement(child, {
+        children: isAdmin ? 'Dashboard' : 'Classes'
+      });
+    }
+
+    if (child.props.children) {
+      const newChildren = React.Children.map(child.props.children, c =>
+        updateClassesLinkLabel(c, isAdmin)
+      );
+      return React.cloneElement(child, { children: newChildren });
+    }
+  }
+
+  return child;
+}
+
 export default function Navbar({ children }) {
+  const { data: session } = useSession();
+  const isAdmin = session?.user?.role === 'ADMIN';
+
+  const processedChildren = React.Children.toArray(children).map(child =>
+    updateClassesLinkLabel(child, isAdmin)
+  );
+
   return (
     <div className='h-[38px]'>
       <div className='h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1'>
@@ -20,7 +52,7 @@ export default function Navbar({ children }) {
           ></Image>
         </Link>
         <div className='flex-1 inline-flex justify-end'>
-          {React.Children.toArray(children).map(child => (
+          {processedChildren.map(child => (
             <div className='pl-2 hidden md:block' key={child.key}>
               {child}
             </div>

pages/api/auth/[...nextauth].js

@@ -28,6 +28,13 @@ export const authOptions = {
       // Allows callback URLs on the same origin
       else if (new URL(url).origin === baseUrl) return url;
       return baseUrl;
+    },
+    async session({ session, user }) {
+      if (session?.user && user) {
+        session.user.role = user.role;
+        session.user.id = user.id;
+      }
+      return session;
     }
   }
 };