Merge pull request #526 from Yavuzlar/516-adding-a-message-to-the-lab…

…-output-section 516 adding a message to the lab output section
Yavuzlar · Jan 10, 2025 · 12d403a · 12d403a
2 parents ab5f8e6 + 96ef63f
commit 12d403a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/frontend/src/components/code-editor/index.js b/frontend/src/components/code-editor/index.js
@@ -1,5 +1,5 @@
 import { Editor } from "@monaco-editor/react";
-import { Box, Typography, useMediaQuery } from "@mui/material";
+import { Button,Box, Typography, useMediaQuery } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -32,6 +32,7 @@ const CodeEditor = ({
   editorRef,
 }) => {
   const [value, setValue] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
   const [defaultValue, setDefaultValue] = useState(defValue);
   const [theme, setTheme] = useState("vs-dark");
   const [editorActionsWidth, setEditorActionsWidth] = useState(0);
@@ -47,6 +48,7 @@ const CodeEditor = ({
 
   // here we will add the run calls
   const handleRun = async () => {
+    setIsRunning(true);
     onPending(true);
     // const toastId = toast.loading(t("runCode"));
     showToast("dismiss");
@@ -68,7 +70,9 @@ const CodeEditor = ({
       toast.error(error.response?.data?.message || error.message, { id: 2 });
       onRun(error.response?.data?.message || error.message);
     }
+    setIsRunning(false);
     onPending(false);
+
   };
 
   // here we will add the stop api calls
@@ -196,6 +200,7 @@ const CodeEditor = ({
                     handleRun();
                     closeMobileMenu();
                   }}
+                  disabled={isRunning}
                 >
                   <Image
                     src={theme === "vs-dark" ? PlayIconWhite : PlayIconBlack}
@@ -257,14 +262,27 @@ const CodeEditor = ({
               }}
             >
               <Tooltip title="Run" placement="top" followCursor>
-                <Image
-                  src={theme === "vs-dark" ? PlayIconWhite : PlayIconBlack}
-                  alt="My SVG"
-                  width={30}
-                  height={30}
-                  style={{ cursor: "pointer" }}
-                  onClick={handleRun}
-                />
+                <Button
+                  sx={{
+                    margin: "0px",
+                    minWidth: "0px",
+                    padding: "0px",
+                    backgroundColor: "transparent",
+                    "&:hover": {
+                      backgroundColor: "transparent",
+                    },
+                  }}
+                  disabled={isRunning}
+                >
+                  <Image
+                    src={theme === "vs-dark" ? PlayIconWhite : PlayIconBlack}
+                    alt="My SVG"
+                    width={30}
+                    height={30}
+                    style={{ cursor: "pointer" }}
+                    onClick={handleRun}
+                  />
+                </Button>
               </Tooltip>
               <Tooltip title="Stop" placement="top" followCursor>
                 <Image

diff --git a/frontend/src/views/lab-question.js b/frontend/src/views/lab-question.js
@@ -122,8 +122,6 @@ const LabQuestion = ({ language = "", questionId }) => {
     difficulty: "",
     description: "",
     questionNote: "",
-    expectedOutputNote: "",
-    expectedOutput: "",
     hint: "",
     template: "",
     fileExtention: "",
@@ -182,6 +180,10 @@ const LabQuestion = ({ language = "", questionId }) => {
   const editorRef = useRef(null);
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    console.log("Output:", output);
+  }, [output]);
+
   const handleRun = (outputData) => {
     setOutput(outputData?.data);
     setIsSubmitted(true);
@@ -220,6 +222,9 @@ const LabQuestion = ({ language = "", questionId }) => {
   };
 
   const handleChange = (outputData) => {
+    setIsCorrect(false);
+    setIsFailed(false);
+    setIsSubmitted(false);
     setUserCode(outputData);
   };
 
@@ -253,8 +258,6 @@ const LabQuestion = ({ language = "", questionId }) => {
         difficulty: labSlice.data[0]?.difficulty,
         description: labSlice.data[0]?.language?.description,
         questionNote: labSlice.data[0]?.language?.note,
-        expectedOutputNote: labSlice.data[0]?.language?.expectedOutputNote,
-        expectedOutput: labSlice.data[0]?.language?.expectedOutput,
         hint: labSlice.data[0]?.language?.hint,
         template: labSlice.data[0]?.template,
         fileExtention: labSlice.data[0]?.fileExtention,
@@ -345,7 +348,11 @@ const LabQuestion = ({ language = "", questionId }) => {
                 </Button>
 
                 <Tooltip title={t("roads.lab.restart.button")}>
-                  <Button variant="dark" onClick={handleReset} disabled={isRunning}>
+                  <Button
+                    variant="dark"
+                    onClick={handleReset}
+                    disabled={isRunning}
+                  >
                     <RestartAltIcon />
                   </Button>
                 </Tooltip>
@@ -375,7 +382,7 @@ const LabQuestion = ({ language = "", questionId }) => {
               {/* Question Description */}
               <Typography variant="body1">{labData.description}</Typography>
 
-              {output && output.output && (
+              {((isCorrect || isFailed) && (output.output && output.expectedOutput)) ? (
                 <Alert
                   severity={output.isCorrect ? "success" : "error"}
                   variant="filled"
@@ -391,7 +398,7 @@ const LabQuestion = ({ language = "", questionId }) => {
                         .replace("$$$", output.expectedOutput)
                         .replace("***", output.output)}`}
                 </Alert>
-              )}
+              ) : null}
 
               {/* Question Note */}
               <Box
@@ -444,7 +451,7 @@ const LabQuestion = ({ language = "", questionId }) => {
               </Typography>
             )}
 
-            {isFailed && (
+            {isFailed ? (
               <Typography
                 variant="body1"
                 fontWeight="700"
@@ -453,7 +460,7 @@ const LabQuestion = ({ language = "", questionId }) => {
               >
                 {t("labs.question.failed")}
               </Typography>
-            )}
+            ) : null}
 
             {/* Expected output card */}
             {isSubmitted && (