fixes #16: meeting title sync

apps/server/Actions.js

@@ -10,6 +10,7 @@ const ACTIONS = {
   DRAW: "draw",
   RUN_CODE: "run_code",
   OUTPUT: "output",
+  TITLE_CHANGE: "title_change",
 };
 
 module.exports = ACTIONS;

apps/server/index.js

@@ -53,7 +53,7 @@ function getAllConnectedClients(roomId) {
         socketId,
         userName: userSocketMap[socketId],
       };
-    },
+    }
   );
 }
 
@@ -107,6 +107,13 @@ io.on("connection", (socket) => {
   socket.on(ACTIONS.CODE_CHANGE, ({ roomId, code }) => {
     socket.in(roomId).emit(ACTIONS.CODE_CHANGE, { code });
   });
+
+  socket.on(ACTIONS.TITLE_CHANGE, ({ roomId, title }) => {
+    // Broadcast the title change to all clients in the room, except the sender
+    socket.broadcast.to(roomId).emit(ACTIONS.TITLE_CHANGE, { title });
+    socket.in(roomId).emit(ACTIONS.TITLE_CHANGE, { title });
+  });
+
   socket.on("disconnecting", () => {
     const rooms = [...socket.rooms];
     rooms.forEach((roomId) => {

apps/web/src/Actions.js

@@ -10,6 +10,7 @@ const ACTIONS = {
   DRAW: "draw",
   RUN_CODE: "run_code",
   OUTPUT: "output",
+  TITLE_CHANGE: "title_change",
 };
 
 module.exports = ACTIONS;

apps/web/src/components/MeetingTitle/MeetingTitle.jsx

@@ -1,9 +1,28 @@
 import React, { useEffect, useState } from "react";
 import meetingpng from "../../pages/Assets/images/meeting-logo.png";
+import ACTIONS from "../../Actions";
 const date = new Date();
 
-const MeetingTitle = () => {
+const MeetingTitle = ({ socket, roomId }) => {
   const [currentTime, setCurrentTime] = useState(new Date());
+  const [title, setTitle] = useState("Interview(Technical Round)");
+
+  useEffect(() => {
+    if (socket) {
+      // Listen for title updates from the server
+      socket.on(ACTIONS.TITLE_CHANGE, ({ title }) => {
+        setTitle(title); // Update the title with the new value
+      });
+    }
+  }, [socket, roomId]);
+
+  const handleTitleChange = (e) => {
+    const newTitle = e.target.textContent;
+    setTitle(newTitle);
+    if (socket && roomId) {
+      socket.emit(ACTIONS.TITLE_CHANGE, { roomId, title: newTitle });
+    }
+  };
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -25,9 +44,11 @@ const MeetingTitle = () => {
       <div class="absolute w-0.5 h-[3vw] ml-[5.7vw] bg-lightergrey"></div>
       <h1
         contenteditable="true"
+        suppressContentEditableWarning={true}
+        onBlur={handleTitleChange}
         className="absolute ml-[6.7vw] text-darkGrey top-[0.9vw] font-Inter text-[1.2vw] font-medium"
       >
-        Interview(Technical Round)
+        {title}
       </h1>
       <h2 className="absolute py-1 text-gray-500 font-Inter text-[1.1vw] top-[2.7vw] text-DTgrey ml-[6.5vw] font-medium">
         {" "}

apps/web/src/pages/RoomPage/Room.jsx

@@ -23,14 +23,14 @@ const options = {
   "force new connection": true,
   reconnectionAttempt: "Infinity",
   timeout: 10000,
-  transports: ["websocket", 'polling'],
+  transports: ["websocket", "polling"],
   cors: {
-    origin: '*',  // Allow all origins
-    methods: ['GET', 'POST'],
+    origin: "*", // Allow all origins
+    methods: ["GET", "POST"],
     credentials: true,
   },
 };
-const server = 'localhost:4000';
+const server = "localhost:4000";
 const socket = io(server, options);
 
 const Room = () => {
@@ -102,7 +102,7 @@ const Room = () => {
         transition={{ duration: 1, type: "ease-in" }} // Change the transition type to "ease-in"
       >
         <Nav />
-        <MeetingTitle />
+        <MeetingTitle socket={socket} roomId={roomId} />
       </motion.div>
       <motion.div
         initial={{ y: 1000 }}