bug fixes

Author: MrPeterss

src/App.tsx

@@ -22,12 +22,27 @@ import CourseTeamDashboard from './pages/CourseTeamDashboard';
 import CourseSettings from './pages/CourseSettings';
 import Dashboard from './pages/Dashboard';
 import ProjectNotFound from './pages/ProjectNotFound';
+import NotFound from './pages/NotFound';
 import LoginCard from './components/LoginCard';
 import Admin from './pages/Admin';
 
 function AppContent() {
   const location = useLocation();
+
+  // Define all valid route patterns
+  const isValidRoute =
+    location.pathname === '/login' ||
+    location.pathname === '/courses' ||
+    location.pathname === '/' ||
+    location.pathname === '/admin' ||
+    location.pathname.startsWith('/courses/') ||
+    location.pathname.startsWith('/dashboard/') ||
+    location.pathname.startsWith('/not-found/');
+
+  // Only show NavBar on routes that need it
+  // Exclude: login, courses, course pages, dashboard pages, admin, not-found pages, and 404 pages
   const shouldShowNav =
+    isValidRoute &&
     location.pathname !== '/login' &&
     location.pathname !== '/courses' &&
     !location.pathname.startsWith('/courses/') &&
@@ -46,15 +61,16 @@ function AppContent() {
           <Route path="/courses" element={<Courses />} />
           <Route path="/courses/:courseId" element={<CourseLayout />}>
             <Route index element={<CourseProjects />} />
-            <Route path="dashboard" element={<CourseDashboard />} />
             <Route path="dashboard/:teamId" element={<CourseTeamDashboard />} />
+            <Route path="dashboard" element={<CourseDashboard />} />
             <Route path="settings" element={<CourseSettings />} />
           </Route>
           <Route path="/dashboard/:teamId" element={<Dashboard />} />
           <Route path="/admin" element={<Admin />} />
           <Route path="/not-found/:team_name" element={<ProjectNotFound />} />
           <Route path="/login" element={<LoginCard />} />
           <Route path="/" element={<Navigate to="/login" replace />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </main>
     </div>

src/components/CourseLayout.tsx

@@ -1,4 +1,10 @@
-import { useParams, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import {
+  useParams,
+  Outlet,
+  useLocation,
+  useNavigate,
+  matchPath,
+} from 'react-router-dom';
 import { useEffect, useState, createContext, useContext, useMemo } from 'react';
 import { useRoleAccess } from '@/hooks/useRoleAccess';
 import { CourseNavBar } from '@/components/CourseNavBar';
@@ -76,17 +82,17 @@ export function CourseLayout() {
   // This prevents students from having admin privileges after admin sign-out
   const hasRoleMismatch = useMemo(() => {
     if (!user || !effectiveRole) return false;
-    
+
     // If user is not an admin globally, they should never have ADMIN effectiveRole
     if (user.role !== 'ADMIN' && effectiveRole === 'ADMIN') {
       return true;
     }
-    
+
     // If user is a student globally, they should never have ADMIN effectiveRole
     if (user.role === 'STUDENT' && effectiveRole === 'ADMIN') {
       return true;
     }
-    
+
     return false;
   }, [user, effectiveRole]);
 
@@ -130,36 +136,35 @@ export function CourseLayout() {
     courseId,
   ]);
 
+  // Only redirect from settings if user doesn't have access
+  // Let React Router handle all other route matching - no redirects for dashboard routes
   useEffect(() => {
     if (!courseId) return;
-    if (loading) return;
-    if (!effectiveRole) return;
 
-    const basePath = `/courses/${courseId}`;
-    const normalizedPath = location.pathname.replace(/\/$/, '');
+    const currentPath = location.pathname;
 
-    const allowedPaths = new Set<string>([basePath]);
-
-    // Allow dashboard routes for all roles (dashboard/:teamId)
-    allowedPaths.add(`${basePath}/dashboard`);
-
-    if (effectiveRole === 'INSTRUCTOR' || effectiveRole === 'ADMIN') {
-      allowedPaths.add(`${basePath}/settings`);
+    // Never redirect from dashboard routes - let React Router handle them
+    if (currentPath.includes('/dashboard')) {
+      return;
     }
 
-    const normalizedAllowed = Array.from(allowedPaths).map((path) =>
-      path.replace(/\/$/, '')
+    // Only check settings route access
+    const settingsMatch = matchPath(
+      { path: '/courses/:courseId/settings', end: true },
+      currentPath
     );
 
-    // Check if path matches exactly or starts with an allowed path (for nested routes like dashboard/:teamId)
-    const isAllowed = normalizedAllowed.some((path) => 
-      path === normalizedPath || normalizedPath.startsWith(path + '/')
-    );
+    if (settingsMatch?.params.courseId === courseId) {
+      // Wait for loading to complete and effectiveRole to be set before checking settings access
+      if (loading) return;
+      if (!effectiveRole) return;
 
-    if (!isAllowed) {
-      navigate(basePath, { replace: true });
+      // Only redirect from settings if user doesn't have access
+      if (effectiveRole !== 'INSTRUCTOR' && effectiveRole !== 'ADMIN') {
+        navigate(`/courses/${courseId}`, { replace: true });
+      }
     }
-  }, [courseId, effectiveRole, location.pathname, navigate, loading]);
+  }, [courseId, effectiveRole, navigate, loading, location.pathname]);
 
   const toggleViewAsStudent = () => {
     if (!isAdmin) return;

src/pages/CourseDashboard.tsx

@@ -6,17 +6,8 @@ import { ArrowLeft } from 'lucide-react';
 import { useEffect } from 'react';
 
 export default function CourseDashboard() {
-  const { courseId } = useParams<{ courseId: string }>();
   const navigate = useNavigate();
-  const { offering, loading: offeringLoading, effectiveRole } = useCourseContext();
-
-  // Check course-specific role access after fetching offering
-  useEffect(() => {
-    if (effectiveRole && effectiveRole !== 'STUDENT') {
-      // Redirect to projects page if not a student
-      navigate(`/courses/${courseId}`, { replace: true });
-    }
-  }, [effectiveRole, courseId, navigate]);
+  const { offering, loading: offeringLoading } = useCourseContext();
 
   return (
     <div className="container mx-auto p-6">

src/pages/CourseTeamDashboard.tsx

@@ -41,7 +41,7 @@ export default function CourseTeamDashboard() {
   const canManage = effectiveRole === 'ADMIN' || effectiveRole === 'INSTRUCTOR';
 
   // Check if user is a member of this team
-  const isTeamMember = myTeams?.some((t) => t.id === teamIdNum) ?? false;
+  const isTeamMember = (myTeams?.some((t) => t.id === teamIdNum) ?? false) || canManage;
 
   useEffect(() => {
     const expectedPath = `/courses/${courseId}/dashboard/${teamIdNum}`;

src/pages/NotFound.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { AlertCircle, ArrowLeft } from 'lucide-react';
+
+export default function NotFound() {
+  const navigate = useNavigate();
+
+  const handleGoToCourses = () => {
+    navigate('/courses');
+  };
+
+  return (
+    <div className="flex min-h-screen bg-gray-50 items-center justify-center p-6">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-gray-100 p-4">
+            <AlertCircle className="h-12 w-12 text-gray-400" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-3xl font-bold text-gray-900">Page Not Found</h1>
+          <p className="text-gray-600">
+            The page you're looking for doesn't exist.
+          </p>
+        </div>
+
+        <div className="pt-4">
+          <Button
+            onClick={handleGoToCourses}
+            className="bg-black hover:bg-gray-800 text-white flex items-center gap-2 mx-auto"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            <span>Go Back to Courses</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+