chore(tidy-code/UI): Clean up breadcrumbs

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

backend/user/src/lib/cookies/index.ts

@@ -10,9 +10,13 @@ export const generateCookie = <T extends object>(payload: T) => {
 };
 
 export const isCookieValid = (cookie: string) => {
-  return jwt.verify(cookie, JWT_SECRET_KEY, {
-    ignoreExpiration: false,
-  });
+  try {
+    return jwt.verify(cookie, JWT_SECRET_KEY, {
+      ignoreExpiration: false,
+    });
+  } catch (error) {
+    return false;
+  }
 };
 
 export type CookiePayload = {

frontend/src/components/blocks/authed-layout.tsx

@@ -0,0 +1 @@
+export * from './main-layout';

frontend/src/components/blocks/authed/index.ts

@@ -0,0 +1,68 @@
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import { Link, Outlet } from 'react-router-dom';
+
+import { getBreadCrumbs } from '@/lib/routes';
+import { cn } from '@/lib/utils';
+import { useRouterLocation } from '@/lib/hooks';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import { BreadCrumb, BreadCrumbProvider } from '@/stores/breadcrumb-store';
+
+export const AuthedLayout = () => {
+  const [breadcrumbs, setCrumbs] = useState<Array<BreadCrumb>>([]);
+  const {
+    location: { pathname },
+  } = useRouterLocation();
+
+  useEffect(() => {
+    setCrumbs(getBreadCrumbs(pathname));
+  }, [pathname]);
+  const isLast = useCallback((index: number) => index === breadcrumbs.length - 1, [breadcrumbs]);
+
+  return (
+    <div
+      id='main'
+      className={cn(
+        'flex w-full flex-col overscroll-contain',
+        'h-[calc(100dvh-64px)]' // The nav is 64px
+      )}
+    >
+      <BreadCrumbProvider
+        value={{
+          breadcrumbs,
+          setCrumbs,
+        }}
+      >
+        {breadcrumbs.length > 0 && (
+          <div className='bg-secondary/50 flex w-full p-4 px-6'>
+            <Breadcrumb>
+              <BreadcrumbList>
+                {breadcrumbs.map(({ path, title }, index) => (
+                  <Fragment key={index}>
+                    <BreadcrumbItem>
+                      <BreadcrumbLink asChild>
+                        <Link
+                          to={path}
+                          className={cn(isLast(index) && 'text-secondary-foreground')}
+                        >
+                          {title}
+                        </Link>
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    {!isLast(index) && <BreadcrumbSeparator />}
+                  </Fragment>
+                ))}
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        )}
+      </BreadCrumbProvider>
+      <Outlet />
+    </div>
+  );
+};

frontend/src/components/blocks/authed/main-layout.tsx

@@ -1,12 +1,13 @@
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
 
 import { Logo } from '@/components/common/logo';
 import { MobileThemeSwitch } from '@/components/common/mobile-theme-switch';
 import { ThemeSwitch } from '@/components/common/theme-switch';
 import { UserDropdown } from '@/components/common/user-dropdown';
-
 import { Button } from '@/components/ui/button';
+
 import { useRouterLocation } from '@/lib/hooks';
 import { ROUTES } from '@/lib/routes';
 
@@ -21,7 +22,9 @@ const NavBar = observer(() => {
         {!isUnauthedRoute && (
           <>
             <Button variant='ghost'>Start</Button>
-            <Button variant='ghost'>Questions</Button>
+            <Button variant='ghost' asChild>
+              <Link to={ROUTES.QUESTIONS}>Questions</Link>
+            </Button>
           </>
         )}
         <div className='ml-auto flex items-center gap-4 md:ml-auto md:gap-2 lg:gap-4'>

frontend/src/components/blocks/nav-bar.tsx

@@ -1,16 +1,16 @@
 import type { QueryClient } from '@tanstack/react-query';
-import { Suspense } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import {
   Await,
   defer,
   type LoaderFunctionArgs,
-  Navigate,
   Outlet,
   useLoaderData,
+  useNavigate,
 } from 'react-router-dom';
 
 import { usePageTitle } from '@/lib/hooks/use-page-title';
-import { ROUTES } from '@/lib/routes';
+import { ROUTES, UNAUTHED_ROUTES } from '@/lib/routes';
 import { checkIsAuthed } from '@/services/user-service';
 import { Loading } from './loading';
 
@@ -19,48 +19,43 @@ export const loader =
   async ({ request }: LoaderFunctionArgs) => {
     const route = new URL(request.url);
     const path = route.pathname;
-    const unAuthedRoutes = [ROUTES.LOGIN, ROUTES.SIGNUP, ROUTES.FORGOT_PASSWORD];
-    const unAuthedRoute = unAuthedRoutes.includes(path);
+    const isUnauthedRoute = UNAUTHED_ROUTES.includes(path);
 
     return defer({
-      isAuthed: await queryClient.ensureQueryData({
+      payload: await queryClient.ensureQueryData({
         queryKey: ['isAuthed'],
         queryFn: async () => {
-          return await checkIsAuthed();
+          return {
+            authedPayload: await checkIsAuthed(),
+            isAuthedRoute: !isUnauthedRoute,
+            path,
+          };
         },
         staleTime: ({ state: { data } }) => {
           const now = new Date();
-          const expiresAt = data?.expiresAt ?? now;
+          const expiresAt = data?.authedPayload?.expiresAt ?? now;
           return Math.max(expiresAt.getTime() - now.getTime(), 0);
         },
       }),
-      authedRoute: !unAuthedRoute,
-      path,
     });
   };
 
 export const RouteGuard = () => {
   const data = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>['data'];
+  const navigate = useNavigate();
   return (
     <Suspense fallback={<Loading />}>
-      <Await resolve={data}>
-        {({ isAuthed, authedRoute, path }) => {
+      <Await resolve={data.payload}>
+        {({ authedPayload, isAuthedRoute, path }) => {
+          const [isLoading, setIsLoading] = useState(true);
+          useEffect(() => {
+            if (authedPayload.isAuthed !== isAuthedRoute) {
+              navigate(isAuthedRoute ? ROUTES.LOGIN : ROUTES.HOME);
+            }
+            setIsLoading(false);
+          }, []);
           usePageTitle(path);
-          return isAuthed.isAuthed ? (
-            authedRoute ? (
-              // Route is authed and user is authed - proceed
-              <Outlet />
-            ) : (
-              // Route is unauthed and user is authed - navigate to home
-              <Navigate to='/' />
-            )
-          ) : authedRoute ? (
-            // Route is authed, but user is not - force login
-            <Navigate to='/login' />
-          ) : (
-            // Route is unauthed and user is not - proceed
-            <Outlet />
-          );
+          return isLoading ? <Loading /> : <Outlet />;
         }}
       </Await>
     </Suspense>

frontend/src/components/blocks/route-guard.tsx

@@ -5,10 +5,16 @@ export const usePageTitle = (path: string) => {
   const isDocumentDefined = typeof document !== 'undefined';
   const originalTitle = useRef(isDocumentDefined ? document.title : null);
   useEffect(() => {
-    if (!isDocumentDefined) return;
-    if (document.title !== path) document.title = getPageTitle(path);
+    if (!isDocumentDefined) {
+      return;
+    }
+    if (document.title !== path) {
+      document.title = getPageTitle(path);
+    }
     return () => {
-      if (originalTitle.current) document.title = originalTitle.current;
+      if (originalTitle.current) {
+        document.title = originalTitle.current;
+      }
     };
   }, []);
 };

frontend/src/lib/hooks/use-page-title.ts

@@ -1,15 +1,15 @@
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { ROUTES } from '@/lib/routes';
+import { ROUTES, UNAUTHED_ROUTES } from '@/lib/routes';
 
 export const useRouterLocation = () => {
   const location = useLocation();
 
   const data = useMemo(() => {
     const { pathname } = location;
     return {
-      isUnauthedRoute: [ROUTES.LOGIN, ROUTES.SIGNUP, ROUTES.FORGOT_PASSWORD].includes(pathname),
+      isUnauthedRoute: UNAUTHED_ROUTES.includes(pathname),
       isLogin: pathname === ROUTES.LOGIN,
     };
   }, [location]);

frontend/src/lib/hooks/use-router-location.ts

@@ -1,16 +1,17 @@
 import { createBrowserRouter } from 'react-router-dom';
 
-import { AuthedLayout } from '@/components/blocks/authed-layout';
+import { AuthedLayout } from '@/components/blocks/authed';
 import { RootLayout } from '@/components/blocks/root-layout';
 import { RouteGuard, loader as routeGuardLoader } from '@/components/blocks/route-guard';
 
 import { ForgotPassword } from '@/routes/forgot-password';
 import { Login } from '@/routes/login';
-import { loader as qnDetailsLoader, QuestionDetails } from '@/routes/questions/details';
+import { QuestionDetails, loader as questionDetailsLoader } from '@/routes/questions/details';
 import { SignUp } from '@/routes/signup';
 
 import { queryClient } from './query-client';
 import { ROUTES } from './routes';
+import { QuestionsList } from '@/routes/questions/list';
 
 export const router = createBrowserRouter([
   {
@@ -24,9 +25,13 @@ export const router = createBrowserRouter([
             path: ROUTES.HOME,
             element: <AuthedLayout />,
             children: [
+              {
+                path: ROUTES.QUESTIONS,
+                element: <QuestionsList />,
+              },
               {
                 path: ROUTES.QUESTION_DETAILS,
-                loader: qnDetailsLoader(queryClient),
+                loader: questionDetailsLoader(queryClient),
                 element: <QuestionDetails />,
               },
             ],

frontend/src/lib/router.tsx

@@ -1,21 +1,47 @@
+import type { BreadCrumb } from '@/stores/breadcrumb-store';
+
 export const ROUTES = {
   HOME: '/',
   LOGIN: '/login',
   SIGNUP: '/signup',
   FORGOT_PASSWORD: '/forgot-password',
-  QUESTION_DETAILS: 'questions/:questionId',
+  QUESTIONS: '/questions',
+  QUESTION_DETAILS: '/questions/:questionId',
+};
+
+const TOP_LEVEL_AUTHED_ROUTES = {
+  [ROUTES.QUESTIONS]: [
+    {
+      path: ROUTES.QUESTIONS,
+      title: 'Questions',
+    },
+  ],
 };
 
+export const getBreadCrumbs = (path: string): Array<BreadCrumb> => {
+  for (const key of Object.keys(TOP_LEVEL_AUTHED_ROUTES)) {
+    if (path.startsWith(key)) {
+      return [
+        {
+          path: ROUTES.HOME,
+          title: 'Home',
+        },
+        ...TOP_LEVEL_AUTHED_ROUTES[key],
+      ];
+    }
+  }
+  return [];
+};
+
+export const UNAUTHED_ROUTES = [ROUTES.LOGIN, ROUTES.SIGNUP, ROUTES.FORGOT_PASSWORD];
+
 const TITLES: Record<string, string> = {
-  HOME: '',
-  LOGIN: 'Start Interviewing Today',
-  SIGNUP: 'Create an Account',
-  FORGOT_PASSWORD: 'Forgot Password',
+  [ROUTES.LOGIN]: 'Start Interviewing Today',
+  [ROUTES.SIGNUP]: 'Create an Account',
+  [ROUTES.FORGOT_PASSWORD]: 'Forgot Password',
 };
 
 export const getPageTitle = (path: string) => {
   const title = TITLES[path];
-  return title !== undefined
-    ? ['Peerprep', title].filter((v) => v.length > 0).join(' - ')
-    : 'Peerprep';
+  return title ?? 'Peerprep';
 };