Merge pull request #52 from CS3219-AY2425S1/Collab-UI

Update Collab Space UI and Update timers

Author: yuxuanleong

Backend/MatchingService/app.js

@@ -1,7 +1,6 @@
 const express = require('express');
 const cors = require("cors");
 const dotenv = require("dotenv");
-const matchmakingRouter = require("./controllers/matchmaking");
 const { consumeQueue, consumeDLQ } = require('./rabbitmq/subscriber');
 const { setupRabbitMQ } = require('./rabbitmq/setup');
 
@@ -13,8 +12,6 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.options("*", cors());
 
-app.use('/api/match', matchmakingRouter);
-
 // TODO: Start consuming RabbitMQ queues 
 
 setupRabbitMQ().then(() => {

Backend/MatchingService/controllers/matchmaking.js

@@ -46,7 +46,7 @@ async function setupRabbitMQ() {
             await channel.assertQueue(queueName, {
                 durable: true, 
                 arguments: {
-                    'x-message-ttl': 10000, // TTL for messages in the queue
+                    'x-message-ttl': 30000, // TTL for messages in the queue
                     'x-dead-letter-exchange': dead_letter_exchange_name // Bind to dead-letter exchange
                 }
             });

Backend/MatchingService/rabbitmq/setup.js

@@ -91,7 +91,7 @@ function matchUsers(channel, msg, userId, difficulty, category) {
                 notifyMatch(channel, matchedUsers, category, difficulty);
                 return true;
             }
-        }, 5000); // 5-second delay
+        }, 15000); // 15-second delay
     }
 
     return false;
@@ -288,7 +288,7 @@ async function consumeQueue() {
                         const timeoutId = setTimeout(async () => {
                             const categorykey = "any." + category
                             await rejectMessage(channel, msg, userData);
-                        }, 10000); // 10 seconds delay
+                        }, 30000); // 30 seconds delay
 
                         timeoutMap[userId] = timeoutId;
                     }

Backend/MatchingService/rabbitmq/subscriber.js

@@ -21,16 +21,18 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
     }, [messages]);
 
     return (
-        <Accordion defaultActiveKey="0" className='mt-3' onSelect={(eventKey) => setIsAccordionOpen(eventKey === "0")}>
+        <Accordion defaultActiveKey="0" className='mt-3' onSelect={(eventKey) => setIsAccordionOpen(eventKey === "0")} style={{ height: '100%' }}>
             <Accordion.Item eventKey="0">
                 <Accordion.Header>
                     Chat
                 </Accordion.Header>
-                <Accordion.Body>
+                <Accordion.Body style={{ display: 'flex', flexDirection: 'column'}}>
                     <div
                         ref={chatContainerRef}
                         style={{
-                            maxHeight: '300px',
+                            minHeight: '33vh',
+                            maxHeight: '33vh',
+                            flex: 1,
                             overflowY: 'auto',
                             marginBottom: '1rem',
                         }}
@@ -68,19 +70,20 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
                         </ListGroup>
                     </div>
                     {isAccordionOpen && ( // Only show message input when accordion is open
-                        <Form onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
-                            <Form.Group controlId="messageInput">
+                        <Form onSubmit={(e) => { e.preventDefault(); handleSend(); }} style={{ display: 'flex', alignItems: 'center' }}>
+                            <Form.Group controlId="messageInput" style={{ flex: 1, marginRight: '10px' }}> {/* Makes input take available space */}
                                 <Form.Control
                                     type="text"
                                     placeholder="Type a message..."
                                     value={text}
                                     onChange={(e) => setText(e.target.value)}
                                 />
                             </Form.Group>
-                            <Button variant="primary" type="submit" className="mt-2">
+                            <Button variant="primary" type="submit">
                                 Send
                             </Button>
                         </Form>
+                    
                     )}
                 </Accordion.Body>
             </Accordion.Item>

Frontend/src/components/collab/Chat.jsx

@@ -5,29 +5,58 @@ import { Container, Stack, Spinner } from 'react-bootstrap'
 const CodeSpace = ({ handleEditorChange, loading, code, language, output, isError }) => {
   return (
 
-    <Stack gap={3} className='h-100'>
+<Stack gap={3} className='h-100' style={{ height: '100vh' }}>
+    {/* Editor Section (60% of viewport) */}
+    <div style={{ borderRadius: '0.5rem', overflow: 'hidden', height: '60vh' }}>
         <Editor
-            height='400px'
+            height="100%"  // Make the editor fill the container
             defaultLanguage="python"
             language={language}
             value={code}
             onChange={handleEditorChange}
-            theme='vs-dark'
+            theme="vs-dark"
+            options={{
+              fontSize: 14  // Set font size here, adjust as needed
+          }}
         />
-        <Container style={{ height: '225px', border: '1px solid #ccc', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#f8f9fa', padding: '20px'}}>
-            <h4>Output</h4>
-            {loading ? (
-              <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
+    </div>
+
+    {/* Output Section (40% of viewport) */}
+    <Container
+        style={{
+            height: '30vh', // Occupies 40% of viewport height
+            border: '1px solid #ccc',
+            borderRadius: '0.5rem',
+            padding: '1rem',
+            backgroundColor: '#f8f9fa',
+        }}
+    >
+        <p>Output</p>
+        {loading ? (
+            <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
                 <Spinner animation="border" variant="primary" />
                 <span className="ms-1">Running...</span>
-              </div>
-            ): (
-              <div style={{ height: '150px', maxHeight: '150px', overflowY: 'auto', fontFamily: 'monospace', whiteSpace: 'pre-wrap', border: '1px solid rgba(0, 0, 0, 0.2)', borderRadius: '0.5rem'}}>
+            </div>
+        ) : (
+            <div
+                style={{
+                    height: '90%',
+                    overflowY: 'auto',
+                    fontFamily: 'monospace',
+                    whiteSpace: 'pre-wrap',
+                    border: '1px solid rgba(0, 0, 0, 0.2)',
+                    borderRadius: '0.5rem',
+                    paddingLeft: '5px',
+                    paddingLeft: '10px',
+                    fontSize: '16'
+                }}
+            >
                 <p style={{ color: isError ? 'red' : '#212529' }}>{output}</p>
-              </div>
-            )}
-        </Container>
-    </Stack>
+            </div>
+        )}
+    </Container>
+</Stack>
+    
 
   )
 }

Frontend/src/components/collab/CodeSpace.jsx

@@ -26,7 +26,12 @@ const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, la
 
           {/* Run Code and Exit Buttons in Center */}
           <Nav className='mx-auto'>
-            <Button onClick={handleCodeRun}>Run Code</Button>
+            <Button 
+                onClick={handleCodeRun} 
+                style={{ backgroundColor: '#28a745', color: '#fff', border: 'none' }}
+            >
+                Run Code
+            </Button>
             <Button variant="danger" className="ms-2" onClick={handleExit}>Exit</Button>
           </Nav>
 

Frontend/src/components/collab/CollabNavigationBar.jsx

@@ -284,9 +284,9 @@ const CollaborationSpace = () => {
 
     return (
 
-    <div style={{ textAlign: 'center', height: '100vh', overflow: 'hidden' }}>
+    <div style={{ height: '100vh', overflow: 'hidden' }}>
         {showAccessDeniedToast ? (
-            <ToastContainer className="p-3" position="top-center" style={{ zIndex: 1 }}>
+            <ToastContainer className="p-3" position="top-center" style={{ zIndex: 1, textAlign: 'center' }}>
                 <Toast
                     onClose={handleCloseToast}
                     show={showAccessDeniedToast}
@@ -311,19 +311,22 @@ const CollaborationSpace = () => {
                         </Toast>
                     ))}
                 </ToastContainer>
-                <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language}/>
-                <Container fluid style={{ marginTop: '20px', height: 'calc(100vh - 60px)', display: 'flex', overflow: 'hidden' }}>
+                <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language} userLangChange={handleLanguageChange}/>
+                <Container fluid style={{ marginTop: '10px', height: 'calc(100vh - 60px)', display: 'flex', overflow: 'hidden' }}>
                     <Row style={{ flexGrow: 1, width: '100%', height: '100%', overflow: 'hidden' }}>
-                        <Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
-                            <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output}/>
+                        <Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden', marginTop: '5px'}}>
+                            <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output} isError={isError}/>
                         </Col>
                         <Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
-                            <div style={{ flex: '60%', display: 'flex', overflow: 'hidden' }}>
-                                <QuestionDisplay question={question}/>
+                            <div style={{ flex: 2, display: 'flex', overflow: 'hidden', width:'100%', minHeight:'0vh', marginTop:'5px'}}>
+                                <QuestionDisplay question={question} style={{width:'100%'}}/>
                             </div>
-                            <div style={{ flex: '40%', overflow: 'hidden' }}>
-                                <Chat currentUser={username} messages={messages} sendMessage={sendMessage}/>
+
+                            <div style={{ flex: 2, height:'100%', marginBottom: '38px', maxHeight:'50vh'}}>
+                                <Chat currentUser={userId} messages={messages} sendMessage={sendMessage}/>
+
                             </div>
+      
                         </Col>
                     </Row>
                 </Container>

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Card } from 'react-bootstrap';
+import { Card, Col} from 'react-bootstrap';
 import { getQuestionsByCategory } from '../../services/questions';
 
 const QuestionDisplay = ({ question }) => {
@@ -12,13 +12,14 @@ const QuestionDisplay = ({ question }) => {
     }
 
     return (
-        <Card>
-            <Card.Header>{question ? `${question.title} (${question.complexity})` : "Loading..."}</Card.Header>
-            <Card.Body style={{textAlign: 'left'}}>
-                <p>{question ? question.category.join(", ") : "Loading question description..."}</p>
-                <p>{question ? question.description : "Loading question description..."}</p>
-            </Card.Body>
-        </Card>
+            <Card style={{ width: '100%' }}>
+                <Card.Header>{question ? <strong>{question.title} ({question.complexity})</strong> : "Loading..."}</Card.Header>
+                <Card.Body style={{ textAlign: 'left' }}>
+                    <p>{question ? "Category: " + question.category.join(", ") : "Loading question description..."}</p>
+                    <p> Description:</p>
+                    <p>{question ? question.description : "Loading question description..."}</p>
+                </Card.Body>
+            </Card>
     );
 };
 

Frontend/src/components/collab/QuestionDisplay.jsx

@@ -25,18 +25,20 @@ const capitalizeFirstLetter = (difficulty) => {
 
 const CriteriaDisplay = ({ difficulty, category }) => {
     return (
-            <Card className="mt-3" style={{ width: '20rem' }}>
-                <Card.Body>
-                    <Card.Title>Selected Criteria</Card.Title>
-                    <Card.Text>
-                        <span>
-                            Difficulty: <Badge bg={getBadgeVariant(difficulty ? difficulty : "Not Selected" )}>{capitalizeFirstLetter(difficulty ? difficulty : "Not Selected")}</Badge>
-                            <br></br>
-                            Category: <strong>{capitalizeFirstLetter(category ? category : "Not Selected")}</strong>
-                        </span>
-                    </Card.Text>
-                </Card.Body>
-            </Card>
+        <Card className="mt-3 mx-auto" style={{ maxWidth: '100%', width: '90%', minWidth: '200px' }}>
+        <Card.Body>
+            <Card.Title>Selected Criteria</Card.Title>
+            <Card.Text>
+                <span>
+                    Difficulty: <Badge bg={getBadgeVariant(difficulty ? difficulty : "Not Selected")}>
+                        {capitalizeFirstLetter(difficulty ? difficulty : "Not Selected")}
+                    </Badge>
+                    <br />
+                    Category: <strong>{capitalizeFirstLetter(category ? category : "Not Selected")}</strong>
+                </span>
+            </Card.Text>
+        </Card.Body>
+    </Card>
         )
 };