Add code execution with piston and fix initial language bug

njxue · njxue · commit f722f6ac3cbb · 2024-10-26T10:24:21.000+08:00
diff --git a/frontend/src/data/piston/PistonClient.ts b/frontend/src/data/piston/PistonClient.ts
@@ -1,12 +1,19 @@
 import axios from "axios";
+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: string, version: string, sourceCode: string) {
-        const res = await pistonAxios.post("/execute", { language, version, files: [{ content: sourceCode }] });
+    static async executeCode(language: Language, sourceCode: string) {
+        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 };
     }
 
     static async getLanguageVersions() {
diff --git a/frontend/src/domain/context/CollaborationContext.tsx b/frontend/src/domain/context/CollaborationContext.tsx
@@ -16,6 +16,8 @@ interface CollaborationContextType {
     languages: Language[];
     handleChangeLanguage: (lang: Language) => void;
     handleExecuteCode: () => void;
+    stdout: string;
+    stderr: string;
 }
 const CollaborationContext = createContext<CollaborationContextType | undefined>(undefined);
 
@@ -33,6 +35,10 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     });
     const [languages, setLanguages] = useState<Language[]>([]);
 
+    const [stdout, setStdout] = useState<string>("");
+    const [stderr, setStderr] = useState<string>("");
+    const [isExecuting, setIsExecuting] = useState<boolean>(false);
+
     const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
     const monacoRef = useRef<Monaco | null>(null);
     const bindingRef = useRef<MonacoBinding | null>(null);
@@ -44,14 +50,20 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         editorRef.current = editor;
         monacoRef.current = monaco;
 
-        await initialiseLanguages(monaco);
         const { yDoc, provider, yMap } = initialiseYdoc(roomId);
+
         bindEditorToDoc(editor, yDoc, provider);
         setUpObserver(yMap);
         setUpConnectionAwareness(provider);
+        await initialiseLanguages(monaco, yMap, editor);
     };
 
-    const initialiseLanguages = async (monaco: Monaco) => {
+    const initialiseLanguages = async (
+        monaco: Monaco,
+        yMap: Y.Map<any>,
+        editor: monaco.editor.IStandaloneCodeEditor
+    ) => {
+        // Initialise language dropdown
         const allLanguages = monaco.languages.getLanguages();
         const pistonLanguageVersions = await PistonClient.getLanguageVersions();
         setLanguages(
@@ -63,6 +75,13 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                     version: pistonLanguageVersions.find((pistonLang: any) => pistonLang.language === lang.id)?.version
                 }))
         );
+
+        // Set the editor's language
+        const language: Language = yMap.get(SELECTED_LANGUAGE);
+        const model = editor?.getModel();
+        if (model) {
+            monaco.editor.setModelLanguage(model, language?.language ?? "javascript");
+        }
     };
 
     const initialiseYdoc = (roomId: string): { yDoc: Y.Doc; yMap: Y.Map<any>; provider: WebsocketProvider } => {
@@ -98,9 +117,11 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         yMap.observe((event) => {
             event.changes.keys.forEach((change, key) => {
                 if (key === SELECTED_LANGUAGE) {
-                    const language = yMap.get(SELECTED_LANGUAGE);
-                    if (language) {
-                        setSelectedLanguage(language);
+                    const language: Language = yMap.get(SELECTED_LANGUAGE);
+                    setSelectedLanguage(language);
+                    const model = editorRef.current?.getModel();
+                    if (model) {
+                        monaco.editor.setModelLanguage(model, language.language);
                     }
                 }
             });
@@ -129,13 +150,36 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         yMapRef.current?.set(SELECTED_LANGUAGE, lang);
     };
 
-    const handleExecuteCode = () => {
-        const sourceCode = editorRef.current?.getValue();
+    const handleExecuteCode = async () => {
+        try {
+            setIsExecuting(true);
+            const sourceCode = editorRef.current?.getValue();
+            if (!sourceCode) {
+                // TODO
+                return;
+            }
+            const output = await PistonClient.executeCode(selectedLanguage, sourceCode);
+            const { stdout, stderr } = output;
+            setStdout(stdout);
+            setStderr(stderr);
+        } catch (e) {
+            toast.error("There was an issue running the code");
+        } finally {
+            setIsExecuting(false);
+        }
     };
 
     return (
         <CollaborationContext.Provider
-            value={{ initialiseEditor, selectedLanguage, languages, handleChangeLanguage, handleExecuteCode }}
+            value={{
+                initialiseEditor,
+                selectedLanguage,
+                languages,
+                handleChangeLanguage,
+                handleExecuteCode,
+                stdout,
+                stderr
+            }}
         >
             {children}
         </CollaborationContext.Provider>
diff --git a/frontend/src/presentation/components/CodeEditor/CodeEditor.tsx b/frontend/src/presentation/components/CodeEditor/CodeEditor.tsx
@@ -7,6 +7,7 @@ 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";
 
 interface CodeEditorProps {
     roomId: string;
@@ -19,21 +20,12 @@ interface LanguageOption {
 }
 
 const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
-    const { initialiseEditor, languages, selectedLanguage, handleChangeLanguage, handleExecuteCode } =
-        useCollaboration();
+    const { initialiseEditor, handleExecuteCode } = useCollaboration();
     const [theme, setTheme] = useState("vs-light");
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => {
         initialiseEditor(roomId, editor, monaco);
     };
 
-    const languageOptions: LanguageOption[] = useMemo(() => {
-        return languages.map((lang: Language) => ({
-            label: lang.alias,
-            value: lang.language,
-            langData: lang
-        }));
-    }, [languages]);
-
     const handleToggleTheme = () => {
         if (theme === "vs-light") {
             setTheme("vs-dark");
@@ -45,17 +37,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
     return (
         <div className={styles.container}>
             <div className={styles.toolbar}>
-                <Select
-                    variant="borderless"
-                    style={{ width: "150px" }}
-                    placeholder="Select language"
-                    options={languageOptions}
-                    value={selectedLanguage.language}
-                    onChange={(_, option) => {
-                        const langOption = option as LanguageOption;
-                        handleChangeLanguage(langOption.langData);
-                    }}
-                />
+                <LanguageSelector />
                 <div className={styles.buttonGroup}>
                     <Button
                         onClick={handleToggleTheme}
@@ -74,7 +56,6 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
             <div className={styles.editor}>
                 <Editor
                     theme={theme}
-                    language={selectedLanguage.language}
                     onMount={handleEditorDidMount}
                     options={{
                         minimap: { enabled: false },
diff --git a/frontend/src/presentation/components/CodeEditor/LanguageSelector.tsx b/frontend/src/presentation/components/CodeEditor/LanguageSelector.tsx
@@ -0,0 +1,34 @@
+import { Select } from "antd";
+import { useCollaboration } from "domain/context/CollaborationContext";
+import { Language } from "domain/entities/Language";
+import { useMemo } from "react";
+
+interface LanguageOption {
+    label: string;
+    value: string;
+    langData: Language;
+}
+export const LanguageSelector: React.FC<{}> = () => {
+    const { languages, selectedLanguage, handleChangeLanguage } = useCollaboration();
+    const languageOptions: LanguageOption[] = useMemo(() => {
+        return languages.map((lang: Language) => ({
+            label: lang.alias,
+            value: lang.language,
+            langData: lang
+        }));
+    }, [languages]);
+
+    return (
+        <Select
+            variant="borderless"
+            style={{ width: "150px" }}
+            placeholder="Select language"
+            options={languageOptions}
+            value={selectedLanguage.language}
+            onChange={(_, option) => {
+                const langOption = option as LanguageOption;
+                handleChangeLanguage(langOption.langData);
+            }}
+        />
+    );
+};
diff --git a/frontend/src/presentation/pages/CollaborationRoomPage.tsx b/frontend/src/presentation/pages/CollaborationRoomPage.tsx
@@ -6,9 +6,11 @@ import { initialQuestions } from "data/repositories/mockQuestionRepository";
 import { useParams } from "react-router-dom";
 import { useResizable } from "react-resizable-layout";
 import NotFound from "./NotFound";
+import { useCollaboration } from "domain/context/CollaborationContext";
 
 const CollaborationRoomPage: React.FC = () => {
     const { roomId } = useParams();
+    const { stdout, stderr } = useCollaboration();
     const { position: questionPosition, separatorProps: verticalSeparatorProps } = useResizable({
         axis: "x",
         min: 300,
@@ -41,6 +43,8 @@ const CollaborationRoomPage: React.FC = () => {
                 <div className={styles.horizontalSeparator} {...horizontalSeparatorProps} />
                 <div className={styles.output} style={{ height: outputPosition }}>
                     <p>Output</p>
+                    {stdout}
+                    {stderr}
                 </div>
             </div>
         </div>
