Merge pull request #103 from guanquann/code-execution-fe

Code execution FE

Author: nicolelim02

frontend/src/components/TestCase/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/contexts/CollabContext.tsx

@@ -19,7 +19,7 @@ import { CollabEvents, collabSocket, leave } from "../utils/collabSocket";
 import { communicationSocket } from "../utils/communicationSocket";
 import useAppNavigate from "../components/UseAppNavigate";
 
-type CompilerResult = {
+export type CompilerResult = {
   status: string;
   exception: string | null;
   stdout: string;
@@ -29,6 +29,7 @@ type CompilerResult = {
   stout: string;
   actualResult: string;
   expectedResult: string;
+  isMatch: boolean;
 };
 
 type CollabContextType = {
@@ -39,6 +40,7 @@ type CollabContextType = {
   checkPartnerStatus: () => void;
   setCode: React.Dispatch<React.SetStateAction<string>>;
   compilerResult: CompilerResult[];
+  setCompilerResult: React.Dispatch<React.SetStateAction<CompilerResult[]>>;
   isEndSessionModalOpen: boolean;
 };
 
@@ -78,12 +80,12 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     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++) {
@@ -156,6 +158,7 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         checkPartnerStatus,
         setCode,
         compilerResult,
+        setCompilerResult,
         isEndSessionModalOpen,
       }}
     >

frontend/src/pages/CollabSandbox/index.tsx

@@ -12,7 +12,7 @@ import {
   Tabs,
 } from "@mui/material";
 import classes from "./index.module.css";
-import { useCollab } from "../../contexts/CollabContext";
+import { CompilerResult, useCollab } from "../../contexts/CollabContext";
 import { useMatch } from "../../contexts/MatchContext";
 import {
   COLLAB_CONNECTION_ERROR,
@@ -61,6 +61,8 @@ const CollabSandbox: React.FC = () => {
   }
 
   const {
+    compilerResult,
+    setCompilerResult,
     handleRejectEndSession,
     handleConfirmEndSession,
     checkPartnerStatus,
@@ -79,6 +81,7 @@ const CollabSandbox: React.FC = () => {
       return;
     }
     getQuestionById(questionId, dispatch);
+    setCompilerResult([]);
 
     const matchId = getMatchId();
     if (!matchUser || !matchId) {
@@ -95,7 +98,7 @@ const CollabSandbox: React.FC = () => {
           toast.error(COLLAB_CONNECTION_ERROR);
           setIsConnecting(false);
         }
-      } catch (error) {
+      } catch {
         toast.error(COLLAB_CONNECTION_ERROR);
         setIsConnecting(false);
       }
@@ -122,7 +125,7 @@ const CollabSandbox: React.FC = () => {
     return <Navigate to="/home" replace />;
   }
 
-  if (!selectedQuestion || !editorState) {
+  if (!selectedQuestion || !editorState || !compilerResult) {
     return <Loader />;
   }
 
@@ -262,9 +265,12 @@ const CollabSandbox: React.FC = () => {
               {/* display result of each test case in the output (result) and stdout (any print statements executed) */}
               <TestCase
                 input={selectedQuestion.inputs[selectedTestcase]}
-                output={""}
-                stdout={""}
-                result={selectedQuestion.outputs[selectedTestcase]}
+                expected={selectedQuestion.outputs[selectedTestcase]}
+                result={
+                  compilerResult.length > 0
+                    ? compilerResult[selectedTestcase]
+                    : ({} as CompilerResult)
+                }
               />
             </TabPanel>
             <TabPanel value={selectedTab} selected="chat">