Refactor/router create browser router

backend/tests/uploadPhoto.test.js

@@ -11,17 +11,22 @@ import { errorHandler } from "../middlewares/errorHandler.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const profilesUploadDir = path.resolve(__dirname, "../uploads/profiles");
+const profilesUploadDir = path.resolve(__dirname, "../../uploads/profiles");
 
 // ── Supabase stub (requireAuth fast-path won't reach it, but the import needs it) ──
 // Extended with a storage stub so the /api/upload suite below (uploadController.js)
 // can assert on the path passed to storage.upload().
 const { storageUploadMock, storageFromMock } = vi.hoisted(() => {
-  const storageUploadMock = vi.fn(async (_filePath, fileStream) => {
-    const finished = once(fileStream, "end");
-    fileStream.resume();
-    await finished;
-    return { data: { path: "mock-path" }, error: null };
+  const storageUploadMock = vi.fn((path, stream) => {
+    if (stream) {
+      if (typeof stream.on === 'function') {
+        stream.on('error', () => {}); // swallow unhandled stream errors in mock
+      }
+      if (typeof stream.destroy === 'function') {
+        stream.destroy();
+      }
+    }
+    return Promise.resolve({ data: { path: "mock-path" }, error: null });
   });
   const storageFromMock = vi.fn(() => ({
     upload: storageUploadMock,

src/App.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, Suspense, useState, useRef } from "react";
+import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route, Navigate, Router, useLocation } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
 
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
@@ -10,9 +10,6 @@ import { AuthProvider } from "@/contexts/AuthContext";
 import { CookieConsentProvider } from "@/contexts/CookieConsentContext";
 import { RoleProvider } from "@/contexts/RoleContext";
 import { ThemeProvider } from "@/contexts/ThemeContext";
-import AdminRoute from "@/components/AdminRoute";
-import ProtectedRoute from "@/components/ProtectedRoute";
-import ProtectedMentorRoute from "@/components/ProtectedMentorRoute";
 
 // Global layout components - rendered on every page, keep static
 import Navbar from "./components/Navbar/Navbar";
@@ -402,15 +399,13 @@ function App() {
           <Toaster />
           <Sonner />
 
-          <BrowserRouter>
-            <CookieConsentProvider>
-              <AuthProvider>
-                <RoleProvider>
-                  <AppContent />
-                </RoleProvider>
-              </AuthProvider>
-            </CookieConsentProvider>
-          </BrowserRouter>
+          <CookieConsentProvider>
+            <AuthProvider>
+              <RoleProvider>
+                <RouterProvider router={router} />
+              </RoleProvider>
+            </AuthProvider>
+          </CookieConsentProvider>
         </TooltipProvider>
       </ThemeProvider>
     </QueryClientProvider>

src/hooks/useResources.ts

@@ -63,10 +63,10 @@ export const useResources = (filters?: ResourceFilters) => {
           return;
         }
 
-        const savedData = await safeSupabaseCall<SavedResource[]>(
+        const savedData = await safeSupabaseCall(
           () => (supabase as any).from("saved_resources").select("resource_id").eq("user_id", user.id).abortSignal(controller.signal)
         );
-
+        
         savedResourceIds =
           (savedData as SavedResource[] | null)?.map(
             (item) => item.resource_id

src/hooks/useSkillEndorsements.ts

@@ -46,7 +46,7 @@
     }).catch(console.error);
 
     // Subscribe to changes
     const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
       if (mounted) setCurrentUserId(session?.user?.id ?? null);
     });
 
@@ -64,7 +64,7 @@
     }
 
     try {
-      const { data, error } = await supabase
+      const { data, error } = await (supabase as any)
         .from("skill_endorsements")
         .select("skill, endorser_id")
         .eq("endorsed_user_id", profileUserId)
@@ -133,7 +133,7 @@
 
       try {
         if (isRemoving) {
-          const { error } = await supabase
+          const { error } = await (supabase as any)
             .from("skill_endorsements")
             .delete()
             .match({
@@ -143,7 +143,7 @@
             });
           if (error) throw error;
         } else {
-          const { error } = await supabase
+          const { error } = await (supabase as any)
             .from("skill_endorsements")
             .insert({
               skill,

src/layouts/AdminLayout.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import AdminRoute from "@/components/AdminRoute";
+import MainLayout from "./MainLayout";
+
+export default function AdminLayout() {
+  return (
+    <AdminRoute>
+      <MainLayout />
+    </AdminRoute>
+  );
+}

src/layouts/MainLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Navbar from "@/components/Navbar/Navbar";
+import StreakBadge from "@/components/StreakBadge";
+import { useAuth } from "@/contexts/useAuth";
+
+export default function MainLayout() {
+  const { user } = useAuth();
+  return (
+    <>
+      <Navbar />
+      {user && <StreakBadge />}
+      <Outlet />
+    </>
+  );
+}

src/layouts/ProtectedLayout.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ProtectedRoute from "@/components/ProtectedRoute";
+import MainLayout from "./MainLayout";
+
+export default function ProtectedLayout() {
+  return (
+    <ProtectedRoute>
+      <MainLayout />
+    </ProtectedRoute>
+  );
+}

src/layouts/ProtectedMentorLayout.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ProtectedMentorRoute from "@/components/ProtectedMentorRoute";
+import MainLayout from "./MainLayout";
+
+export default function ProtectedMentorLayout() {
+  return (
+    <ProtectedMentorRoute>
+      <MainLayout />
+    </ProtectedMentorRoute>
+  );
+}

src/layouts/RootLayout.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect, Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import { useAuth } from "@/contexts/useAuth";
+
+import SplashScreen from "@/components/SplashScreen";
+import MouseSparkles from "@/components/MouseSparkles";
+import CookieConsentBanner from "@/components/CookieConsentBanner";
+import Chatbot from "@/components/Chatbot/Chatbot";
+import FloatingAI from "@/components/FloatingAI";
+import BackToTop from "@/components/BackToTop";
+
+export default function RootLayout() {
+  const { user } = useAuth();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 2500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return <SplashScreen />;
+  }
+
+  return (
+    <>
+      <MouseSparkles />
+      <CookieConsentBanner />
+
+      <Suspense
+        fallback={
+          <div className="flex min-h-screen items-center justify-center bg-[#020617]">
+            <div className="h-10 w-10 animate-spin rounded-full border-4 border-cyan-400 border-t-transparent" />
+          </div>
+        }
+      >
+        <Outlet />
+      </Suspense>
+
+      {user && (
+        <>
+          <Chatbot />
+          <FloatingAI />
+        </>
+      )}
+
+      <BackToTop />
+    </>
+  );
+}

src/pages/Contact.test.tsx

@@ -29,7 +29,9 @@ describe("Contact", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    localStorage?.clear();
+    if (typeof window !== "undefined" && window.localStorage && typeof window.localStorage.clear === "function") {
+      window.localStorage.clear();
+    }
 
     (useToast as any).mockReturnValue({ toast });
     (supabase.from as any).mockReturnValue({ insert });

src/router/admin.routes.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { RouteObject } from "react-router-dom";
+import AdminLayout from "@/layouts/AdminLayout";
+
+const Admin = React.lazy(() => import("@/pages/Admin"));
+
+export const adminRoutes: RouteObject[] = [
+  {
+    element: <AdminLayout />,
+    children: [
+      { path: "/admin", element: <Admin /> },
+    ],
+  },
+];

src/router/auth.routes.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { RouteObject } from "react-router-dom";
+
+const Login = React.lazy(() => import("@/pages/Login"));
+const Signup = React.lazy(() => import("@/pages/Signup"));
+const ForgotPassword = React.lazy(() => import("@/pages/ForgotPassword"));
+const ResetPassword = React.lazy(() => import("@/pages/ResetPassword"));
+const AuthCallback = React.lazy(() => import("@/pages/AuthCallback"));
+const Onboarding = React.lazy(() => import("@/pages/Onboarding"));
+const PublicPortfolio = React.lazy(() => import("@/pages/PublicPortfolio"));
+const BecomeMentor = React.lazy(() => import("@/pages/BecomeMentor"));
+
+export const authRoutes: RouteObject[] = [
+  { path: "/login", element: <Login /> },
+  { path: "/signup", element: <Signup /> },
+  { path: "/forgot-password", element: <ForgotPassword /> },
+  { path: "/reset-password", element: <ResetPassword /> },
+  { path: "/auth/callback", element: <AuthCallback /> },
+  { path: "/onboarding", element: <Onboarding /> },
+  { path: "/portfolio/:slug", element: <PublicPortfolio /> },
+  { path: "/become-mentor", element: <BecomeMentor /> },
+];

src/router/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { createBrowserRouter } from "react-router-dom";
+import RootLayout from "@/layouts/RootLayout";
+import { publicRoutes } from "./public.routes";
+import { authRoutes } from "./auth.routes";
+import { protectedRoutes } from "./protected.routes";
+import { settingsRoutes } from "./settings.routes";
+import { mentorRoutes } from "./mentor.routes";
+import { adminRoutes } from "./admin.routes";
+
+export const router = createBrowserRouter([
+  {
+    element: <RootLayout />,
+    children: [
+      ...publicRoutes,
+      ...authRoutes,
+      ...protectedRoutes,
+      ...settingsRoutes,
+      ...mentorRoutes,
+      ...adminRoutes,
+    ],
+  },
+]);

src/router/mentor.routes.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { RouteObject } from "react-router-dom";
+import ProtectedMentorLayout from "@/layouts/ProtectedMentorLayout";
+
+const MentorDashboard = React.lazy(() => import("@/pages/MentorDashboard"));
+
+export const mentorRoutes: RouteObject[] = [
+  {
+    element: <ProtectedMentorLayout />,
+    children: [
+      { path: "/mentor-dashboard", element: <MentorDashboard /> },
+    ],
+  },
+];

src/router/protected.routes.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { RouteObject } from "react-router-dom";
+import ProtectedLayout from "@/layouts/ProtectedLayout";
+import { useAuth } from "@/contexts/useAuth";
+
+const Dashboard = React.lazy(() => import("@/pages/Dashboard"));
+const LearnerDashboard = React.lazy(() => import("@/pages/LearnerDashboard"));
+const Discover = React.lazy(() => import("@/pages/Discover"));
+const Sessions = React.lazy(() => import("@/pages/Sessions"));
+const Messages = React.lazy(() => import("@/pages/Messages"));
+const Chat = React.lazy(() => import("@/pages/Chat"));
+const Notifications = React.lazy(() => import("@/pages/Notifications"));
+const Leaderboard = React.lazy(() => import("@/pages/Leaderboard"));
+const ResourceHub = React.lazy(() => import("@/pages/ResourceHub"));
+const Portfolio = React.lazy(() => import("@/pages/Portfolio"));
+const PeerReviewDashboard = React.lazy(() => import("@/pages/PeerReviewDashboard"));
+const SubmitForReview = React.lazy(() => import("@/pages/SubmitForReview"));
+const ReviewSubmission = React.lazy(() => import("@/pages/ReviewSubmission"));
+const MockInterview = React.lazy(() => import("@/pages/MockInterview"));
+const AnonymousDoubts = React.lazy(() => import("@/pages/AnonymousDoubts"));
+const ContributorDashboard = React.lazy(() => import("@/pages/ContributorDashboard"));
+const AIPage = React.lazy(() => import("@/pages/aipage"));
+const StudyRooms = React.lazy(() => import("@/components/StudyRooms"));
+const Room = React.lazy(() => import("@/components/Room/Room"));
+
+const MessagesRoute = () => {
+  const { user } = useAuth();
+  return <Messages user={user} />;
+};
+
+export const protectedRoutes: RouteObject[] = [
+  {
+    element: <ProtectedLayout />,
+    children: [
+      { path: "/dashboard", element: <Dashboard /> },
+      { path: "/learner-dashboard", element: <LearnerDashboard /> },
+      { path: "/discover", element: <Discover /> },
+      { path: "/sessions", element: <Sessions /> },
+      { path: "/messages", element: <MessagesRoute /> },
+      { path: "/chat", element: <Chat /> },
+      { path: "/notifications", element: <Notifications /> },
+      { path: "/leaderboard", element: <Leaderboard /> },
+      { path: "/resources", element: <ResourceHub /> },
+      { path: "/portfolio", element: <Portfolio /> },
+      { path: "/peer-review", element: <PeerReviewDashboard /> },
+      { path: "/peer-review/new", element: <SubmitForReview /> },
+      { path: "/peer-review/:id", element: <ReviewSubmission /> },
+      { path: "/mock-interview", element: <MockInterview /> },
+      { path: "/anonymous-doubts", element: <AnonymousDoubts /> },
+      { path: "/contributor-dashboard", element: <ContributorDashboard /> },
+      { path: "/ai", element: <AIPage /> },
+      { path: "/rooms", element: <StudyRooms /> },
+      { path: "/rooms/:id", element: <Room /> },
+    ],
+  },
+];

src/router/public.routes.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Navigate, RouteObject } from "react-router-dom";
+import MainLayout from "@/layouts/MainLayout";
+import { useAuth } from "@/contexts/useAuth";
+
+const Index = React.lazy(() => import("@/pages/Index"));
+const Contact = React.lazy(() => import("@/pages/Contact"));
+const PrivacyPolicy = React.lazy(() => import("@/pages/privacy"));
+const CookiesPolicy = React.lazy(() => import("@/pages/cookies-policy"));
+const TermsAndConditions = React.lazy(() => import("@/pages/TermsAndConditions"));
+const NotFound = React.lazy(() => import("@/pages/NotFound"));
+
+const IndexRoute = () => {
+  const { user } = useAuth();
+  return user ? <Navigate to="/dashboard" replace /> : <Index />;
+};
+
+export const publicRoutes: RouteObject[] = [
+  {
+    element: <MainLayout />,
+    children: [
+      { path: "/", element: <IndexRoute /> },
+      { path: "/contact", element: <Contact /> },
+      { path: "/privacy-policy", element: <PrivacyPolicy /> },
+      { path: "/cookies-policy", element: <CookiesPolicy /> },
+      { path: "/terms-and-conditions", element: <TermsAndConditions /> },
+    ],
+  },
+  {
+    path: "*",
+    element: <NotFound />,
+  },
+];