Add person to navbar (#63)

acmucsd · Jan 10, 2025 · 40d98c2 · 40d98c2
1 parent 4429709
commit 40d98c2
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 33 deletions.
diff --git a/client/public/assets/icons/person.svg b/client/public/assets/icons/person.svg
diff --git a/client/src/app/api/updateUser/route.ts b/client/src/app/api/updateUser/route.ts
@@ -1,7 +1,7 @@
 import config from '@/lib/config';
 import type { UserPatches, PatchUserRequest } from '@/lib/types/apiRequests';
 import type { PatchUserResponse } from '@/lib/types/apiResponses';
-import { getCookie } from '@/lib/services/CookieService';
+import { getCookie, setCookie } from '@/lib/services/CookieService';
 import { CookieType } from '@/lib/types/enums';
 import { NextResponse, NextRequest } from 'next/server';
 import axios, { AxiosError } from 'axios';
@@ -29,6 +29,7 @@ export async function PATCH(request: NextRequest) {
     const user: UserPatches = body.user;
 
     const updatedUser = await updateCurrentUserProfile(authToken, user);
+    await setCookie(CookieType.USER, JSON.stringify(updatedUser.user));
 
     return NextResponse.json(updatedUser);
   } catch (error) {

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -5,6 +5,9 @@ import 'react-toastify/dist/ReactToastify.css';
 import type { Metadata } from 'next';
 import { DM_Sans } from 'next/font/google';
 import { ToastContainer } from 'react-toastify';
+import { getCookie } from '@/lib/services/CookieService';
+import { CookieType } from '@/lib/types/enums';
+import { PrivateProfile } from '@/lib/types/apiResponses';
 
 const dmSans = DM_Sans({ subsets: ['latin'], weight: ['200', '400', '500', '600', '700'] });
 
@@ -13,12 +16,17 @@ export const metadata: Metadata = {
   description: "ACM at UCSD's annual hackathon",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  let user: PrivateProfile | undefined;
+  try {
+    user = JSON.parse(await getCookie(CookieType.USER));
+  } catch {}
+
   return (
     <html lang="en">
       <body className={dmSans.className}>
         <ToastContainer />
-        <Navbar />
+        <Navbar user={user} />
         {children}
         <Footer />
       </body>

diff --git a/client/src/components/Navbar/index.tsx b/client/src/components/Navbar/index.tsx
@@ -8,6 +8,8 @@ import Link from 'next/link';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import { SwipeableDrawer } from '@mui/material';
+import { PrivateProfile } from '@/lib/types/apiResponses';
+import PersonIcon from '@/../public/assets/icons/person.svg';
 
 interface LinkMetadata {
   name: string;
@@ -21,7 +23,11 @@ const links: LinkMetadata[] = [
 
 const MOBILE_BREAKPOINT = 870; // Matches $breakpoint-md from vars.scss
 
-export default function Navbar() {
+interface NavbarProps {
+  user?: PrivateProfile;
+}
+export default function Navbar({ user }: NavbarProps) {
+  console.log(user);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const onLinkClick = () => {
@@ -51,37 +57,56 @@ export default function Navbar() {
             hacks
           </Typography>
         </Link>
-        <Typography variant="body/large" className={styles.desktopLinks}>
-          {links.map(link => (
-            <Link href={link.href} className={styles.link} onClick={onLinkClick} key={link.name}>
-              {link.name}
-            </Link>
-          ))}
-        </Typography>
-        <div className={styles.flex} />
-        <div className={styles.mobileIcons}>
-          <div className={`${styles.menuIcon} ${mobileMenuOpen ? '' : styles.hidden}`}>
-            <CloseIcon onClick={() => setMobileMenuOpen(false)} />
-          </div>
-          <div className={`${styles.menuIcon} ${mobileMenuOpen ? styles.hidden : ''}`}>
-            <MenuIcon onClick={() => setMobileMenuOpen(true)} />
-          </div>
-        </div>
+        {user ? (
+          <>
+            <Typography variant="body/large" className={styles.desktopLinks}>
+              {links.map(link => (
+                <Link
+                  href={link.href}
+                  className={styles.link}
+                  onClick={onLinkClick}
+                  key={link.name}
+                >
+                  {link.name}
+                </Link>
+              ))}
+            </Typography>
+            <div className={styles.flex} />
+            <Typography variant="body/large" className={styles.desktopLinks}>
+              <Link href="/profile" className={styles.link} onClick={onLinkClick}>
+                <PersonIcon aria-hidden /> {user.firstName} {user.lastName}
+              </Link>
+            </Typography>
+            <div className={styles.mobileIcons}>
+              <div className={`${styles.menuIcon} ${mobileMenuOpen ? '' : styles.hidden}`}>
+                <CloseIcon onClick={() => setMobileMenuOpen(false)} />
+              </div>
+              <div className={`${styles.menuIcon} ${mobileMenuOpen ? styles.hidden : ''}`}>
+                <MenuIcon onClick={() => setMobileMenuOpen(true)} />
+              </div>
+            </div>
+          </>
+        ) : null}
       </div>
-      <SwipeableDrawer
-        anchor="top"
-        open={mobileMenuOpen}
-        onClose={() => setMobileMenuOpen(false)}
-        onOpen={() => setMobileMenuOpen(true)}
-      >
-        <div className={styles.mobileMenu}>
-          {links.map(link => (
-            <Link href={link.href} className={styles.link} onClick={onLinkClick} key={link.name}>
-              {link.name}
+      {user ? (
+        <SwipeableDrawer
+          anchor="top"
+          open={mobileMenuOpen}
+          onClose={() => setMobileMenuOpen(false)}
+          onOpen={() => setMobileMenuOpen(true)}
+        >
+          <div className={styles.mobileMenu}>
+            {links.map(link => (
+              <Link href={link.href} className={styles.link} onClick={onLinkClick} key={link.name}>
+                {link.name}
+              </Link>
+            ))}
+            <Link href="/profile" className={styles.link} onClick={onLinkClick}>
+              <PersonIcon aria-hidden /> {user.firstName} {user.lastName}
             </Link>
-          ))}
-        </div>
-      </SwipeableDrawer>
+          </div>
+        </SwipeableDrawer>
+      ) : null}
     </>
   );
 }
diff --git a/client/src/components/Navbar/style.module.scss b/client/src/components/Navbar/style.module.scss
@@ -42,6 +42,9 @@
 }
 
 .link {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   text-decoration: none;
   color: vars.$white;