Add integration for question details

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

Author: SeeuSim

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

@@ -1,4 +1,6 @@
-import { Request, Response } from 'express';
+import { StatusCodes } from 'http-status-codes';
+import type { Request, Response } from 'express';
+
 import {
   getQuestionsService,
   getQuestionDetailsService,
@@ -10,7 +12,6 @@ import type {
   IGetQuestionPayload,
   IGetRandomQuestionPayload,
 } from '@/services/get/types';
-import { StatusCodes } from 'http-status-codes';
 
 export const getQuestions = async (req: Request, res: Response): Promise<Response> => {
   const payload: IGetQuestionsPayload = {
@@ -23,7 +24,7 @@ export const getQuestions = async (req: Request, res: Response): Promise<Respons
 
   try {
     const result = await getQuestionsService(payload);
-    if (!result.data || result.code < 400) {
+    if (!result.data || result.code >= 400) {
       return res.status(result.code).json({
         message: result.error?.message ?? 'An error occurred',
       });
@@ -43,7 +44,7 @@ export const getQuestionDetails = async (req: Request, res: Response): Promise<R
 
   try {
     const result = await getQuestionDetailsService(payload);
-    if (!result.data || result.code < 400) {
+    if (!result.data || result.code >= 400) {
       return res.status(result.code).json({
         message: result.error?.message ?? 'An error occurred',
       });

frontend/src/components/providers/query-provider.tsx

@@ -3,7 +3,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { queryClient } from '@/lib/query-client';
 
-const IS_SHOW_DEVTOOLS = false;
+const IS_SHOW_DEVTOOLS = true;
 
 export const QueryProvider: FC<PropsWithChildren> = ({ children }) => {
   return (

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

@@ -1,4 +1,5 @@
 import { QueryClient, queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import Markdown from 'react-markdown';
 import { LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 import rehypeKatex from 'rehype-katex';
@@ -32,8 +33,14 @@ export const loader =
 export const QuestionDetails = () => {
   const { questionId } = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>;
   const { data: details } = useSuspenseQuery(questionDetailsQuery(questionId));
-  const { crumbs } = useCrumbs({ path: '<CURRENT>', title: `${questionId}. ${details.title}` });
-  usePageTitle(details.title);
+  const questionDetails = useMemo(() => {
+    return details.question;
+  }, [details]);
+  const { crumbs } = useCrumbs({
+    path: '<CURRENT>',
+    title: `${questionId}. ${questionDetails.title}`,
+  });
+  usePageTitle(details.question.title);
 
   return (
     <WithNavBanner crumbs={[...crumbs]}>
@@ -44,19 +51,19 @@ export const QuestionDetails = () => {
               <div className='flex flex-col gap-4'>
                 <div className='flex w-full items-center gap-4'>
                   <CardTitle className='text-2xl'>
-                    {details.id}.&nbsp;{details.title}
+                    {questionDetails.id}.&nbsp;{questionDetails.title}
                   </CardTitle>
                 </div>
                 <div className='flex flex-wrap items-center gap-1'>
                   <Badge
-                    variant={details.difficulty.toLowerCase() as 'easy' | 'medium' | 'hard'}
+                    variant={questionDetails.difficulty.toLowerCase() as 'easy' | 'medium' | 'hard'}
                     className='flex w-min grow-0'
                   >
-                    {details.difficulty}
+                    {questionDetails.difficulty}
                   </Badge>
                   <Separator orientation='vertical' className='mx-2 h-4' />
                   <span className='text-sm font-medium'>Topics:</span>
-                  {details.topics.map((v, i) => (
+                  {questionDetails.topic.map((v, i) => (
                     <Badge
                       variant='secondary'
                       className='flex w-min grow-0 whitespace-nowrap'
@@ -88,7 +95,7 @@ export const QuestionDetails = () => {
                   },
                 }}
               >
-                {details.description}
+                {questionDetails.description}
               </Markdown>
             </CardContent>
           </ScrollArea>

frontend/src/services/question-service.ts

@@ -1,18 +1,31 @@
 import { questionApiClient } from './api-clients';
-import { questionDetails, questions } from '@/assets/questions';
+import { questions } from '@/assets/questions';
 import type { IGetQuestionsResponse } from '@/types/question-types';
 
 const QUESTION_SERVICE_ROUTES = {
   GET_QUESTIONS: '/questions',
   GET_QUESTION_DETAILS: '/questions/<questionId>',
 };
 
-type QuestionDetails = (typeof questionDetails)[number];
+// type QuestionDetails = (typeof questionDetails)[number];
+type IGetQuestionDetailsResponse = {
+  question: {
+    title: string;
+    description: string;
+    topic: Array<string>;
+    difficulty: string;
+    id?: string;
+  };
+};
+
+type IQuestionDetails = Required<IGetQuestionDetailsResponse>['question'];
 
-export const getQuestionDetails = (questionId: number): Promise<QuestionDetails> => {
-  return questionApiClient.get(
-    QUESTION_SERVICE_ROUTES.GET_QUESTION_DETAILS.replace(/<questionId>/, String(questionId))
-  );
+export const getQuestionDetails = (questionId: number): Promise<IGetQuestionDetailsResponse> => {
+  return questionApiClient
+    .get(QUESTION_SERVICE_ROUTES.GET_QUESTION_DETAILS.replace(/<questionId>/, String(questionId)))
+    .then((v) => {
+      return v.data as IGetQuestionDetailsResponse;
+    });
   // // return questionApiClient.get
   // console.log(questionDetails.find(({ id }) => id === questionId));
   // return new Promise((resolve, _reject) => {