Merge remote-tracking branch 'origin/main' into PEER-223-Matching-Cancellation-Endpoint

Merge

Author: sembcorpp

backend/matching/src/services/get-match-items.ts

@@ -1,3 +1,4 @@
+import { logger } from '@/lib/utils';
 import type { IMatchItemsResponse, IMatchType } from '@/types';
 
 import { createRoom } from './collab';
@@ -16,12 +17,18 @@ export async function getMatchItems(
       throw new Error('Both user IDs are required');
     }
 
-    const [attemptedQuestions1, attemptedQuestions2] = await Promise.all([
-      fetchAttemptedQuestions(userId1),
-      fetchAttemptedQuestions(userId2),
-    ]);
+    let allAttemptedQuestions: number[] = [];
+
+    try {
+      const [attemptedQuestions1, attemptedQuestions2] = await Promise.all([
+        fetchAttemptedQuestions(userId1),
+        fetchAttemptedQuestions(userId2),
+      ]);
+      allAttemptedQuestions = [...new Set([...attemptedQuestions1, ...attemptedQuestions2])];
+    } catch (error) {
+      logger.error('Error in getMatchItems: Failed to fetch attempted questions', error);
+    }
 
-    const allAttemptedQuestions = [...new Set([...attemptedQuestions1, ...attemptedQuestions2])];
     const topics = topic?.split('|') ?? [];
     const payload = {
       attemptedQuestions: allAttemptedQuestions,
@@ -35,16 +42,21 @@ export async function getMatchItems(
     // Get a random question
     const question = await getRandomQuestion(payload);
 
+    if (!question) {
+      logger.info('No matching question found');
+      return undefined;
+    }
+
     const roomId = await createRoom(userId1, userId2, question.id.toString());
 
-    console.log('Successfully got match items');
+    logger.info('Successfully got match items');
     return {
       roomId,
       questionId: question.id,
       // question,
     };
   } catch (error) {
-    console.error('Error in getMatchItems:', error);
+    logger.error('Error in getMatchItems:', error);
     return undefined;
   }
 }

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

@@ -26,14 +26,17 @@ export const createQuestionService = async (payload: ICreateQuestionPayload) =>
 
 export const updateQuestionService = async (payload: IUpdateQuestionPayload) => {
   try {
+    const updateSet: Partial<typeof questions.$inferInsert> = {};
+
+    if (payload.title !== undefined) updateSet.title = payload.title;
+    if (payload.description !== undefined) updateSet.description = payload.description;
+    if (payload.difficulty !== undefined) updateSet.difficulty = payload.difficulty;
+    if (payload.topics !== undefined && Array.isArray(payload.topics))
+      updateSet.topic = payload.topics.map(String);
+
     const [updatedQuestion] = await db
       .update(questions)
-      .set({
-        title: payload.title,
-        description: payload.description,
-        difficulty: payload.difficulty,
-        topic: payload.topics.map(String),
-      })
+      .set(updateSet)
       .where(eq(questions.id, Number(payload.id)))
       .returning();
 

frontend/package.json

@@ -60,6 +60,7 @@
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.11",

frontend/src/routes/login/logic.ts

@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
@@ -15,6 +17,8 @@ export const loginFormSchema = z.object({
 type ILoginFormSchema = z.infer<typeof loginFormSchema>;
 
 export const useLoginForm = () => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
   const navigate = useNavigate();
   const form = useForm<ILoginFormSchema>({
     resolver: zodResolver(loginFormSchema),
@@ -35,9 +39,19 @@ export const useLoginForm = () => {
         // TODO: Revalidate with is-authed User Svc EP and put as user
         // details provider on each route request
         localStorage.setItem('cachedUserID', userID);
+        navigate(0);
+      } else {
+        setErrorMessage('An error occured. Please try again later.');
+      }
+    },
+    onError: (error: AxiosError) => {
+      if (error.response?.status === 401 || error.response?.status === 404) {
+        setErrorMessage('Invalid Username or Password.');
+      } else if (error.response?.status === 409) {
+        setErrorMessage('Too many failed attempts. Please try again later.');
+      } else {
+        setErrorMessage('An error occurred. Please try again later.');
       }
-
-      navigate(0);
     },
   });
 
@@ -52,5 +66,5 @@ export const useLoginForm = () => {
     sendLoginRequest(payload);
   };
 
-  return { form, onSubmit: form.handleSubmit(onSubmit), isPending };
+  return { form, onSubmit: form.handleSubmit(onSubmit), isPending, errorMessage };
 };

frontend/src/routes/login/login-form.tsx

@@ -15,7 +15,7 @@ import { ROUTES } from '@/lib/routes';
 import { useLoginForm } from './logic';
 
 export const LoginForm = () => {
-  const { form, onSubmit, isPending } = useLoginForm();
+  const { form, onSubmit, isPending, errorMessage } = useLoginForm();
 
   return (
     <Card className='bg-primary-foreground border-border mx-auto flex size-full max-w-sm flex-col justify-center md:ml-auto md:mr-8 md:max-h-[600px]'>
@@ -61,6 +61,7 @@ export const LoginForm = () => {
                 </FormItem>
               )}
             />
+            {errorMessage && <p className='mt text-center text-sm text-red-500'>{errorMessage}</p>}
             <Button className='w-full' type='submit'>
               Login
             </Button>

frontend/src/routes/match/logic.ts

@@ -29,8 +29,8 @@ export const loader =
   };
 
 const formSchema = z.object({
-  selectedTopics: z.string().min(1, 'Topic cannot be empty').array(),
-  difficulty: z.string().min(1, 'Difficulty cannot be empty'),
+  selectedTopics: z.array(z.string()).min(1, 'Please select at least one topic'),
+  difficulty: z.string().min(1, 'Please select a difficulty'),
 });
 
 export type IRequestMatchFormSchema = z.infer<typeof formSchema>;
@@ -61,8 +61,6 @@ export const useRequestMatchForm = () => {
         setSocketPort(data.socketPort);
         return;
       }
-
-      console.error(`[MatchService::match::request]: Unexpected response: ${JSON.stringify(data)}`);
     },
   });
 

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

@@ -174,7 +174,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
       <div className='flex flex-col items-center justify-center'>
         {uiState.icon}
         {uiState.description.startsWith('RoomId') ? (
-          <p className='flex flex-col gap-1'>
+          <div className='flex flex-col gap-1'>
             <div className='flex flex-col gap-0'>
               <label className='text-lg'>Room Id:</label>
               <span className='text-md max-w-[400px] truncate text-balance font-mono'>
@@ -187,7 +187,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
                 {uiState.description.split('\nQuestionId: ')[1]}
               </span>
             </div>
-          </p>
+          </div>
         ) : (
           <p className='mt-4 whitespace-pre-wrap text-lg'>{uiState.description}</p>
         )}

frontend/src/routes/signup/logic.ts

@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
@@ -49,6 +51,7 @@ type ISignupFormSchema = z.infer<typeof signUpSchema>;
 
 export const useSignupForm = () => {
   const navigate = useNavigate();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const form = useForm<ISignupFormSchema>({
     resolver: zodResolver(signUpSchema),
@@ -71,9 +74,25 @@ export const useSignupForm = () => {
     mutationFn: signUp,
     onSuccess: (_response, _params, _context) => {
       form.reset();
+      setErrorMessage(null);
+      const userID = _response?.data?.id;
+
+      if (userID) {
+        // TODO: Revalidate with is-authed User Svc EP and put as user
+        // details provider on each route request
+        localStorage.setItem('cachedUserID', userID);
+      }
+
       // TODO: Add email validation page OR sign user in
       navigate('/');
     },
+    onError: (error: AxiosError) => {
+      if (error.response?.status === 409) {
+        setErrorMessage('User with this username or email already exists.');
+      } else {
+        setErrorMessage('An error occurred. Please try again later.');
+      }
+    },
   });
 
   const onSubmit = (formData: ISignupFormSchema) => {
@@ -90,5 +109,5 @@ export const useSignupForm = () => {
     sendSignUpRequest(payload);
   };
 
-  return { form, onSubmit: form.handleSubmit(onSubmit), status, isPending };
+  return { form, onSubmit: form.handleSubmit(onSubmit), status, isPending, errorMessage };
 };

frontend/src/routes/signup/signup-form.tsx

@@ -14,7 +14,7 @@ import { ROUTES } from '@/lib/routes';
 import { useSignupForm } from './logic';
 
 export const SignUpForm = () => {
-  const { form, onSubmit, isPending: isDisabled } = useSignupForm();
+  const { form, onSubmit, isPending: isDisabled, errorMessage } = useSignupForm();
   return (
     <Card className='bg-primary-foreground border-border flex  max-w-sm flex-col justify-center border'>
       <CardHeader className='flex items-center'>
@@ -118,6 +118,9 @@ export const SignUpForm = () => {
                 </FormItem>
               )}
             />
+            {errorMessage && (
+              <p className='mt-2 text-center text-sm text-red-500'>{errorMessage}</p>
+            )}
             <Button type='submit' disabled={isDisabled} className='mt-4 w-full'>
               Sign Up
             </Button>

frontend/src/services/match-service.ts

@@ -28,7 +28,7 @@ export const requestMatch = (
     })
     .catch((error) => {
       console.error('Request failed:', error);
-      return null;
+      throw error;
     });
 };