Resolve CollabSpace conflict

Author: yuxuanleong

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -25,6 +25,7 @@ const CollaborationSpace = () => {
     const [provider, setProvider] = useState(null);
     const [code, setCode] = useState('');
     const [users, setUsers] = useState([]); // track users in the room 
+    const [outputLoading, setOutputLoading] = useState(false)
     const [userId, setUserId] = useState(""); // current user 
     const [language, setLanguage] = useState("python") // set default language to python 
     const [output, setOutput] = useState("")
@@ -46,6 +47,17 @@ 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(() => {
@@ -91,7 +103,6 @@ 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)}`);
             switch (data.type) {
                 case 'usersListUpdate':
                     setUsers(data.users); // Update the user list
@@ -107,6 +118,15 @@ const CollaborationSpace = () => {
                     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`)
                 default:
                     console.log("No messages received from room management server");
                     break;
@@ -151,6 +171,7 @@ const CollaborationSpace = () => {
     };
 
     const handleCodeRun = () => {
+        setOutputLoading(true);
         const code_message = {
             "language": language,
             "files": [
@@ -164,6 +185,7 @@ const CollaborationSpace = () => {
         collabService.getCodeOutput(code_message)
             .then(result => {
                 console.log(result.data.run.output)
+                setOutputLoading(false);
                 setOutput(result.data.run.output)
             })
             .catch(err => console.log(err));
@@ -180,6 +202,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' }}>
@@ -209,11 +236,21 @@ const CollaborationSpace = () => {
             </ToastContainer>
         ) : (
             <>
+                {/* 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>
                 <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language}/>
                 <Container fluid style={{ marginTop: '20px', 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} code={code} language={language} output={output}/>
+                            <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output}/>
                         </Col>
                         <Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
                             <div style={{ flex: '60%', display: 'flex', overflow: 'hidden' }}>