Merge branch 'development' into deployment

Author: jolynloh

backend/code-execution-service/src/controllers/codeExecutionControllers.ts

@@ -10,7 +10,6 @@ import {
   ERROR_INVALID_TEST_CASES_MESSAGE,
 } from "../utils/constants";
 import { questionService } from "../utils/questionApi";
-import { testCasesApi } from "../utils/testCasesApi";
 
 interface CompilerResult {
   status: string;

backend/code-execution-service/src/utils/testCasesApi.ts

@@ -6,7 +6,6 @@ import {
   ERROR_NOT_SAME_LENGTH_MESSAGE,
   SUCCESS_MESSAGE,
 } from "../src/utils/constants";
-import { testCasesApi } from "../src/utils/testCasesApi";
 import { questionService } from "../src/utils/questionApi";
 
 const request = supertest(app);

backend/code-execution-service/tests/codeExecutionRoutes.spec.ts

@@ -1,6 +1,9 @@
 import { Box, styled, TextField, Typography } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
-import { communicationSocket } from "../../utils/communicationSocket";
+import {
+  CommunicationEvents,
+  communicationSocket,
+} from "../../utils/communicationSocket";
 import { useMatch } from "../../contexts/MatchContext";
 import {
   USE_AUTH_ERROR_MESSAGE,
@@ -15,19 +18,6 @@ type Message = {
   createdTime: number;
 };
 
-export enum CommunicationEvents {
-  // receive
-  JOIN = "join",
-  SEND_TEXT_MESSAGE = "send_text_message",
-  DISCONNECT = "disconnect",
-
-  // send
-  USER_JOINED = "user_joined",
-  ALREADY_JOINED = "already_joined",
-  TEXT_MESSAGE_RECEIVED = "text_message_received",
-  DISCONNECTED = "disconnected",
-}
-
 type ChatProps = {
   isActive: boolean;
 };
@@ -66,13 +56,13 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
       roomId: getMatchId(),
       username: user?.username,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
 
     return () => {
       console.log("closing socket...");
       communicationSocket.close();
       setMessages([]); // clear the earlier messages in dev mode
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

frontend/src/components/Chat/index.tsx

@@ -2,26 +2,14 @@ import { Button, Stack } from "@mui/material";
 import Stopwatch from "../Stopwatch";
 import { useCollab } from "../../contexts/CollabContext";
 import { USE_COLLAB_ERROR_MESSAGE } from "../../utils/constants";
-import { useEffect, useState } from "react";
 
 const CollabSessionControls: React.FC = () => {
-  const [time, setTime] = useState<number>(0);
-
-  useEffect(() => {
-    const intervalId = setInterval(
-      () => setTime((prevTime) => prevTime + 1),
-      1000
-    );
-
-    return () => clearInterval(intervalId);
-  }, [time]);
-
   const collab = useCollab();
   if (!collab) {
     throw new Error(USE_COLLAB_ERROR_MESSAGE);
   }
 
-  const { handleSubmitSessionClick, handleEndSessionClick } = collab;
+  const { handleSubmitSessionClick, handleEndSessionClick, time } = collab;
 
   return (
     <Stack direction={"row"} alignItems={"center"} spacing={2}>
@@ -33,7 +21,7 @@ const CollabSessionControls: React.FC = () => {
         }}
         variant="outlined"
         color="success"
-        onClick={() => handleSubmitSessionClick(time)}
+        onClick={() => handleSubmitSessionClick()}
       >
         Submit
       </Button>

frontend/src/components/CollabSessionControls/index.tsx

@@ -66,7 +66,6 @@ const QuestionCodeTemplates: React.FC<QuestionCodeTemplatesProps> = ({
       event.target.selectionEnd = cursorPosition + 1;
     }
   };
-  /* eslint-enable @typescript-eslint/no-explicit-any */
 
   return (
     <Box display="flex" flexDirection="column" marginTop={2}>

frontend/src/components/QuestionCodeTemplates/index.tsx

@@ -1,10 +1,10 @@
 import { Box, styled, Typography } from "@mui/material";
+import { CompilerResult } from "../../contexts/CollabContext";
 
 type TestCaseProps = {
   input: string;
-  output?: string;
-  stdout: string;
-  result?: string;
+  expected: string;
+  result: CompilerResult;
 };
 
 const StyledBox = styled(Box)(({ theme }) => ({
@@ -18,34 +18,58 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
   whiteSpace: "pre-line",
 }));
 
-const TestCase: React.FC<TestCaseProps> = ({
-  input,
-  output,
-  stdout,
-  result,
-}) => {
+const TestCase: React.FC<TestCaseProps> = ({ input, expected, result }) => {
   return (
     <Box>
-      <StyledBox sx={(theme) => ({ marginBottom: theme.spacing(2) })}>
+      {"isMatch" in result && result.isMatch && (
+        <StyledBox>
+          <Typography variant="h4" color="success">
+            Accepted
+          </Typography>
+        </StyledBox>
+      )}
+      {"isMatch" in result && !result.isMatch && (
+        <StyledBox>
+          <Typography variant="h4" color="error">
+            Wrong Answer
+          </Typography>
+        </StyledBox>
+      )}
+      {result.stderr && (
+        <StyledBox>
+          <Typography variant="overline">Error</Typography>
+          <StyledTypography
+            fontFamily={"monospace"}
+            sx={{ backgroundColor: "#EDAFAF" }}
+          >
+            {result.stderr}
+          </StyledTypography>
+        </StyledBox>
+      )}
+      <StyledBox>
         <Typography variant="overline">Input</Typography>
         <StyledTypography fontFamily={"monospace"}>{input}</StyledTypography>
       </StyledBox>
-      {output && (
+      <StyledBox>
+        <Typography variant="overline">Expected</Typography>
+        <StyledTypography fontFamily={"monospace"}>{expected}</StyledTypography>
+      </StyledBox>
+      {"actualResult" in result && (
         <StyledBox>
-          <Typography variant="overline">Output</Typography>
-          <StyledTypography fontFamily={"monospace"}>{output}</StyledTypography>
+          <Typography variant="overline">Actual</Typography>
+          <StyledTypography fontFamily={"monospace"}>
+            {result.actualResult || "\u00A0"}
+          </StyledTypography>
         </StyledBox>
       )}
-      {stdout && (
+      {"stdout" in result && (
         <StyledBox>
           <Typography variant="overline">Stdout</Typography>
-          <StyledTypography fontFamily={"monospace"}>{stdout}</StyledTypography>
+          <StyledTypography fontFamily={"monospace"}>
+            {result.stdout || "\u00A0"}
+          </StyledTypography>
         </StyledBox>
       )}
-      <StyledBox>
-        <Typography variant="overline">Expected</Typography>
-        <StyledTypography fontFamily={"monospace"}>{result}</StyledTypography>
-      </StyledBox>
     </Box>
   );
 };

frontend/src/components/TestCase/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import {
   USE_MATCH_ERROR_MESSAGE,
   FAILED_TESTCASE_MESSAGE,
@@ -11,16 +11,15 @@ import {
 import { toast } from "react-toastify";
 
 import { useMatch } from "./MatchContext";
-import { codeExecutionClient } from "../utils/api";
+import { qnHistoryClient, codeExecutionClient } from "../utils/api";
 import { useReducer } from "react";
 import { updateQnHistoryById } from "../reducers/qnHistoryReducer";
 import qnHistoryReducer, { initialQHState } from "../reducers/qnHistoryReducer";
 import { CollabEvents, collabSocket, leave } from "../utils/collabSocket";
-import { CommunicationEvents } from "../components/Chat";
 import { communicationSocket } from "../utils/communicationSocket";
 import useAppNavigate from "../components/UseAppNavigate";
 
-type CompilerResult = {
+export type CompilerResult = {
   status: string;
   exception: string | null;
   stdout: string;
@@ -30,17 +29,21 @@ type CompilerResult = {
   stout: string;
   actualResult: string;
   expectedResult: string;
+  isMatch: boolean;
 };
 
 type CollabContextType = {
-  handleSubmitSessionClick: (time: number) => void;
+  handleSubmitSessionClick: () => void;
   handleEndSessionClick: () => void;
   handleRejectEndSession: () => void;
   handleConfirmEndSession: () => void;
   checkPartnerStatus: () => void;
   setCode: React.Dispatch<React.SetStateAction<string>>;
   compilerResult: CompilerResult[];
+  setCompilerResult: React.Dispatch<React.SetStateAction<CompilerResult[]>>;
   isEndSessionModalOpen: boolean;
+  time: number;
+  resetCollab: () => void;
 };
 
 const CollabContext = createContext<CollabContextType | null>(null);
@@ -65,6 +68,17 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     qnHistoryId,
   } = match;
 
+  const [time, setTime] = useState<number>(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(
+      () => setTime((prevTime) => prevTime + 1),
+      1000
+    );
+
+    return () => clearInterval(intervalId);
+  }, [time]);
+
   // eslint-disable-next-line
   const [_qnHistoryState, qnHistoryDispatch] = useReducer(
     qnHistoryReducer,
@@ -75,16 +89,16 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const [isEndSessionModalOpen, setIsEndSessionModalOpen] =
     useState<boolean>(false);
 
-  const handleSubmitSessionClick = async (time: number) => {
+  const handleSubmitSessionClick = async () => {
     try {
       const res = await codeExecutionClient.post("/", {
         questionId,
-        code,
+        // Replace tabs with 4 spaces to prevent formatting issues
+        code: code.replace(/\t/g, " ".repeat(4)),
         language: matchCriteria?.language.toLowerCase(),
       });
-
-      console.log(res.data.data);
-      setCompilerResult(res.data.data);
+      console.log([...res.data.data]);
+      setCompilerResult([...res.data.data]);
 
       let isMatch = true;
       for (let i = 0; i < res.data.data.length; i++) {
@@ -123,28 +137,39 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     setIsEndSessionModalOpen(false);
   };
 
-  const handleConfirmEndSession = () => {
+  const handleConfirmEndSession = async () => {
     setIsEndSessionModalOpen(false);
 
+    // Get queston history
+    const data = await qnHistoryClient.get(qnHistoryId as string);
+
+    // Only update question history if it has not been submitted before
+    if (!data.data.qnHistory.code) {
+      updateQnHistoryById(
+        qnHistoryId as string,
+        {
+          submissionStatus: "Attempted",
+          dateAttempted: new Date().toISOString(),
+          timeTaken: time,
+          code: code.replace(/\t/g, " ".repeat(4)),
+        },
+        qnHistoryDispatch
+      );
+    }
+
     // Leave collaboration room
     leave(matchUser?.id as string, getMatchId() as string, true);
     leave(partner?.id as string, getMatchId() as string, true);
 
     // Leave chat room
-    communicationSocket.emit(
-      CommunicationEvents.LEAVE,
-      getMatchId(),
-      matchUser?.username
-    );
-    communicationSocket.emit(
-      CommunicationEvents.LEAVE,
-      getMatchId(),
-      partner?.username
-    );
+    communicationSocket.disconnect();
 
     // Delete match data
     stopMatch();
     appNavigate("/home");
+
+    // Reset collab state
+    resetCollab();
   };
 
   const checkPartnerStatus = () => {
@@ -156,6 +181,11 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     });
   };
 
+  const resetCollab = () => {
+    setCompilerResult([]);
+    setTime(0);
+  };
+
   return (
     <CollabContext.Provider
       value={{
@@ -166,7 +196,10 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         checkPartnerStatus,
         setCode,
         compilerResult,
+        setCompilerResult,
         isEndSessionModalOpen,
+        time,
+        resetCollab,
       }}
     >
       {children}