Merge pull request #30 from CS3219-AY2425S1/feature/questions-integration

SeeuSim · web-flow · commit 7b39e5f83279 · 2024-09-30T00:17:06.000+08:00
[Milestone 2] Add Questions Integration w backend APIs and remove code smells
diff --git a/backend/question/.env.local b/backend/question/.env.local
@@ -1,7 +1,10 @@
 EXPRESS_ENV="local"
+PEERPREP_UI_HOST="http://localhost:5173"
+
+EXPRESS_PORT=9002
 EXPRESS_DB_HOST="localhost"
 EXPRESS_DB_PORT=5433
 POSTGRES_DB="question"
 POSTGRES_USER="peerprep-qn-express"
 POSTGRES_PASSWORD="Xk8qEcEI2sizjfEn/lF6mLqiyBECjIHY3q6sdXf9poQ="
-PGDATA="/data/qn-db"
+PGDATA="/data/qn-db"
diff --git a/backend/question/package.json b/backend/question/package.json
@@ -20,21 +20,26 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "cors": "^2.8.5",
     "drizzle-orm": "^0.33.0",
     "env-cmd": "^10.1.0",
     "express": "^4.21.0",
+    "helmet": "^8.0.0",
     "http-status-codes": "^2.3.0",
     "pino": "^9.4.0",
     "pino-http": "^10.3.0",
     "postgres": "^3.4.4"
   },
   "devDependencies": {
+    "@swc/core": "^1.7.26",
+    "@swc/helpers": "^0.5.13",
     "@types/express": "^4.17.21",
     "@types/node": "^22.5.5",
     "drizzle-kit": "^0.24.2",
     "nodemon": "^3.1.4",
     "pino-pretty": "^11.2.2",
     "ts-node": "^10.9.2",
-    "tsc-alias": "^1.8.10"
+    "tsc-alias": "^1.8.10",
+    "tsconfig-paths": "^4.2.0"
   }
 }
diff --git a/backend/question/src/controller/question-controller.ts b/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,
@@ -22,9 +24,16 @@ export const getQuestions = async (req: Request, res: Response): Promise<Respons
 
   try {
     const result = await getQuestionsService(payload);
-    return res.status(result.code).json(result);
+    if (!result.data || result.code >= 400) {
+      return res.status(result.code).json({
+        message: result.error?.message ?? 'An error occurred',
+      });
+    }
+    return res.status(result.code).json(result.data);
   } catch (error) {
-    return res.status(500).json({ success: false, message: 'An error occurred', error });
+    return res
+      .status(StatusCodes.INTERNAL_SERVER_ERROR)
+      .json({ success: false, message: 'An error occurred', error });
   }
 };
 
@@ -35,9 +44,16 @@ export const getQuestionDetails = async (req: Request, res: Response): Promise<R
 
   try {
     const result = await getQuestionDetailsService(payload);
-    return res.status(result.code).json(result);
+    if (!result.data || result.code >= 400) {
+      return res.status(result.code).json({
+        message: result.error?.message ?? 'An error occurred',
+      });
+    }
+    return res.status(result.code).json(result.data);
   } catch (error) {
-    return res.status(500).json({ success: false, message: 'An error occurred', error });
+    return res
+      .status(StatusCodes.INTERNAL_SERVER_ERROR)
+      .json({ success: false, message: 'An error occurred', error });
   }
 };
 
@@ -51,7 +67,9 @@ export const getRandomQuestion = async (req: Request, res: Response): Promise<Re
     const result = await getRandomQuestionService(payload);
     return res.status(result.code).json(result);
   } catch (error) {
-    return res.status(500).json({ success: false, message: 'An error occurred', error });
+    return res
+      .status(StatusCodes.INTERNAL_SERVER_ERROR)
+      .json({ success: false, message: 'An error occurred', error });
   }
 };
 
@@ -61,13 +79,17 @@ export const searchQuestionsByTitle = async (req: Request, res: Response): Promi
   const limit = parseInt(req.query.limit as string) || 10;
 
   if (!title) {
-    return res.status(400).json({ success: false, message: 'Title is required' });
+    return res
+      .status(StatusCodes.UNPROCESSABLE_ENTITY)
+      .json({ success: false, message: 'Title is required' });
   }
 
   try {
     const result = await searchQuestionsByTitleService(title.toString(), page, limit);
     return res.status(result.code).json(result);
   } catch (error) {
-    return res.status(500).json({ success: false, message: 'An error occurred', error });
+    return res
+      .status(StatusCodes.INTERNAL_SERVER_ERROR)
+      .json({ success: false, message: 'An error occurred', error });
   }
 };
diff --git a/backend/question/src/index.ts b/backend/question/src/index.ts
@@ -1,7 +1,7 @@
 import { logger } from '@/lib/utils';
 import app, { dbHealthCheck } from '@/server';
 
-const port = process.env.PORT || 8001;
+const port = Number.parseInt(process.env.EXPRESS_PORT ?? '8001');
 
 const listenMessage = `App listening on port: ${port}`;
 app.listen(port, () => {
diff --git a/backend/question/src/routes/question.ts b/backend/question/src/routes/question.ts
diff --git a/backend/question/src/server.ts b/backend/question/src/server.ts
@@ -1,15 +1,26 @@
 import { exit } from 'process';
-import questionsRouter from './routes/question-routes';
+
+import cors from 'cors';
 import express, { json } from 'express';
 import pino from 'pino-http';
 import { sql } from 'drizzle-orm';
+import helmet from 'helmet';
 
+import questionsRouter from '@/routes/question';
 import { config, db } from '@/lib/db';
 import { logger } from '@/lib/utils';
 
 const app = express();
 app.use(pino());
 app.use(json());
+app.use(helmet());
+app.use(
+  cors({
+    origin: [process.env.PEERPREP_UI_HOST!],
+    credentials: true,
+  })
+);
+
 app.use('/questions', questionsRouter);
 app.get('/', async (_req, res) => {
   res.json({
diff --git a/backend/question/src/services/get/index.ts b/backend/question/src/services/get/index.ts
@@ -11,6 +11,7 @@ import type {
   IGetRandomQuestionPayload,
   IGetRandomQuestionResponse,
 } from './types';
+import { StatusCodes } from 'http-status-codes';
 
 export const getQuestionsService = async (
   payload: IGetQuestionsPayload
@@ -35,7 +36,8 @@ export const getQuestionsService = async (
     .from(questions)
     .where(and(...whereClause))
     .limit(recordsPerPage)
-    .offset(offset);
+    .offset(offset)
+    .orderBy(questions.id);
 
   const [results, totalCount] = await Promise.all([
     query,
@@ -47,7 +49,7 @@ export const getQuestionsService = async (
   ]);
 
   return {
-    code: 200,
+    code: StatusCodes.OK,
     data: {
       questions: results.map((q) => ({
         id: q.id,
@@ -73,7 +75,7 @@ export const getQuestionDetailsService = async (
 
   if (result.length === 0) {
     return {
-      code: 404,
+      code: StatusCodes.NOT_FOUND,
       data: { question: null },
       error: {
         message: 'Question not found',
@@ -82,7 +84,7 @@ export const getQuestionDetailsService = async (
   }
 
   return {
-    code: 200,
+    code: StatusCodes.OK,
     data: { question: result[0] },
   };
 };
@@ -117,7 +119,7 @@ export const getRandomQuestionService = async (
 
   if (result.length === 0) {
     return {
-      code: 404,
+      code: StatusCodes.NOT_FOUND,
       data: { question: null },
       error: {
         message: 'No matching questions found',
@@ -126,7 +128,7 @@ export const getRandomQuestionService = async (
   }
 
   return {
-    code: 200,
+    code: StatusCodes.OK,
     data: { question: result[0] },
   };
 };
@@ -156,7 +158,7 @@ export const searchQuestionsByTitleService = async (
 
   // Return the results as per IGetQuestionsResponse format
   return {
-    code: 200,
+    code: StatusCodes.OK,
     data: {
       questions: results, // Directly returning the query results
       totalQuestions: results.length, // Count of questions returned
diff --git a/backend/user/drizzle/0000_initial_schema.sql b/backend/user/drizzle/0000_initial_schema.sql
@@ -1,5 +1,5 @@
 CREATE TABLE IF NOT EXISTS "users" (
-	"id" serial PRIMARY KEY NOT NULL,
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
 	"email" varchar(255) NOT NULL,
 	"username" varchar(255) NOT NULL,
 	"first_name" varchar(255) NOT NULL,
diff --git a/backend/user/drizzle/meta/0000_snapshot.json b/backend/user/drizzle/meta/0000_snapshot.json
@@ -1,5 +1,5 @@
 {
-  "id": "d8e4806c-713c-4202-a3f8-4a8be2c8b711",
+  "id": "d0b8800a-d4b6-49f8-b2cf-57f4a64fc64a",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
@@ -10,9 +10,10 @@
       "columns": {
         "id": {
           "name": "id",
-          "type": "serial",
+          "type": "uuid",
           "primaryKey": true,
-          "notNull": true
+          "notNull": true,
+          "default": "gen_random_uuid()"
         },
         "email": {
           "name": "email",
diff --git a/backend/user/drizzle/meta/_journal.json b/backend/user/drizzle/meta/_journal.json
@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1727590732890,
-      "tag": "0000_steady_madame_masque",
+      "when": 1727623675374,
+      "tag": "0000_initial_schema",
       "breakpoints": true
     }
   ]
diff --git a/backend/user/package.json b/backend/user/package.json
@@ -25,7 +25,6 @@
     "cors": "^2.8.5",
     "drizzle-orm": "^0.33.0",
     "env-cmd": "^10.1.0",
-    "esbuild": "^0.24.0",
     "express": "^4.21.0",
     "express-rate-limit": "^7.4.0",
     "helmet": "^7.1.0",
diff --git a/backend/user/src/lib/db/schema.ts b/backend/user/src/lib/db/schema.ts
@@ -1,8 +1,8 @@
-import { pgTable, smallint, timestamp, serial, varchar, integer } from 'drizzle-orm/pg-core';
+import { integer, pgTable, smallint, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
 
 // Define the user table
 export const users = pgTable('users', {
-  id: serial('id').primaryKey(), // UUID as primary key with a default random value
+  id: uuid('id').primaryKey().notNull().defaultRandom(), // UUID as primary key with a default random value
   email: varchar('email', { length: 255 }).unique().notNull(), // Email field, unique and required
   username: varchar('username', { length: 255 }).unique().notNull(), // Username field, unique and required
   firstName: varchar('first_name', { length: 255 }).notNull(), // First name field, required
diff --git a/frontend/.env.local b/frontend/.env.local
@@ -1 +1,2 @@
 VITE_USER_SERVICE="http://localhost:9001"
+VITE_QUESTION_SERVICE="http://localhost:9002"
diff --git a/frontend/src/components/providers/query-provider.tsx b/frontend/src/components/providers/query-provider.tsx
@@ -1,9 +1,10 @@
 import { FC, PropsWithChildren } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 import { queryClient } from '@/lib/query-client';
 
-const IS_SHOW_DEVTOOLS = true;
+const IS_SHOW_DEVTOOLS = false;
 
 export const QueryProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
diff --git a/frontend/src/lib/router.tsx b/frontend/src/lib/router.tsx
@@ -5,6 +5,7 @@ import { RootLayout } from '@/components/blocks/root-layout';
 import { RouteGuard, loader as routeGuardLoader } from '@/components/blocks/route-guard';
 
 import { ForgotPassword } from '@/routes/forgot-password';
+import { HomePage } from '@/routes/home';
 import { Login } from '@/routes/login';
 import { QuestionDetails, loader as questionDetailsLoader } from '@/routes/questions/details';
 import { Questions, loader as questionsLoader } from '@/routes/questions/main';
@@ -22,9 +23,12 @@ export const router = createBrowserRouter([
         loader: routeGuardLoader(queryClient),
         children: [
           {
-            path: ROUTES.HOME,
             element: <AuthedLayout />,
             children: [
+              {
+                path: ROUTES.HOME,
+                element: <HomePage />, // A temporary redirect to /questions for now.
+              },
               {
                 path: ROUTES.QUESTIONS,
                 loader: questionsLoader(queryClient),
diff --git a/frontend/src/routes/home/index.tsx b/frontend/src/routes/home/index.tsx
@@ -0,0 +1,7 @@
+import { Navigate } from 'react-router-dom';
+import { ROUTES } from '@/lib/routes';
+
+export const HomePage = () => {
+  // TODO: Add actual home page
+  return <Navigate to={ROUTES.QUESTIONS} />;
+};
diff --git a/frontend/src/routes/questions/details/main.tsx b/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>
diff --git a/frontend/src/routes/questions/table-columns.tsx b/frontend/src/routes/questions/table-columns.tsx
@@ -39,10 +39,10 @@ export const columns: ColumnDef<Question>[] = [
     filterFn: 'equals',
   },
   {
-    accessorKey: 'topics',
+    accessorKey: 'topic',
     header: 'Topics',
     cell: ({ row }) => {
-      const topics: string[] = row.getValue('topics');
+      const topics: string[] = row.getValue('topic');
       return (
         <div>
           {topics.map((topic) => (
diff --git a/frontend/src/services/api-clients.ts b/frontend/src/services/api-clients.ts
diff --git a/frontend/src/services/question-service.ts b/frontend/src/services/question-service.ts
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,8 @@`
`5`	`5`	`{`
`6`	`6`	`"idx": 0,`
`7`	`7`	`"version": "7",`
`8`		`- "when": 1727590732890,`
`9`		`- "tag": "0000_steady_madame_masque",`
	`8`	`+ "when": 1727623675374,`
	`9`	`+ "tag": "0000_initial_schema",`
`10`	`10`	`"breakpoints": true`
`11`	`11`	`}`
`12`	`12`	`]`