Set up basic frontend

Split the collaboration space into 4 components, navigation bar, chat, code space

Author: qiaoen17

Frontend/src/components/NavigationBar.jsx

@@ -1,16 +1,8 @@
 import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
-import { useNavigate } from 'react-router-dom';
 import UserAvatarBox from "./user/userAvatarBox";
 
 function NavigationBar() {
-    const navigate = useNavigate();
-
-    // Add log out functionality 
-    const handleLogout = () => {
-        sessionStorage.removeItem("jwt_token");
-        navigate("/login");
-    }
 
     return (
         <Navbar className='bg-light' sticky="top">

Frontend/src/components/collab/Chat.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Card, ListGroup, ListGroupItem } from 'react-bootstrap'
+
+const Chat = () => {
+
+    const messages = ["Hello!", "Nice to meet you!"]
+    return (
+        <Card>
+            <Card.Header>Chat</Card.Header>
+            <Card.Body>
+                <ListGroup>
+                    {messages.map((msg, idx) => (
+                        <ListGroupItem key={idx}>{msg}</ListGroupItem>
+                    ))}
+                </ListGroup>
+            </Card.Body>
+        </Card>
+    )
+}
+
+export default Chat

Frontend/src/components/collab/CodeSpace.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Editor } from '@monaco-editor/react'
+import { Container, Stack } from 'react-bootstrap'
+
+const CodeSpace = ({ handleEditorChange, code }) => {
+  return (
+
+    <Stack gap={3} className='h-100'>
+        <Editor
+            height='400px'
+            defaultLanguage='javascript'
+            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>
+        </Container>
+    </Stack>
+    
+  )
+}
+
+export default CodeSpace

Frontend/src/components/collab/CollabNavigationBar.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button, Container, Navbar, Nav } from 'react-bootstrap';
+
+const CollabNavigationBar = ({ handleExit, users }) => {
+  return (
+     <Navbar className='bg-light' sticky='top'>
+        <Container className='d-flex justify-content-between'>
+          {/* Run Code and Exit Buttons in Center */}
+          <Nav className='mx-auto'>
+            <Button>Run Code</Button>
+            <Button variant="danger" className="ms-2" onClick={handleExit}>Exit</Button>
+          </Nav>
+          
+          <Nav>
+            {users.map(user => {
+                return <div
+                className='border rounded p-2 bg-secondary text-center mx-2'
+                style={{ minWidth: '100px'}}>
+                  {user}
+                </div>
+            })}
+          </Nav>
+        </Container>
+     </Navbar>
+  )
+}
+
+export default CollabNavigationBar

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Editor } from '@monaco-editor/react';
 import * as Y from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
-import Button from 'react-bootstrap/Button';
 import { getUserFromToken } from '../user/userAvatarBox';
+import QuestionDisplay from './QuestionDisplay';
+import Chat from './Chat';
+import CollabNavigationBar from './CollabNavigationBar';
+import CodingSpace from './CodeSpace';
+import { Container, Row, Col } from 'react-bootstrap';
 
 const CollaborationSpace = () => {
     const navigate = useNavigate();
@@ -102,23 +105,19 @@ const CollaborationSpace = () => {
     }
 
     return (
-        <div style={{ textAlign: 'center', marginTop: '50px' }}>
-            <h1>Welcome to Collaboration Space</h1>
-            <p>You are in room: {roomId}</p>
-            <h3>Connected Users:</h3>
-            <ul>
-                {users.map(user => {
-                    return <li key={user}>{user}</li>
-                })}
-            </ul>
-            <Editor
-                height="800px"
-                language="javascript" // change this later to get from params too
-                value={code}
-                theme="vs-dark"
-                onChange={handleEditorChange}
-            />
-            <Button variant="danger" onClick={() => handleExit()}>Exit</Button>{' '}
+        <div>
+            <CollabNavigationBar handleExit={handleExit} users={users}/>
+            <Container fluid style={{ marginTop: '20px' }}>
+                <Row>
+                    <Col md={8}>
+                        <CodingSpace handleEditorChange={handleEditorChange} code={code}/>
+                    </Col>
+                    <Col md={4}>
+                        <QuestionDisplay/>
+                        <Chat/>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     );
 };

Frontend/src/components/collab/QuestionDisplay.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Card } from 'react-bootstrap'
+
+const QuestionDisplay = () => {
+  return (
+    <Card>
+        <Card.Header>Question Title</Card.Header>
+        <Card.Body>
+            <p>Question Description Placeholder</p>
+        </Card.Body>
+    </Card>
+  )
+}
+
+export default QuestionDisplay