Add navbar and userContext to store username and email

Author: FooChao

ai/usage-log.md

@@ -244,24 +244,41 @@ Request to implement simple cookie utilities for JWT token storage and removal,
 ## Entry 8
 
 # Date/Time:
-2025-09-15 22:30
+2025-09-16 00:05
 
 # Tool:
 GitHub Copilot (model: Claude Sonnet 4)
 
 # Prompt/Command:
-Request to implement controlled state management and password visibility toggle in login component, maintaining consistency with signup component patterns.
+Request to implement UserContext for managing user authentication state and create a global navigation bar that appears on all non-auth pages with conditional rendering.
 
 # Output Summary:
-- Added controlled state for email and password fields with proper value/onChange handlers
-- Implemented password visibility toggle with Eye/EyeOff icons (consistent with SignUpComponent)
-- Updated input components to use state values and change handlers
+- Created React UserContext (/contexts/UserContext.tsx) for centralized user state management
+- Implemented automatic token verification using verifyToken API
+- Added user data persistence across page refreshes with token-based restoration
+- Created Navbar component (/app/components/layout/Navbar.tsx) with PeerPrep branding and navigation
+- Implemented NavbarWrapper (/app/components/layout/NavbarWrapper.tsx) for conditional rendering
+- Updated root layout.tsx to include UserProvider and NavbarWrapper
+- Enhanced LoginComponent to set user data in context after successful authentication
+- Updated WelcomeComponent to display actual username from UserContext instead of hardcoded name
+- Fixed cookie utilities with getToken function for token retrieval
 
 # Action Taken:
-- [x] Accepted as-is
-- [ ] Modified
+- [ ] Accepted as-is
+- [x] Modified
 - [ ] Rejected
 
 # Author Notes:
-- Maintained consistency between login and signup component patterns
-- Simple state management improvement for better form control
+- Validated UserContext properly handles token verification through API calls rather than JWT parsing
+- Confirmed conditional navbar rendering excludes auth pages (/auth/*) as required
+- Reviewed user state persistence across page refreshes and browser sessions
+- Tested integration between LoginComponent, UserContext, and display components
+- Security considerations: Token verification through backend API ensures data integrity
+- UX improvements: Consistent navigation experience with user-aware display elements
+- Maintainability: Centralized user state management with clear separation of concerns
+- Debug logging enables easier troubleshooting of authentication state issues
+- Navbar modified by me after AI implementation to meet specific design requirements
+
+---
+
+

frontend/src/app/components/auth/LoginComponent.tsx

@@ -18,14 +18,16 @@ import { useRouter } from "next/navigation";
 import { login } from "@/services/userServiceApi";
 import { handleApiError, handleApiSuccess } from "@/services/errorHandler";
 import { toast } from "sonner";
-import  { addToken } from "@/services/userServiceCookies";
+import { addToken } from "@/services/userServiceCookies";
+import { useUser } from "@/contexts/UserContext";
 
 export default function LoginForm() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
 
   const router = useRouter();
+  const { setUser } = useUser();
 
   const handleLogin = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -46,8 +48,23 @@ export default function LoginForm() {
         return;
       }
 
-      // Store token and show success
+      // Store token
       addToken(token);
+
+      // Parse token to get user data and set in context
+      try {
+        const payload = JSON.parse(atob(token.split('.')[1]));
+        if (payload.username && payload.email) {
+          setUser({
+            username: payload.username,
+            email: payload.email,
+          });
+        }
+      } catch (error) {
+        console.error("Error parsing token:", error);
+      }
+
+      // Show success message
       handleApiSuccess(
         "Login successful!", 
         `Welcome back! Redirecting to homepage...`,

frontend/src/app/components/home/WelcomeComponent.tsx

@@ -2,8 +2,11 @@
 
 import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { useUser } from "@/contexts/UserContext";
 
 export default function WelcomePage() {
+  const { user } = useUser();
+
   function directToHome() {
     window.location.href = "/match";
   }
@@ -13,7 +16,7 @@ export default function WelcomePage() {
       <CardHeader>
         <CardTitle className="text-4xl flex">
           Hello
-          <p className="ml-2 font-bold">Derrick Wong</p>
+          <p className="ml-2 font-bold">{user?.username || "Guest"}</p>
         </CardTitle>
         <CardTitle className="text-4xl flex">Ready to start coding?</CardTitle>
       </CardHeader>

frontend/src/app/components/layout/Navbar.tsx

@@ -0,0 +1,81 @@
+/**
+ * AI Assistance Disclosure:
+ * Tool: GitHub Copilot (model: Claude 3.5 Sonnet), date: 2025-09-15
+ * Purpose: To create a reusable navigation bar component for the PeerPrep application.
+ * Author Review: I validated correctness, security, and performance of the code.
+ *  I modified the styling to match the application's theme.
+ */
+
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { User, LogOut } from "lucide-react";
+import { removeToken } from "@/services/userServiceCookies";
+import { useUser } from "@/contexts/UserContext";
+
+export default function Navbar() {
+  const [activeTab, setActiveTab] = useState("Dashboard");
+  const { user, setUser } = useUser();
+
+  const navItems = [
+    { name: "Dashboard", href: "/home" },
+    { name: "Find Partner", href: "/match" },
+  ];
+
+  const handleLogout = () => {
+    removeToken();
+    setUser(null);
+    window.location.href = "/auth/login";
+  };
+
+  return (
+    <nav className="bg-white border-b border-gray-200 px-6 py-3">
+      <div className="flex justify-between items-center">
+        {/* Logo */}
+        <div className="flex items-center">
+          <div className="text-blue-600 font-bold text-xl">
+            <span className="text-2xl">👥</span> PeerPrep
+          </div>
+        </div>
+
+        {/* Navigation Items */}
+        <div className="flex space-x-8">
+          {navItems.map((item) => (
+            <Link
+              key={item.name}
+              href={item.href}
+              onClick={() => setActiveTab(item.name)}
+              className={`px-3 py-2 text-sm font-medium transition-colors ${
+                activeTab === item.name
+                  ? "text-blue-600 border-b-2 border-blue-600"
+                  : "text-gray-600 hover:text-blue-600"
+              }`}
+            >
+              {item.name}
+            </Link>
+          ))}
+        </div>
+
+        {/* User Profile & Logout */}
+        <div className="flex items-center space-x-3">
+          <div className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+              <User className="w-4 h-4 text-blue-600" />
+            </div>
+            {user && (
+              <span className="text-sm font-medium text-gray-700">
+                {user.username}
+              </span>
+            )}
+          </div>
+          <Button variant="outline" size="sm" onClick={handleLogout}>
+            <LogOut className="w-4 h-4 mr-2" />
+            Logout
+          </Button>
+        </div>
+      </div>
+    </nav>
+  );
+}

frontend/src/app/components/layout/NavbarWrapper.tsx

@@ -0,0 +1,24 @@
+/**
+ * AI Assistance Disclosure:
+ * Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-16
+ * Purpose: To implement conditional navbar rendering that hides navigation on authentication pages using Next.js pathname detection.
+ * Author Review: I validated correctness, security, and performance of the code.
+ */
+
+"use client";
+
+import { usePathname } from "next/navigation";
+import Navbar from "./Navbar";
+
+export default function NavbarWrapper() {
+  const pathname = usePathname();
+  
+  // Don't show navbar on auth pages
+  const isAuthPage = pathname.startsWith("/auth");
+  
+  if (isAuthPage) {
+    return null;
+  }
+  
+  return <Navbar />;
+}

frontend/src/app/home/page.tsx

@@ -5,17 +5,9 @@ import WelcomePage from "../components/home/WelcomeComponent";
 
 export default function HomePage() {
   return (
-    <div className="h-screen flex flex-col">
-      <div className="flex justify-between items-center bg-white w-full h-[5%]">
-        <div className="ml-4 text-black">hamburger</div>
-        <div className="text-black font-bold">PeerPrep</div>
-        <div className="ml-4 text-black">Avatar</div>
-      </div>
-
+    <div className="min-h-screen flex flex-col">
       <WelcomePage />
-
       <StatisticPage />
-
       <div className="flex flex-1 m-10">
         <HistoryPage />
         <QuickActionsPage />

frontend/src/app/layout.tsx

@@ -8,6 +8,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { Toaster } from "sonner";
+import { UserProvider } from "@/contexts/UserContext";
+import NavbarWrapper from "./components/layout/NavbarWrapper";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -21,8 +23,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "PeerPrep",
+  description: "A collaborative coding platform for interview preparation",
 };
 
 export default function RootLayout({
@@ -35,7 +37,10 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <UserProvider>
+          <NavbarWrapper />
+          {children}
+        </UserProvider>
         <Toaster 
           position="top-center"
           richColors

frontend/src/contexts/UserContext.tsx

@@ -0,0 +1,79 @@
+/**
+ * AI Assistance Disclosure:
+ * Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-16
+ * Purpose: To implement React UserContext for managing user authentication state with automatic token verification and user data fetching from API.
+ * Author Review: I validated correctness, security, and performance of the code.
+ */
+
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { getToken } from "@/services/userServiceCookies";
+import { verifyToken } from "@/services/userServiceApi";
+
+interface User {
+  username: string;
+  email: string;
+}
+
+interface UserContextType {
+  user: User | null;
+  setUser: (user: User | null) => void;
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export const useUser = () => {
+  const context = useContext(UserContext);
+  if (context === undefined) {
+    throw new Error("useUser must be used within a UserProvider");
+  }
+  return context;
+};
+
+interface UserProviderProps {
+  children: ReactNode;
+}
+
+export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    console.log("UserContext useEffect triggered, current user:", user);
+    
+    // If user context is empty but we have a token, fetch user data
+    if (!user) {
+      const token = getToken();
+      console.log("Token from cookies:", token);
+      
+      if (token) {
+        console.log("Token found, calling verifyToken API...");
+        verifyToken(token)
+          .then((response) => {
+            console.log("VerifyToken response:", response.data);
+            const userData = response.data?.data;
+            if (userData?.username && userData?.email) {
+              console.log("Setting user data:", userData);
+              setUser({
+                username: userData.username,
+                email: userData.email,
+              });
+            } else {
+              console.log("User data incomplete:", userData);
+            }
+          })
+          .catch((error) => {
+            console.error("Error verifying token:", error);
+          });
+      } else {
+        console.log("No token found in cookies");
+      }
+    }
+  }, [user]);
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};

frontend/src/services/userServiceCookies.ts

@@ -11,4 +11,17 @@ export function addToken(token: string): void {
 
 export function removeToken(): void {
   document.cookie = 'token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC';
+}
+
+export function getToken(): string | null {
+  if (typeof document === 'undefined') return null;
+  
+  const cookies = document.cookie.split(';');
+  for (const cookie of cookies) {
+    const [name, value] = cookie.trim().split('=');
+    if (name === 'token') {
+      return value;
+    }
+  }
+  return null;
 }