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

Update history on end session

frontend/src/components/CollabSessionControls/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/contexts/CollabContext.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,7 +11,7 @@ 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";
@@ -33,7 +33,7 @@ export type CompilerResult = {
 };
 
 type CollabContextType = {
-  handleSubmitSessionClick: (time: number) => void;
+  handleSubmitSessionClick: () => void;
   handleEndSessionClick: () => void;
   handleRejectEndSession: () => void;
   handleConfirmEndSession: () => void;
@@ -42,6 +42,8 @@ type CollabContextType = {
   compilerResult: CompilerResult[];
   setCompilerResult: React.Dispatch<React.SetStateAction<CompilerResult[]>>;
   isEndSessionModalOpen: boolean;
+  time: number;
+  resetCollab: () => void;
 };
 
 const CollabContext = createContext<CollabContextType | null>(null);
@@ -66,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,
@@ -76,7 +89,7 @@ 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,
@@ -124,9 +137,26 @@ 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);
@@ -137,6 +167,9 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     // Delete match data
     stopMatch();
     appNavigate("/home");
+
+    // Reset collab state
+    resetCollab();
   };
 
   const checkPartnerStatus = () => {
@@ -148,6 +181,11 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     });
   };
 
+  const resetCollab = () => {
+    setCompilerResult([]);
+    setTime(0);
+  };
+
   return (
     <CollabContext.Provider
       value={{
@@ -160,6 +198,8 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         compilerResult,
         setCompilerResult,
         isEndSessionModalOpen,
+        time,
+        resetCollab,
       }}
     >
       {children}

frontend/src/pages/CollabSandbox/index.tsx

@@ -62,11 +62,11 @@ const CollabSandbox: React.FC = () => {
 
   const {
     compilerResult,
-    setCompilerResult,
     handleRejectEndSession,
     handleConfirmEndSession,
     checkPartnerStatus,
     isEndSessionModalOpen,
+    resetCollab,
   } = collab;
 
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -83,6 +83,8 @@ const CollabSandbox: React.FC = () => {
     getQuestionById(questionId, dispatch);
     setCompilerResult([]);
 
+    resetCollab();
+
     const matchId = getMatchId();
     if (!matchUser || !matchId) {
       return;