PEER-234: Add question details

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

Author: SeeuSim

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

@@ -46,6 +46,7 @@ export const useCollab = (roomId: string) => {
       let provider = null;
       try {
         provider = new WebsocketProvider(COLLAB_WS, roomId, doc);
+        provider.connect();
       } catch (err) {
         const { name, message } = err as Error;
         console.error(
@@ -85,7 +86,7 @@ export const useCollab = (roomId: string) => {
         provider.disconnect();
       };
     }
-  }, [editorRef]);
+  }, [editorRef, roomId]);
   return {
     editorRef,
     extensions: [...extensions, langExtension],

frontend/src/lib/queries/question-details.ts

@@ -0,0 +1,8 @@
+import { getQuestionDetails } from '@/services/question-service';
+import { queryOptions } from '@tanstack/react-query';
+
+export const questionDetailsQuery = (id: number) =>
+  queryOptions({
+    queryKey: ['qn', 'details', id],
+    queryFn: async ({ signal: _ }) => getQuestionDetails(id),
+  });

frontend/src/lib/router.tsx

@@ -42,7 +42,7 @@ export const router = createBrowserRouter([
               },
               {
                 path: ROUTES.INTERVIEW,
-                loader: interviewRoomLoader,
+                loader: interviewRoomLoader(queryClient),
                 element: <InterviewRoom />,
               },
             ],

frontend/src/routes/interview/[room]/main.tsx

@@ -1,30 +1,38 @@
-import { LoaderFunctionArgs, Navigate, useLoaderData } from 'react-router-dom';
+import { QueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { type LoaderFunctionArgs, Navigate, useLoaderData } from 'react-router-dom';
 
 import { Editor } from '@/components/blocks/interview/editor';
+import { QuestionDetails } from '@/components/blocks/questions/details';
 import { Card } from '@/components/ui/card';
+import { questionDetailsQuery } from '@/lib/queries/question-details';
 import { ROUTES } from '@/lib/routes';
 
-export const loader = ({ params, request }: LoaderFunctionArgs) => {
-  const roomId = params.roomId;
-  const url = new URL(request.url);
-  const questionId = url.searchParams.get('questionId');
-
-  // TODO: Load question data (copy from question loader)
-
-  return {
-    roomId,
-    questionId,
+export const loader =
+  (queryClient: QueryClient) =>
+  async ({ params, request }: LoaderFunctionArgs) => {
+    const roomId = params.roomId;
+    const url = new URL(request.url);
+    const questionId = Number.parseInt(url.searchParams.get('questionId')!);
+    await queryClient.ensureQueryData(questionDetailsQuery(questionId));
+    return {
+      roomId,
+      questionId,
+    };
   };
-};
 
 export const InterviewRoom = () => {
-  const { roomId, questionId } = useLoaderData() as ReturnType<typeof loader>;
+  const { questionId, roomId } = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>;
+  const { data: details } = useSuspenseQuery(questionDetailsQuery(questionId));
+  const questionDetails = useMemo(() => {
+    return details.question;
+  }, [details]);
   return !questionId || !roomId ? (
     <Navigate to={ROUTES.HOME} />
   ) : (
     <div className='flex flex-1 overflow-hidden'>
       <Card className='border-border m-4 w-1/3 max-w-[500px] overflow-hidden p-4 md:w-2/5'>
-        {/* Question Deets */}
+        <QuestionDetails {...{ questionDetails }} />
       </Card>
       <div className='flex flex-1 flex-col overflow-hidden'>
         <Editor room={roomId as string} />

frontend/src/routes/questions/details/main.tsx

@@ -1,4 +1,4 @@
-import { QueryClient, queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import { QueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 
@@ -7,14 +7,8 @@ import { Card } from '@/components/ui/card';
 
 import { useCrumbs } from '@/lib/hooks/use-crumbs';
 import { usePageTitle } from '@/lib/hooks/use-page-title';
-import { getQuestionDetails } from '@/services/question-service';
 import { QuestionDetails } from '@/components/blocks/questions/details';
-
-const questionDetailsQuery = (id: number) =>
-  queryOptions({
-    queryKey: ['qn', 'details', id],
-    queryFn: async ({ signal: _ }) => getQuestionDetails(id),
-  });
+import { questionDetailsQuery } from '@/lib/queries/question-details';
 
 export const loader =
   (queryClient: QueryClient) =>