D7: Add requested fixes

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

Author: SeeuSim

backend/collaboration/src/controller/room-auth-controller.ts

@@ -1,55 +1,42 @@
-import { sql } from 'drizzle-orm';
 import type { Request, Response } from 'express';
 import { StatusCodes } from 'http-status-codes';
 
-import { db, rooms } from '@/lib/db';
+import { logger } from '@/lib/utils';
+import { roomAuthService } from '@/service/get/room-auth-service';
 
-export async function authCheck(req: Request, res: Response) {
-  const roomId = req.query.roomId as string | undefined;
-  const userId = req.query.userId as string | undefined;
-  const questionId = req.query.questionId as string | undefined;
+type QueryParams = {
+  roomId: string;
+  userId: string;
+};
 
-  if (!roomId || !userId || !questionId) {
-    return {
-      code: StatusCodes.UNPROCESSABLE_ENTITY,
-      error: {
-        message: 'Malformed',
-      },
-    };
+// Returns the questionId if valid.
+export async function authCheck(
+  req: Request<unknown, unknown, unknown, Partial<QueryParams>>,
+  res: Response
+) {
+  const { roomId, userId } = req.query;
+
+  if (!roomId || !userId) {
+    return res.status(StatusCodes.UNPROCESSABLE_ENTITY).json('Malformed request');
   }
 
   try {
-    const room = await db
-      .select()
-      .from(rooms)
-      .where(sql`${rooms.roomId} = ${roomId} and ${rooms.questionId} = ${questionId}`)
-      .limit(1);
-
-    if (room.length === 0) {
-      return res.status(StatusCodes.NOT_FOUND).json({
-        error: {
-          message: 'Room not found',
-        },
-      });
-    }
-
-    const { userId1, userId2 } = room[0];
+    const response = await roomAuthService({
+      roomId,
+      userId,
+    });
 
-    if (userId !== userId1 && userId !== userId2) {
-      return res.status(StatusCodes.FORBIDDEN).json({
-        code: StatusCodes.FORBIDDEN,
-        error: { message: 'User is not authorized to access this room' },
-      });
+    if (response.data) {
+      return res.status(response.code).json(response.data);
     }
 
-    return res.status(StatusCodes.OK).json({
-      code: StatusCodes.OK,
-      data: { roomId },
-    });
+    return res
+      .status(response.code)
+      .json({ error: response.error || { message: 'An error occurred.' } });
   } catch (error) {
-    console.error('Error authenticating room:', error);
+    const { name, stack, cause, message } = error as Error;
+    logger.error('Error authenticating room: ' + JSON.stringify({ name, stack, message, cause }));
     return res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({
-      code: StatusCodes.INTERNAL_SERVER_ERROR,
       error: { message: 'An error occurred while authenticating the room' },
     });
   }

backend/collaboration/src/service/get/room-auth-service.ts

@@ -0,0 +1,45 @@
+import { and, eq } from 'drizzle-orm';
+import { StatusCodes } from 'http-status-codes';
+
+import { db, rooms } from '@/lib/db';
+import { IServiceResponse } from '@/types';
+
+import { IGetAuthRoomPayload } from './types';
+
+export const roomAuthService = async (
+  params: IGetAuthRoomPayload
+): Promise<IServiceResponse<{ questionId: number }>> => {
+  const authedRooms = await db
+    .select()
+    .from(rooms)
+    .where(and(eq(rooms.roomId, params.roomId)))
+    .limit(1);
+
+  if (!authedRooms || authedRooms.length === 0) {
+    return {
+      code: StatusCodes.UNAUTHORIZED,
+      error: {
+        message: 'No room with the given ID exists',
+      },
+    };
+  }
+
+  const authedRoom = authedRooms[0];
+  const { userId1, userId2, questionId } = authedRoom;
+
+  if (![userId1, userId2].includes(params.userId)) {
+    return {
+      code: StatusCodes.UNAUTHORIZED,
+      error: {
+        message: 'No room with the given ID exists',
+      },
+    };
+  }
+
+  return {
+    code: StatusCodes.OK,
+    data: {
+      questionId,
+    },
+  };
+};

backend/collaboration/src/service/get/types.ts

@@ -9,3 +9,8 @@ export type IGetCollabRoomPayload = {
 export type IGetCollabRoomResponse = IServiceResponse<{
   roomName: string;
 }>;
+
+export type IGetAuthRoomPayload = {
+  roomId: string;
+  userId: string;
+};

frontend/src/components/blocks/interview/question-attempts/attempt-details/main.tsx

@@ -31,13 +31,13 @@ export const AttemptDetailsDialog: FC<PropsWithChildren<AttemptDetailsPaneProps>
       ) : (
         <DialogTrigger>{triggerText}</DialogTrigger>
       )}
-      <DialogContent className='border-border text-primary'>
+      <DialogContent className='border-border text-primary max-w-screen-md'>
         <DialogHeader>
           <DialogTitle className=''>
             Attempt&nbsp;<span className='font-mono'>{attemptId}</span>
           </DialogTitle>
         </DialogHeader>
-        <DialogDescription>
+        <DialogDescription className='size-full max-h-[calc(100dvh-200px)] overflow-auto'>
           <CodeViewer {...{ code, language }} />
         </DialogDescription>
         <DialogFooter>

frontend/src/lib/router.tsx

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

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

@@ -1,42 +1,36 @@
-import { QueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { type LoaderFunctionArgs, Navigate, useLoaderData } from 'react-router-dom';
 
 import { usePageTitle } from '@/lib/hooks';
-import { questionDetailsQuery } from '@/lib/queries/question-details';
 import { ROUTES } from '@/lib/routes';
 import { checkRoomAuthorization } from '@/services/collab-service';
 import { useAuthedRoute } from '@/stores/auth-store';
 
 import InterviewRoom from './interview-room';
 
-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 loader = ({ params }: LoaderFunctionArgs) => {
+  const roomId = params.roomId;
+
+  return {
+    roomId,
   };
+};
 
 export const InterviewRoomContainer = () => {
   usePageTitle(ROUTES.INTERVIEW);
-  const { roomId, questionId } = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>;
+  const { roomId } = useLoaderData() as ReturnType<typeof loader>;
   const { userId } = useAuthedRoute();
 
   const safeRoomId = roomId ?? '';
 
   const { data: authResult, error } = useSuspenseQuery({
-    queryKey: ['checkRoomAuthorization', safeRoomId, userId, questionId],
-    queryFn: () => checkRoomAuthorization(safeRoomId!, userId!, questionId),
+    queryKey: ['checkRoomAuthorization', safeRoomId, userId],
+    queryFn: () => checkRoomAuthorization(safeRoomId, userId),
   });
 
-  if (error || !authResult?.isAuthed || !roomId) {
+  if (error || !authResult?.isAuthed || !roomId || !authResult?.questionId) {
     return <Navigate to={ROUTES.HOME} />;
   }
 
-  return <InterviewRoom questionId={questionId} roomId={roomId} />;
+  return <InterviewRoom questionId={authResult.questionId} roomId={roomId} />;
 };

frontend/src/routes/match/waiting-room/waiting.tsx

@@ -128,12 +128,11 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
       console.log(`Received match: ${JSON.stringify(data)}`);
 
       const roomId = data?.roomId;
-      const questionId = data?.questionId;
       countdownRef.current = 0;
       clearInterval(timerRef.current!);
 
       socket.close();
-      navigate(`${ROUTES.INTERVIEW.replace(':roomId', roomId)}?questionId=${questionId}`);
+      navigate(`${ROUTES.INTERVIEW.replace(':roomId', roomId)}`);
     });
 
     socket.on(MATCHING_EVENT.FAILED, () => {

frontend/src/services/collab-service.ts

@@ -1,21 +1,20 @@
 import { collabApiGetClient } from './api-clients';
 
 const COLLAB_SERVICE_ROUTES = {
-  CHECK_ROOM_AUTH: '/room/auth?roomId=<roomId>&userId=<userId>&questionId=<questionId>',
+  CHECK_ROOM_AUTH: '/room/auth',
 };
 
-export const checkRoomAuthorization = (roomId: string, userId: string, questionId: number) => {
+export const checkRoomAuthorization = (roomId: string, userId: string) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('roomId', roomId);
+  searchParams.set('userId', userId);
   return collabApiGetClient
-    .get(
-      COLLAB_SERVICE_ROUTES.CHECK_ROOM_AUTH.replace(/<roomId>/, roomId)
-        .replace(/<userId>/, userId)
-        .replace(/<questionId>/, questionId.toString())
-    )
+    .get(`${COLLAB_SERVICE_ROUTES.CHECK_ROOM_AUTH}?${searchParams.toString()}`)
     .then((response) => {
-      return { isAuthed: response.status < 400 };
+      return { isAuthed: response.status < 400, questionId: response.data?.questionId };
     })
     .catch((err) => {
       console.log(err);
-      return { isAuthed: false };
+      return { isAuthed: false, questionId: undefined };
     });
 };