PEER-219: Add question attempt status to main view

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

Author: SeeuSim

backend/question/src/controller/question-controller.ts

@@ -21,13 +21,14 @@ import type {
 } from '@/services/post/types';
 
 export const getQuestions = async (req: Request, res: Response): Promise<Response> => {
-  const { questionName, difficulty, topic, pageNum, recordsPerPage } = req.query;
+  const { questionName, difficulty, topic, pageNum, recordsPerPage, userId } = req.query;
   const payload: IGetQuestionsPayload = {
     questionName: questionName as string,
     difficulty: difficulty as string,
     topic: topic as Array<string>,
     pageNum: parseInt(pageNum as string) || 0,
     recordsPerPage: parseInt(recordsPerPage as string) || 20,
+    userId: userId as string,
   };
 
   try {

backend/question/src/services/get/index.ts

@@ -1,8 +1,8 @@
-import { and, arrayOverlaps, eq, ilike, sql } from 'drizzle-orm';
+import { and, arrayOverlaps, eq, getTableColumns, ilike, or, sql } from 'drizzle-orm';
 import { StatusCodes } from 'http-status-codes';
 
 import { db } from '@/lib/db/index';
-import { questions } from '@/lib/db/schema';
+import { questionAttempts, questions } from '@/lib/db/schema';
 
 import type {
   IGetDifficultiesResponse,
@@ -16,7 +16,7 @@ import type {
 export const getQuestionsService = async (
   payload: IGetQuestionsPayload
 ): Promise<IGetQuestionsResponse> => {
-  const { questionName, difficulty, topic, pageNum = 0, recordsPerPage = 20 } = payload;
+  const { questionName, difficulty, topic, pageNum = 0, recordsPerPage = 20, userId } = payload;
   const offset = pageNum * recordsPerPage;
 
   const whereClause = [];
@@ -34,9 +34,20 @@ export const getQuestionsService = async (
   }
 
   const query = db
-    .select()
+    .select({
+      ...getTableColumns(questions),
+      attempted: sql`COALESCE(COUNT(${questionAttempts.attemptId}), 0)`.as('attempted'),
+    })
     .from(questions)
+    .leftJoin(
+      questionAttempts,
+      and(
+        eq(questionAttempts.questionId, questions.id),
+        or(eq(questionAttempts.userId1, userId), eq(questionAttempts.userId2, userId))
+      )
+    )
     .where(and(...whereClause))
+    .groupBy(questions.id)
     .limit(recordsPerPage)
     .offset(offset)
     .orderBy(questions.id);
@@ -58,6 +69,7 @@ export const getQuestionsService = async (
         title: q.title,
         difficulty: q.difficulty,
         topic: q.topic,
+        attempted: (q.attempted as number) > 0,
       })),
       totalQuestions: totalCount,
     },

backend/question/src/services/get/types.ts

@@ -5,6 +5,7 @@ import type { IServiceResponse } from '@/types';
 //=============================================================================
 export type IGetQuestionsPayload = {
   // Filters
+  userId: string;
   questionName?: string;
   difficulty?: string;
   topic?: Array<string>;

frontend/src/lib/router.tsx

@@ -10,7 +10,10 @@ import { Login } from '@/routes/login';
 import { loader as topicsLoader } from '@/routes/match/logic';
 import { Match } from '@/routes/match/main';
 import { loader as questionDetailsLoader, QuestionDetailsPage } from '@/routes/questions/details';
-import { loader as questionsLoader, Questions } from '@/routes/questions/main';
+import {
+  // loader as questionsLoader,
+  Questions,
+} from '@/routes/questions/main';
 import { SignUp } from '@/routes/signup';
 
 import { queryClient } from './query-client';
@@ -33,7 +36,7 @@ export const router = createBrowserRouter([
               },
               {
                 path: ROUTES.QUESTIONS,
-                loader: questionsLoader(queryClient),
+                // loader: questionsLoader(queryClient),
                 element: <Questions />,
               },
               {

frontend/src/routes/questions/main.tsx

@@ -1,59 +1,60 @@
-import { type QueryClient, queryOptions, useInfiniteQuery } from '@tanstack/react-query';
-import { Suspense, useEffect, useMemo } from 'react';
-import { Await, defer, type LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
+import {
+  // type QueryClient, queryOptions,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
+import {
+  // Suspense,
+  useEffect,
+  useMemo,
+} from 'react';
 
+// import { Await, defer, type LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 import { WithNavBanner } from '@/components/blocks/authed';
-import { Loading } from '@/components/blocks/loading';
+// import { Loading } from '@/components/blocks/loading';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { usePageTitle } from '@/lib/hooks';
 import { useCrumbs } from '@/lib/hooks/use-crumbs';
 import { ROUTES } from '@/lib/routes';
 import { fetchQuestions, ROWS_PER_PAGE } from '@/services/question-service';
+import { useAuthedRoute } from '@/stores/auth-store';
 import type { IGetQuestionsResponse } from '@/types/question-types';
 
 import { QuestionTable } from './question-table';
 import { columns } from './table-columns';
 
-const getListQuestionsQueryConfig = (pageNumber?: number) =>
-  queryOptions({
-    queryKey: ['qn', 'list', pageNumber],
-    queryFn: async ({ signal: _ }) => fetchQuestions(pageNumber),
-  });
-
-export const loader =
-  (queryClient: QueryClient) =>
-  async ({ params: _ }: LoaderFunctionArgs) => {
-    return defer({
-      initialPage: queryClient.ensureQueryData(getListQuestionsQueryConfig()),
-    });
-  };
-
-type IQuestionListServiceAPIResponse = Awaited<ReturnType<typeof fetchQuestions>>;
-type IQuestionLoaderReturn = Awaited<ReturnType<ReturnType<typeof loader>>>['data'];
-type IQuestionLoaderData = { initialPage?: IQuestionListServiceAPIResponse };
+// type IQuestionListServiceAPIResponse = Awaited<ReturnType<typeof fetchQuestions>>;
+// type IQuestionLoaderReturn = Awaited<ReturnType<ReturnType<typeof loader>>>['data'];
+// type IQuestionLoaderData = { initialPage?: IQuestionListServiceAPIResponse };
+// const getListQuestionsQueryConfig = (pageNumber?: number) =>
+//   queryOptions({
+//     queryKey: ['qn', 'list', pageNumber],
+//     queryFn: async ({ signal: _ }) => fetchQuestions(pageNumber),
+//   });
+// export const loader =
+//   (queryClient: QueryClient) =>
+//   async ({ params: _ }: LoaderFunctionArgs) => {
+//     return defer({
+//       initialPage: queryClient.ensureQueryData(getListQuestionsQueryConfig()),
+//     });
+//   };
 
 export function Questions() {
+  const { userId } = useAuthedRoute();
   usePageTitle(ROUTES.QUESTIONS);
   const { crumbs } = useCrumbs();
 
-  const initialData = useLoaderData() as IQuestionLoaderReturn as IQuestionLoaderData;
-
   const { data, fetchNextPage, hasNextPage, isError, isFetchingNextPage } = useInfiniteQuery<
     IGetQuestionsResponse,
     Error
   >({
-    queryKey: ['questions'],
-    queryFn: ({ pageParam }) => fetchQuestions(pageParam as number | undefined),
+    queryKey: ['questions', userId],
+    queryFn: ({ pageParam }) => fetchQuestions(userId, pageParam as number | undefined),
     initialPageParam: 0,
     getNextPageParam: (lastPage, pages) => {
       const nextPage = pages.length;
       const totalPages = Math.ceil(lastPage.totalQuestions / ROWS_PER_PAGE);
       return nextPage < totalPages ? nextPage : undefined;
     },
-    initialData: {
-      pages: initialData?.initialPage?.questions ? [initialData.initialPage] : [],
-      pageParams: initialData?.initialPage?.questions ? [0] : [],
-    },
   });
 
   useEffect(() => {
@@ -65,22 +66,16 @@ export function Questions() {
   const questions = useMemo(() => {
     if (data) {
       return data.pages.flatMap((page) => page.questions);
-    } else if (initialData?.initialPage?.questions) {
-      return initialData.initialPage.questions;
     }
 
     return [];
-  }, [data, initialData]);
+  }, [data]);
 
   return (
     <WithNavBanner crumbs={crumbs}>
       <div className='flex w-full flex-1 overflow-hidden py-3'>
         <ScrollArea className='size-full px-6'>
-          <Suspense fallback={<Loading />}>
-            <Await resolve={initialData.initialPage}>
-              <QuestionTable columns={columns} data={questions} isError={isError} />
-            </Await>
-          </Suspense>
+          <QuestionTable columns={columns} data={questions} isError={isError} />
         </ScrollArea>
       </div>
     </WithNavBanner>

frontend/src/services/question-service.ts

@@ -31,8 +31,12 @@ export const getQuestionDetails = (questionId: number): Promise<IGetQuestionDeta
 
 export const ROWS_PER_PAGE = 8;
 
-export async function fetchQuestions(pageNum: number = 0): Promise<IGetQuestionsResponse> {
+export async function fetchQuestions(
+  userId: string,
+  pageNum: number = 0
+): Promise<IGetQuestionsResponse> {
   const params = new URLSearchParams({
+    userId,
     pageNum: String(pageNum),
     recordsPerPage: String(ROWS_PER_PAGE),
   }).toString();