PEER-219: Add question details attempts view

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

Author: SeeuSim

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

@@ -2,6 +2,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import React, { useEffect, useMemo } from 'react';
 
 import { CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
 import { getQuestionAttempts } from '@/services/question-service';
 import { useAuthedRoute } from '@/stores/auth-store';
 import { IPostGetQuestionAttemptsResponse } from '@/types/question-types';
@@ -11,9 +12,15 @@ import { QuestionAttemptsTable } from './table';
 
 type QuestionAttemptsProps = {
   questionId: number;
+  pageSize?: number;
+  className?: string;
 };
 
-export const QuestionAttemptsPane: React.FC<QuestionAttemptsProps> = ({ questionId }) => {
+export const QuestionAttemptsPane: React.FC<QuestionAttemptsProps> = ({
+  questionId,
+  pageSize,
+  className,
+}) => {
   const { userId } = useAuthedRoute();
   const { data, hasNextPage, isFetchingNextPage, fetchNextPage, isError } = useInfiniteQuery({
     queryKey: ['question', 'attempts', questionId, userId],
@@ -33,8 +40,13 @@ export const QuestionAttemptsPane: React.FC<QuestionAttemptsProps> = ({ question
     return data?.pages.flatMap((v) => v as IPostGetQuestionAttemptsResponse) ?? [];
   }, [data]);
   return (
-    <CardContent className='flex size-full p-0'>
-      <QuestionAttemptsTable columns={columns} data={attempts} isError={isError} />
+    <CardContent className={cn('flex h-full w-full p-0', className)}>
+      <QuestionAttemptsTable
+        columns={columns}
+        data={attempts}
+        isError={isError}
+        pageSize={pageSize}
+      />
     </CardContent>
   );
 };

frontend/src/components/blocks/interview/question-attempts/table.tsx

@@ -36,16 +36,18 @@ interface QuestionTableProps<TData, TValue> {
   columns: Array<ColumnDef<TData, TValue>>;
   data: Array<TData>;
   isError: boolean;
+  pageSize?: number;
 }
 
 export function QuestionAttemptsTable<TValue>({
   columns,
   data,
   isError,
+  pageSize,
 }: QuestionTableProps<IQuestionAttempt, TValue>) {
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: 10,
+    pageSize: pageSize ?? 10,
   });
 
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

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

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 
 import { WithNavBanner } from '@/components/blocks/authed';
+import { QuestionAttemptsPane } from '@/components/blocks/interview/question-attempts';
 import { QuestionDetails } from '@/components/blocks/questions/details';
 import { Card } from '@/components/ui/card';
 import { usePageTitle } from '@/lib/hooks';
@@ -35,7 +36,12 @@ export const QuestionDetailsPage = () => {
         <Card className='border-border m-4 w-1/3 max-w-[500px] overflow-hidden p-4 md:w-2/5'>
           <QuestionDetails questionDetails={questionDetails} />
         </Card>
-        <div className='flex flex-1 flex-col' />
+        <div className='flex flex-1 flex-col'>
+          <Card className='border-border m-4 flex h-[calc(100%-32px)] flex-col gap-2 p-6'>
+            <h1 className='text-xl font-semibold'>Attempts</h1>
+            <QuestionAttemptsPane questionId={questionId} className='h-[calc(100%-40px)]' />
+          </Card>
+        </div>
       </div>
     </WithNavBanner>
   );