Synchronise Language Change

Author: RingoftheKing

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 };

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' 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>

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -116,6 +116,10 @@ const CollaborationSpace = () => {
                 case 'newMessage':
                     console.log("adding message", 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;
@@ -199,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' }}>
@@ -240,7 +249,8 @@ const CollaborationSpace = () => {
                     </ToastContainer>
 
                     {/* Main component content */}
-                    <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language}/>
+                    <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users}
+                                         setLanguage={setLanguage} language={language} userLangChange={handleLanguageChange}/>
                     <Container fluid style={{ marginTop: '20px' }}>
                         <Row>
                             <Col md={8}>