Refactor code execution and change output box ui

Author: njxue

frontend/src/data/piston/PistonClient.ts

@@ -1,19 +1,25 @@
 import axios from "axios";
+import { CodeExecResult } from "domain/entities/CodeExecResult";
 import { Language } from "domain/entities/Language";
 
 const API_URL = "https://emkc.org/api/v2/piston";
 
 const pistonAxios = axios.create({ baseURL: API_URL });
 
 class PistonClient {
-    static async executeCode(language: Language, sourceCode: string) {
+    static async executeCode(language: Language, sourceCode: string): Promise<CodeExecResult> {
         const res = await pistonAxios.post("/execute", {
             language: language.language,
             version: language.version,
             files: [{ content: sourceCode }]
         });
         const output = res.data.run;
-        return { stdout: output.stdout, stderr: output.stderr };
+        return {
+            stdout: output.stdout,
+            stderr: output.stderr,
+            success: output.code === 0,
+            timeout: output.signal !== null
+        };
     }
 
     static async getLanguageVersions() {

frontend/src/domain/context/CollaborationContext.tsx

@@ -9,16 +9,18 @@ import { toast } from "react-toastify";
 import { COLLABORATION_AWARENESS_KEYS, COLLABORATION_YMAP_KEYS } from "presentation/utils/constants";
 import PistonClient from "data/piston/PistonClient";
 import { Language } from "domain/entities/Language";
+import { CodeExecResult } from "domain/entities/CodeExecResult";
 
 interface CollaborationContextType {
     initialiseEditor: (roomId: string, editor: any, monaco: Monaco) => void;
     selectedLanguage: Language;
     languages: Language[];
     handleChangeLanguage: (lang: Language) => void;
-    handleExecuteCode: () => void;
-    stdout: string;
-    stderr: string;
+    handleExecuteCode: () => Promise<void>;
+    isExecuting: boolean;
+    execResult: CodeExecResult | null;
 }
+
 const CollaborationContext = createContext<CollaborationContextType | undefined>(undefined);
 
 export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
@@ -35,8 +37,8 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     });
     const [languages, setLanguages] = useState<Language[]>([]);
 
-    const [stdout, setStdout] = useState<string>("");
-    const [stderr, setStderr] = useState<string>("");
+    const [execResult, setExecResult] = useState<CodeExecResult | null>(null);
+
     const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
     const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
@@ -158,10 +160,8 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                 // TODO
                 return;
             }
-            const output = await PistonClient.executeCode(selectedLanguage, sourceCode);
-            const { stdout, stderr } = output;
-            setStdout(stdout);
-            setStderr(stderr);
+            const output: CodeExecResult = await PistonClient.executeCode(selectedLanguage, sourceCode);
+            setExecResult(output);
         } catch (e) {
             toast.error("There was an issue running the code");
         } finally {
@@ -177,8 +177,8 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                 languages,
                 handleChangeLanguage,
                 handleExecuteCode,
-                stdout,
-                stderr
+                isExecuting,
+                execResult
             }}
         >
             {children}

frontend/src/domain/entities/CodeExecResult.ts

@@ -0,0 +1,6 @@
+export interface CodeExecResult {
+    stdout: string;
+    stderr: string;
+    success: boolean;
+    timeout: boolean;
+}

frontend/src/presentation/components/CodeEditor/CodeActionButtons.module.css

@@ -0,0 +1,12 @@
+.submitButton {
+    background-color: #ffa500;
+}
+
+.runButton {
+    background-color: black;
+    color: white;
+}
+
+button {
+    width: fit-content;
+}

frontend/src/presentation/components/CodeEditor/CodeActionButtons.tsx

@@ -0,0 +1,28 @@
+import { Button } from "antd";
+import { useCollaboration } from "domain/context/CollaborationContext";
+import { PlayCircleOutlined, CloudUploadOutlined } from "@ant-design/icons";
+import styles from "./CodeActionButtons.module.css";
+
+interface CodeActionButtonsProps {
+    disabled?: boolean;
+}
+export const CodeActionButtons: React.FC<CodeActionButtonsProps> = ({ disabled = false }) => {
+    const { handleExecuteCode } = useCollaboration();
+    return (
+        <>
+            <Button
+                onClick={async () => {
+                    await handleExecuteCode();
+                }}
+                className={styles.runButton}
+                icon={<PlayCircleOutlined />}
+                disabled={disabled}
+            >
+                Run
+            </Button>
+            <Button className={styles.submitButton} icon={<CloudUploadOutlined />} disabled={disabled}>
+                Submit
+            </Button>
+        </>
+    );
+};

frontend/src/presentation/components/CodeEditor/CodeEditor.module.css

@@ -9,9 +9,11 @@
 
 .toolbar {
     padding: 4px;
+    height: 40px;
     display: flex;
     width: 100%;
     justify-content: space-between;
+    align-items: center;
 }
 
 .editor {
@@ -25,15 +27,12 @@
     gap: 8px;
 }
 
-button {
-    width: fit-content;
-}
-
-.submitButton {
-    background-color: #ffa500;
+.pendingExecution {
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-.runButton {
-    background-color: black;
-    color: white;
+.pendingExecution p {
+    padding: 0;
 }

frontend/src/presentation/components/CodeEditor/CodeEditor.tsx

@@ -1,26 +1,20 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import styles from "./CodeEditor.module.css";
 import Editor, { Monaco } from "@monaco-editor/react";
-import { Button, Select } from "antd";
+import { Button, Spin } from "antd";
 import { useCollaboration } from "domain/context/CollaborationContext";
 import { PlayCircleOutlined, CloudUploadOutlined } from "@ant-design/icons";
 import * as monaco from "monaco-editor";
 import { SunOutlined, MoonFilled } from "@ant-design/icons";
-import { Language } from "domain/entities/Language";
 import { LanguageSelector } from "./LanguageSelector";
+import { CodeActionButtons } from "./CodeActionButtons";
 
 interface CodeEditorProps {
     roomId: string;
 }
 
-interface LanguageOption {
-    label: string;
-    value: string;
-    langData: Language;
-}
-
 const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
-    const { initialiseEditor, handleExecuteCode } = useCollaboration();
+    const { initialiseEditor, isExecuting } = useCollaboration();
     const [theme, setTheme] = useState("vs-light");
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => {
         initialiseEditor(roomId, editor, monaco);
@@ -38,19 +32,20 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
         <div className={styles.container}>
             <div className={styles.toolbar}>
                 <LanguageSelector />
+                {isExecuting && (
+                    <div className={styles.pendingExecution}>
+                        <Spin />
+                        <p>Running...</p>
+                    </div>
+                )}
                 <div className={styles.buttonGroup}>
                     <Button
                         onClick={handleToggleTheme}
                         type="text"
                         icon={theme === "vs-light" ? <SunOutlined /> : <MoonFilled />}
                     />
 
-                    <Button onClick={handleExecuteCode} className={styles.runButton} icon={<PlayCircleOutlined />}>
-                        Run
-                    </Button>
-                    <Button className={styles.submitButton} icon={<CloudUploadOutlined />}>
-                        Submit
-                    </Button>
+                    <CodeActionButtons disabled={isExecuting} />
                 </div>
             </div>
             <div className={styles.editor}>

frontend/src/presentation/components/CodeEditor/OutputBox.module.css

@@ -0,0 +1,28 @@
+.content {
+    white-space: pre-wrap;
+}
+
+.status {
+    font-weight: 600;
+}
+
+.successStatus {
+    color: green;
+}
+
+.failStatus {
+    color: red;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.container {
+    border: 2px solid transparent;
+    transition: border-color 0.5s ease;
+    padding: 0 16px;
+    height: 100%;
+}

frontend/src/presentation/components/CodeEditor/OutputBox.tsx

@@ -0,0 +1,43 @@
+import { useCollaboration } from "domain/context/CollaborationContext";
+import styles from "./OutputBox.module.css";
+import { useEffect, useState } from "react";
+
+export const OutputBox: React.FC<{}> = () => {
+    const { execResult } = useCollaboration();
+    const hasExecuted = execResult !== null;
+    const isSuccess = execResult?.success;
+    const isTimeout = execResult?.timeout;
+    const stdout = execResult?.stdout;
+    const stderr = execResult?.stderr;
+
+    // Output box flash color when it receives an output
+    const [flashColor, setFlashColor] = useState<"red" | "green" | null>(null);
+    useEffect(() => {
+        if (execResult) {
+            setFlashColor(execResult?.success ? "green" : "red");
+            const id = setTimeout(() => setFlashColor(null), 500);
+            return () => clearTimeout(id);
+        }
+    }, [execResult]);
+
+    return (
+        <div className={`${styles.container} `} style={{ borderColor: flashColor ?? "transparent" }}>
+            <div className={styles.header}>
+                <h3>Output</h3>
+                {hasExecuted && (
+                    <div className={styles.status}>
+                        {isSuccess ? (
+                            <p className={styles.successStatus}>Success</p>
+                        ) : (
+                            <p className={styles.failStatus}>{isTimeout ? "Time Limit Exceeded" : "Failed"}</p>
+                        )}
+                    </div>
+                )}
+            </div>
+            <div className={styles.content}>
+                {stdout && <p>{stdout}</p>}
+                {stderr && <p>{stderr}</p>}
+            </div>
+        </div>
+    );
+};

frontend/src/presentation/pages/CollaborationRoomPage.module.css

@@ -43,7 +43,7 @@
     height: 6px;
 }
 
-.output {
+.outputContainer {
     flex-shrink: 0;
-    padding: 0 8px;
+    overflow-y: auto;
 }