Merge pull request #46 from CS3219-AY2425S1/collab-space-notif

qiaoen17 · web-flow · commit ea9fc307c8ff · 2024-11-02T22:47:24.000+08:00
Collab Space Patch: Notifications, CodeSpace
diff --git a/Backend/CollabService/utils/roomManager.js b/Backend/CollabService/utils/roomManager.js
@@ -4,6 +4,8 @@ const rooms = {};  // { roomId: [sockets] }
 function manageRoom(ws, roomId, userId, type) {
     console.log(`manageRoom function: ${type} ${userId}`)
 
+    ws.hasLeft = false;
+
     switch (type) {
         case "join":
 
@@ -47,22 +49,12 @@ function manageRoom(ws, roomId, userId, type) {
 
             // notify users of roomId of updated user list to display in frontend
             broadcastUserListUpdate(roomId);
+            // notify users of user joining the room 
+            broadcastUserJoin(roomId, userId);
             break;
 
         case "leave":
-            // remove from room 
-            rooms[roomId].sockets = rooms[roomId].sockets.filter(socket => socket !== ws);
-            rooms[roomId].userIds = rooms[roomId].userIds.filter(user => user !== userId);
-
-            console.log(`User ${userId} left the room ${roomId}`);
-
-            // if no one in room delete room 
-            if (rooms[roomId].sockets.length === 0) {
-                delete rooms[roomId];
-                console.log(`Room ${roomId} is empty and deleted`);
-            } else {
-                broadcastUserListUpdate(roomId);
-            }
+            handleUserLeave(ws, roomId, userId);
             break;
         default:
             console.error(`Unknown room management type: ${type}`);
@@ -71,24 +63,29 @@ function manageRoom(ws, roomId, userId, type) {
 
     // Remove user when they disconnect
     ws.on('close', () => {
+       handleUserLeave(ws, roomId, userId)
+        
+    });
+
+    function handleUserLeave(ws, roomId, userId, leaveType) {
+        if (ws.hasLeft) return;
+        ws.hasLeft = true;
 
         if (rooms[roomId]) {
             rooms[roomId].sockets = rooms[roomId].sockets.filter(client => client !== ws);
-            rooms[roomId].userIds = rooms[roomId].userIds.filter(user => user != userId);
+            rooms[roomId].userIds = rooms[roomId].userIds.filter(user => user !== userId);
 
             console.log(`User ${userId} left room ${roomId}`);
 
             if (rooms[roomId].sockets.length === 0) {
                 delete rooms[roomId];
                 console.log(`Room ${roomId} is empty and deleted`);
             } else {
-                // notify the remaining party about leave 
                 broadcastUserListUpdate(roomId);
+                broadcastUserLeft(roomId, userId);
             }
-
         }
-        
-    });
+    }
 
     function broadcastUserListUpdate(roomId) {
         const userList = rooms[roomId].userIds;
@@ -99,6 +96,24 @@ function manageRoom(ws, roomId, userId, type) {
             }
         })
     }
+
+    function broadcastUserLeft(roomId, userId) {
+
+        rooms[roomId].sockets.forEach((client) => {
+            if (client.readyState == WebSocket.OPEN) {
+                client.send(JSON.stringify({ type: 'userLeft', user: userId}));
+            }
+        })
+    }
+
+    function broadcastUserJoin(roomId, userId) {
+
+        rooms[roomId].sockets.forEach((client) => {
+            if (client.readyState == WebSocket.OPEN) {
+                client.send(JSON.stringify({ type: 'userJoin', user: userId}));
+            }
+        })
+    }
 }
 
 function getRoom(roomId) {
diff --git a/Backend/CollabService/websocket/roomManagerSocket.js b/Backend/CollabService/websocket/roomManagerSocket.js
@@ -31,6 +31,11 @@ function setupWebSocket(server) {
                     console.log('got message ', data.message);
                     broadcastMessage(data.roomId, data.message);
                     break;
+                case 'languageChange':
+                    // send message to all users in room
+                    console.log('got language change ', data.language);
+                    broadcastLanguageChange(data.roomId, data.language, data.user);
+                    break;
                 default:
                     console.error('Unknown message type');
             }
@@ -52,6 +57,17 @@ function setupWebSocket(server) {
         }
     }
 
+    function broadcastLanguageChange(roomId, language, userId) {
+        const room = getRoom(roomId)
+        if (room) {
+            room.sockets.forEach((client) => {
+                if (client.readyState === WebSocket.OPEN) {
+                    client.send(JSON.stringify({ type: 'languageChange', language: language , user: userId}));
+                }
+            })
+        }
+    }
+
 }
 
 module.exports = { setupWebSocket };
diff --git a/Frontend/src/components/collab/CodeSpace.jsx b/Frontend/src/components/collab/CodeSpace.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Editor } from '@monaco-editor/react'
-import { Container, Stack } from 'react-bootstrap'
+import { Container, Stack, Spinner } from 'react-bootstrap'
 
-const CodeSpace = ({ handleEditorChange, code, language, output }) => {
+const CodeSpace = ({ handleEditorChange, loading, code, language, output }) => {
   return (
 
     <Stack gap={3} className='h-100'>
@@ -16,7 +16,14 @@ const CodeSpace = ({ handleEditorChange, code, language, output }) => {
         />
         <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>
+            {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>
+            ): (
+              <p style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{output}</p>
+            )}
         </Container>
     </Stack>
     
diff --git a/Frontend/src/components/collab/CollabNavigationBar.jsx b/Frontend/src/components/collab/CollabNavigationBar.jsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { Button, Container, Navbar, Nav, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'react-bootstrap';
 
-const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, language }) => {
+const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, language, userLangChange }) => {
 
   return (
-     <Navbar className='bg-light' sticky='top'>
+     <Navbar className='bg-light' sticky='top' style={{ zIndex: 1040 }}>
         <Container className='d-flex justify-content-between'>
           
           {/* Language Dropdown on left */}
           <Nav className='me-auto'>
-            <Dropdown onSelect={(eventKey) => setLanguage(eventKey)}>
+            <Dropdown onSelect={(eventKey) => {
+              setLanguage(eventKey);
+              userLangChange(eventKey);
+            }}>
               <DropdownToggle style={{ backgroundColor: 'transparent', border: '1px solid #ccc', borderRadius: '0', color: '#000', padding: '8px 16px'}}>
                 {language}
               </DropdownToggle>
diff --git a/Frontend/src/components/collab/CollaborationSpace.jsx b/Frontend/src/components/collab/CollaborationSpace.jsx
@@ -25,6 +25,7 @@ const CollaborationSpace = () => {
     const [language, setLanguage] = useState("python") // set default language to python 
     const [output, setOutput] = useState("")
     const [messages, setMessages] = useState([])
+    const [outputLoading, setOutputLoading] = useState(false)
 
     // use https://emkc.org/api/v2/piston/runtimes to GET other languages
     const LANGUAGEVERSIONS = {
@@ -33,6 +34,7 @@ const CollaborationSpace = () => {
         "c++": "10.2.0"
     };
 
+    {/* State management for access denied toast */}
     const [showAccessDeniedToast, setShowAccessDeniedToast] = useState(false);
     const [toastMessage, setToastMessage] = useState('');
     const [loading, setLoading] = useState(true);
@@ -42,6 +44,18 @@ const CollaborationSpace = () => {
         navigate("/home");
     };
 
+    {/* State management for user join/leave toast */}
+    const [notifs, setNotifs] = useState([]); 
+
+    const addNotif = (message) => {
+        const id = Date.now(); // unique id based on timestamp
+        setNotifs((prevNotifs) => [...prevNotifs, {id, message}]);
+
+        // Remove notif after 2 seconds
+        setTimeout(() => {
+            setNotifs((prevNotifs) => prevNotifs.filter((notif) => notif.id !== id))
+        }, 1500);
+    };
 
     {/* Set up websockets for room management on client side, and collaboration for Yjs */}
     useEffect(() => {
@@ -87,7 +101,7 @@ const CollaborationSpace = () => {
         // on getting a reply from server
         websocket.onmessage = (event) => {
             const data = JSON.parse(event.data);
-            console.log(`[FRONTEND] data message is ${JSON.stringify(data)}`);
+            // console.log(`[FRONTEND] data message is ${JSON.stringify(data)}`);
             switch (data.type) {
                 case 'usersListUpdate':
                     setUsers(data.users); // Update the user list
@@ -101,7 +115,16 @@ const CollaborationSpace = () => {
                     break;
                 case 'newMessage':
                     console.log("adding message", data.message)
-                    setMessages((prevMessages) => [...prevMessages, data.message]);
+                    break;
+                case 'languageChange':
+                    addNotif(`User ${data.user} has changed the language to ${data.language}`);
+                    setLanguage(data.language);
+                    break;
+                case 'userJoin':
+                    addNotif(`User ${data.user} has joined.`)
+                    break;
+                case 'userLeft':
+                    addNotif(`User ${data.user} has left`)
                     break;
                 default:
                     console.log("No messages received from room management server");
@@ -147,6 +170,9 @@ const CollaborationSpace = () => {
     };
 
     const handleCodeRun = () => {
+
+        setOutputLoading(true);
+
         const code_message = {
             "language": language,
             "files": [
@@ -159,6 +185,7 @@ const CollaborationSpace = () => {
 
         collabService.getCodeOutput(code_message)
             .then(result => {
+                setOutputLoading(false);
                 console.log(result.data.run.output)
                 setOutput(result.data.run.output)
             })
@@ -176,6 +203,11 @@ const CollaborationSpace = () => {
         websocketRef.current.send(JSON.stringify({ type: 'sendMessage', roomId: roomId, message: message}));
     }
 
+    const handleLanguageChange = (value) => {
+        websocketRef.current.send(JSON.stringify({ type: 'languageChange', roomId: roomId,
+            user: userId, language: value }));
+    }
+
     if (loading) {
         return (
             <div style={{ textAlign: 'center' }}>
@@ -205,11 +237,24 @@ const CollaborationSpace = () => {
                 </ToastContainer>
             ) : (
                 <>
-                    <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language}/>
+                    {/* Toast Container for Join/Leave notifications */}
+                    <ToastContainer className='p-3' position='top-center' style={{ zIndex: 1050 }}>
+                        {notifs.map((notif) => (
+                            <Toast key={notif.id} className='mb-2' style={{ backgroundColor: 'rgba(255, 255, 255, 0.8)' }}>
+                                <Toast.Body>
+                                    <strong className='text-black'>{notif.message}</strong>
+                                </Toast.Body>
+                            </Toast>
+                        ))}
+                    </ToastContainer>
+
+                    {/* Main component content */}
+                    <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users}
+                                         setLanguage={setLanguage} language={language} userLangChange={handleLanguageChange}/>
                     <Container fluid style={{ marginTop: '20px' }}>
                         <Row>
                             <Col md={8}>
-                                <CodeSpace handleEditorChange={handleEditorChange} code={code} language={language} output={output}/>
+                                <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output}/>
                             </Col>
                             <Col md={4}>
                                 <QuestionDisplay/>
