PEER-228,229: Add navigation

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

Author: SeeuSim

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

@@ -9,19 +9,17 @@ interface AddAttemptRequestBody {
   userId2?: string; // Optional if userId2 is not always required
   code: string;
   language: string;
-  topic: string[]; // Assuming topic is an array of strings
-  difficulty: string;
 }
 
 // Controller function to handle creating an attempt
 export const createAttempt = async (
   req: Request<unknown, unknown, AddAttemptRequestBody>,
   res: Response
 ) => {
-  const { questionId, userId1, userId2, code, language, topic, difficulty } = req.body;
+  const { questionId, userId1, userId2, code, language } = req.body;
 
   // Basic validation for required fields
-  if (!questionId || !userId1 || !code || !language || !topic || !difficulty) {
+  if (!questionId || !userId1 || !code || !language) {
     return res.status(400).json({ error: 'Missing required fields' });
   }
 

frontend/src/components/blocks/interview/constants.ts

@@ -0,0 +1,6 @@
+export const COMPLETION_STATES = {
+  PENDING: 'pending',
+  SUCCESS: 'success',
+  ERROR: 'error',
+  EMPTY: '',
+};

frontend/src/components/blocks/interview/editor.tsx

@@ -51,19 +51,19 @@ export const Editor = ({ questionId, room, onAIClick, onPartnerClick }: EditorPr
     return getTheme(theme);
   }, [theme]);
 
-  const [isOtherUserCompletingDialogOpen, setIsOtherUserCompletingDialogOpen] = useState('');
+  const [completionState, setCompletionState] = useState('');
 
   useEffect(() => {
     if (isCompleting.userId !== userId && isCompleting.state) {
-      setIsOtherUserCompletingDialogOpen(isCompleting.state);
+      setCompletionState(isCompleting.state);
     } else {
-      setIsOtherUserCompletingDialogOpen('');
+      setCompletionState('');
     }
   }, [isCompleting]);
 
   return (
     <div className='flex w-full flex-col gap-4 p-4'>
-      {isOtherUserCompletingDialogOpen && <OtherUserCompletingDialog />}
+      {completionState && <OtherUserCompletingDialog status={completionState} />}
       {isLoading ? (
         <div className='flex h-[60px] w-full flex-row justify-between pt-3'>
           <div className='flex h-10 flex-row gap-4'>
@@ -126,7 +126,16 @@ export const Editor = ({ questionId, room, onAIClick, onPartnerClick }: EditorPr
                 ))}
               </div>
             </div>
-            <CompleteDialog {...{ setCompleting: setIsCompleting, questionId, code, members }}>
+            <CompleteDialog
+              {...{
+                setCompleting: setIsCompleting,
+                userId: userId as string,
+                questionId,
+                code,
+                members,
+                language,
+              }}
+            >
               <Button size='sm' variant='destructive' disabled={!code} className='mx-4'>
                 Complete question
               </Button>

frontend/src/components/blocks/interview/room/complete-dialog.tsx

@@ -1,5 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
 import { FC, PropsWithChildren, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -9,19 +11,31 @@ import {
   DialogHeader,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import { addQuestionAttempt } from '@/services/question-service';
 import { IYjsUserState } from '@/types/collab-types';
 
+import { COMPLETION_STATES } from '../constants';
+
 type CompleteDialogProps = {
+  userId: string;
   questionId: number;
   code: string;
+  language: string;
   members: Array<IYjsUserState['user']>;
   setCompleting: (state: string, resetId?: boolean) => void;
 };
 
 export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
   children,
   setCompleting,
+  questionId,
+  userId,
+  code,
+  language,
+  members,
 }) => {
+  const navigate = useNavigate();
+
   const [isOpen, _setIsOpen] = useState(false);
   const setIsOpen = useCallback(
     (openState: boolean) => {
@@ -36,13 +50,28 @@ export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
     [isOpen]
   );
 
-  const { mutate: _m } = useMutation({
-    mutationFn: async () => {},
+  const { mutate: sendCompleteRequest, isPending } = useMutation({
+    mutationFn: async () => {
+      return await addQuestionAttempt({
+        questionId,
+        code,
+        language,
+        userId1: userId,
+        userId2:
+          members.length < 2 ? undefined : members.filter((v) => v.userId !== userId)[0].userId,
+      });
+    },
     onSuccess: () => {
-      setCompleting('success');
+      setCompleting(COMPLETION_STATES.SUCCESS);
       // Navigate to home page
+      setTimeout(() => {
+        setCompleting(COMPLETION_STATES.EMPTY, true);
+        navigate('/');
+      }, 200);
+    },
+    onError: () => {
+      setCompleting(COMPLETION_STATES.ERROR);
     },
-    onError: () => {},
   });
 
   return (
@@ -62,7 +91,14 @@ export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
             >
               Go Back
             </Button>
-            <Button>Complete Question</Button>
+            <Button
+              disabled={isPending}
+              onClick={() => sendCompleteRequest()}
+              className='flex flex-row items-center gap-2'
+            >
+              <span>Complete Question</span>
+              {isPending && <Loader2 className='animate-spin' />}
+            </Button>
           </div>
         </DialogFooter>
       </DialogContent>

frontend/src/components/blocks/interview/room/other-user-completing-dialog.tsx

@@ -1,13 +1,38 @@
+import { FC, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
 import { Dialog, DialogContent, DialogHeader } from '@/components/ui/dialog';
 
-export const OtherUserCompletingDialog = () => {
+import { COMPLETION_STATES } from '../constants';
+
+type OtherUserCompletingDialogProps = {
+  status: string;
+};
+
+export const OtherUserCompletingDialog: FC<OtherUserCompletingDialogProps> = ({ status }) => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (status === COMPLETION_STATES.SUCCESS) {
+      setTimeout(() => {
+        navigate('/');
+      }, 200);
+    }
+  }, [status]);
+
   return (
     <Dialog open>
       <DialogContent className='text-primary border-border'>
         <DialogHeader className='text-lg font-medium'>
-          The other user is marking this question attempt as complete. Please wait...
+          {status === COMPLETION_STATES.PENDING
+            ? 'The other user is marking this question attempt as complete. Please wait...'
+            : status === COMPLETION_STATES.SUCCESS
+              ? 'Question marked as completed. Navigating to home page...'
+              : 'An Error occurred.'}
         </DialogHeader>
-        <div className='bg-background absolute right-3 top-3 z-50 size-6' />
+        {status !== COMPLETION_STATES.ERROR && ( // Block exit if not error
+          <div className='bg-background absolute right-3 top-3 z-50 size-6' />
+        )}
       </DialogContent>
     </Dialog>
   );

frontend/src/services/question-service.ts

@@ -3,6 +3,8 @@ import type {
   IGetQuestionDetailsResponse,
   IGetQuestionsResponse,
   IGetTopicsResponse,
+  IPostAddQuestionAttemptParams,
+  IPostAddQuestionAttemptResponse,
 } from '@/types/question-types';
 
 import { questionApiClient } from './api-clients';
@@ -12,6 +14,7 @@ const QUESTION_SERVICE_ROUTES = {
   GET_QUESTION_DETAILS: '/questions/<questionId>',
   GET_TOPICS: '/questions/topics',
   GET_DIFFICULTIES: '/questions/difficulties',
+  POST_ADD_ATTEMPT: '/questions/newAttempt',
 };
 
 export const getQuestionDetails = (questionId: number): Promise<IGetQuestionDetailsResponse> => {
@@ -57,3 +60,17 @@ export const fetchDifficulties = (): Promise<IGetDifficultiesResponse> => {
     return res.data as IGetDifficultiesResponse;
   });
 };
+
+export const addQuestionAttempt = (
+  params: IPostAddQuestionAttemptParams
+): Promise<IPostAddQuestionAttemptResponse> => {
+  return questionApiClient
+    .post(QUESTION_SERVICE_ROUTES.POST_ADD_ATTEMPT, params, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .then((res) => {
+      return res.data as IPostAddQuestionAttemptResponse;
+    });
+};

frontend/src/types/question-types.ts

@@ -30,3 +30,20 @@ export type IGetDifficultiesResponse = {
 export type IGetQuestionDetailsResponse = {
   question: QuestionDetails;
 };
+
+export type IPostAddQuestionAttemptParams = {
+  questionId: number;
+  userId1: string;
+  userId2?: string; // Optional if userId2 is not always required
+  code: string;
+  language: string;
+};
+
+export type IPostAddQuestionAttemptResponse =
+  | {
+      message: string;
+    }
+  | {
+      error: string;
+      details: string;
+    };