Merge pull request #19 from CS3219-AY2425S1/chore/tidy-questions-layout-code

Chore/tidy questions layout code

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,17 @@
+import { Outlet } from 'react-router-dom';
+
+import { cn } from '@/lib/utils';
+
+export const AuthedLayout = () => {
+  return (
+    <div
+      id='main'
+      className={cn(
+        'flex w-full flex-col overscroll-contain',
+        'h-[calc(100dvh-64px)]' // The nav is 64px
+      )}
+    >
+      <Outlet />
+    </div>
+  );
+};

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

@@ -0,0 +1,45 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import { cn } from '@/lib/utils';
+import { BreadCrumb } from '@/stores/breadcrumb-store';
+import { FC, Fragment, PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+
+type IBreadCrumbBannerProps = {
+  crumbs: Array<BreadCrumb>;
+};
+
+export const WithNavBanner: FC<PropsWithChildren<IBreadCrumbBannerProps>> = ({
+  children,
+  crumbs,
+}) => {
+  const isLast = (index: number) => index === crumbs.length - 1;
+  return (
+    <>
+      <div className='bg-secondary/50 flex w-full p-4 px-6'>
+        <Breadcrumb>
+          <BreadcrumbList>
+            {crumbs.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>
+      {children}
+    </>
+  );
+};

frontend/src/components/blocks/authed/with-nav-banner.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

@@ -0,0 +1,16 @@
+import { BreadCrumb } from '@/stores/breadcrumb-store';
+import { getBreadCrumbs } from '../routes';
+import { useRouterLocation } from './use-router-location';
+
+export const useCrumbs = (...extraCrumbs: Array<BreadCrumb>) => {
+  const {
+    location: { pathname },
+  } = useRouterLocation();
+  const crumbs = getBreadCrumbs(pathname);
+  return {
+    crumbs: [...crumbs, ...extraCrumbs].map((v) => ({
+      ...v,
+      path: v.path.replace('<CURRENT>', pathname),
+    })),
+  };
+};

frontend/src/lib/hooks/use-crumbs.ts

@@ -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]);