Add code run feature

User 1 clicks run button -> output appears in User 1, but not in User 2 output
User 1 selects Java -> User 2 is still on default Python

Author: qiaoen17

Frontend/src/components/collab/Chat.jsx

@@ -5,7 +5,7 @@ const Chat = () => {
 
     const messages = ["Hello!", "Nice to meet you!"]
     return (
-        <Card>
+        <Card className='mt-3'>
             <Card.Header>Chat</Card.Header>
             <Card.Body>
                 <ListGroup>

Frontend/src/components/collab/CodeSpace.jsx

@@ -2,19 +2,21 @@ import React from 'react'
 import { Editor } from '@monaco-editor/react'
 import { Container, Stack } from 'react-bootstrap'
 
-const CodeSpace = ({ handleEditorChange, code }) => {
+const CodeSpace = ({ handleEditorChange, code, language, output }) => {
   return (
 
     <Stack gap={3} className='h-100'>
         <Editor
             height='400px'
-            defaultLanguage='javascript'
+            defaultLanguage="python"
+            language={language}
             value={code}
             onChange={handleEditorChange}
             theme='vs-dark'
         />
         <Container style={{ height: '200px', border: '1px solid #ccc', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#f8f9fa'}}>
             <h5>Output</h5>
+            <p style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{output}</p>
         </Container>
     </Stack>
 

Frontend/src/components/collab/CollabNavigationBar.jsx

@@ -1,16 +1,31 @@
 import React from 'react';
-import { Button, Container, Navbar, Nav } from 'react-bootstrap';
+import { Button, Container, Navbar, Nav, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'react-bootstrap';
+
+const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, language }) => {
 
-const CollabNavigationBar = ({ handleExit, users }) => {
   return (
      <Navbar className='bg-light' sticky='top'>
         <Container className='d-flex justify-content-between'>
+          {/* Language Dropdown on left */}
+          <Nav className='me-auto'>
+            <Dropdown onSelect={(eventKey) => setLanguage(eventKey)}>
+              <DropdownToggle style={{ backgroundColor: 'transparent', border: '1px solid #ccc', borderRadius: '0', color: '#000', padding: '8px 16px'}}>
+                {language}
+              </DropdownToggle>
+              <DropdownMenu>
+                <DropdownItem eventKey="python">Python</DropdownItem>
+                <DropdownItem eventKey="c++">C++</DropdownItem>
+                <DropdownItem eventKey="java">Java</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </Nav>
           {/* Run Code and Exit Buttons in Center */}
           <Nav className='mx-auto'>
-            <Button>Run Code</Button>
+            <Button onClick={handleCodeRun}>Run Code</Button>
             <Button variant="danger" className="ms-2" onClick={handleExit}>Exit</Button>
           </Nav>
 
+          {/* Users at the right */}
           <Nav>
             {users.map(user => {
                 return <div

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -6,8 +6,9 @@ import { getUserFromToken } from '../user/userAvatarBox';
 import QuestionDisplay from './QuestionDisplay';
 import Chat from './Chat';
 import CollabNavigationBar from './CollabNavigationBar';
-import CodingSpace from './CodeSpace';
+import CodeSpace from './CodeSpace';
 import { Container, Row, Col } from 'react-bootstrap';
+import collabService from '../../services/collab'; 
 
 const CollaborationSpace = () => {
     const navigate = useNavigate();
@@ -18,8 +19,17 @@ const CollaborationSpace = () => {
     const [code, setCode] = useState('');
     const [users, setUsers] = useState([]); // track users in the room 
     const [userId, setUserId] = useState(""); // current user 
+    const [language, setLanguage] = useState("python") // set default language to python 
+    const [output, setOutput] = useState("")
+
+    // use https://emkc.org/api/v2/piston/runtimes to GET other languages
+    const LANGUAGEVERSIONS = {
+        "python" : "3.10.0",
+        "java" : "15.0.2",
+        "c++": "10.2.0"
+    }
 
-    // get the userid only once with useEffect
+    {/* Set up websockets for room management on client side, and collaboration for Yjs */}
     useEffect(() => {
         const fetchUser = async () => {
             const user = await getUserFromToken();
@@ -82,6 +92,8 @@ const CollaborationSpace = () => {
         }
     }
 
+    {/* Functions to handle interaction with UI elements */}
+
     const handleExit = () => {
         // Notify server 3004 user is leaving 
         websocket.send(JSON.stringify({ type: 'leaveRoom', roomId, userId}));
@@ -98,6 +110,26 @@ const CollaborationSpace = () => {
         navigate("/home")
     };
 
+    const handleCodeRun = () => {
+        const code_message = {
+            "language": language,
+            "files": [
+                {
+                    "content": code
+                }
+            ],
+            "version": LANGUAGEVERSIONS[language]
+        }
+
+        collabService.getCodeOutput(code_message)
+        .then(result => {
+            console.log(result.data.run.output)
+            setOutput(result.data.run.output)
+        })
+        .catch(err => console.log(err));
+
+    }
+
     const handleEditorChange = (value) => {
         const yText = yDoc.getText('monacoEditor');
         yText.delete(0, yText.length); // Clear existing content 
@@ -106,11 +138,11 @@ const CollaborationSpace = () => {
 
     return (
         <div>
-            <CollabNavigationBar handleExit={handleExit} users={users}/>
+            <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language}/>
             <Container fluid style={{ marginTop: '20px' }}>
                 <Row>
                     <Col md={8}>
-                        <CodingSpace handleEditorChange={handleEditorChange} code={code}/>
+                        <CodeSpace handleEditorChange={handleEditorChange} code={code} language={language} output={output}/>
                     </Col>
                     <Col md={4}>
                         <QuestionDisplay/>

Frontend/src/services/collab.js

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const getCodeOutput = async (codeData) => {
+    const response = await axios.post("https://emkc.org/api/v2/piston/execute", codeData);
+    return response;
+}
+
+export default { getCodeOutput }