PEER-249 Add common layout for question details

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

Author: SeeuSim

frontend/src/components/blocks/layout.tsx

@@ -19,7 +19,8 @@ export const loader =
   async ({ request }: LoaderFunctionArgs) => {
     const route = new URL(request.url);
     const path = route.pathname;
-    const authedRoutes = [ROUTES.HOME];
+    const unAuthedRoutes = [ROUTES.LOGIN, ROUTES.SIGNUP, ROUTES.FORGOT_PASSWORD];
+    const unAuthedRoute = unAuthedRoutes.includes(path);
 
     return defer({
       isAuthed: await queryClient.ensureQueryData({
@@ -33,7 +34,7 @@ export const loader =
           return Math.max(expiresAt.getTime() - now.getTime(), 0);
         },
       }),
-      authedRoute: authedRoutes.includes(path),
+      authedRoute: !unAuthedRoute,
       path,
     });
   };

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

@@ -1,10 +1,10 @@
 import { createBrowserRouter } from 'react-router-dom';
 
-import { Layout } from '@/components/blocks/layout';
+import { AuthedLayout } from '@/components/blocks/authed-layout';
+import { RootLayout } from '@/components/blocks/root-layout';
 import { RouteGuard, loader as routeGuardLoader } from '@/components/blocks/route-guard';
 
 import { ForgotPassword } from '@/routes/forgot-password';
-import { Landing } from '@/routes/landing';
 import { Login } from '@/routes/login';
 import { loader as qnDetailsLoader, QuestionDetails } from '@/routes/questions/details';
 import { SignUp } from '@/routes/signup';
@@ -14,15 +14,15 @@ import { ROUTES } from './routes';
 
 export const router = createBrowserRouter([
   {
-    element: <Layout />,
+    element: <RootLayout />,
     children: [
       {
         element: <RouteGuard />,
         loader: routeGuardLoader(queryClient),
         children: [
           {
             path: ROUTES.HOME,
-            element: <Landing />,
+            element: <AuthedLayout />,
             children: [
               {
                 path: ROUTES.QUESTION_DETAILS,

frontend/src/lib/router.tsx

@@ -68,7 +68,7 @@ export const QuestionDetails = () => {
   const { questionId } = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>;
   const { data: details } = useSuspenseQuery(questionDetailsQuery(questionId));
   return (
-    <div className='flex h-[calc(100dvh-64px)] w-full flex-col'>
+    <>
       <div className='bg-secondary/50 flex w-full p-4 px-6'>
         <Breadcrumb>
           <BreadcrumbList>
@@ -131,6 +131,6 @@ export const QuestionDetails = () => {
         </Card>
         <div className='flex flex-1 flex-col' />
       </div>
-    </div>
+    </>
   );
 };