feat: refactor room joining logic and implement InRoomWrapper for use…

backend/src/server.ts

@@ -26,10 +26,10 @@ io.on("connection", (socket) => {
   console.log(`🟢 User connected: ${socket.id}`);
 
   // ---------------- Join Room ----------------
-  socket.on("join-room", async (roomId: string, userName: string) => {
-    try {
-      socket.join(roomId);
-      console.log(`👥 ${userName} joined room ${roomId}`);
+  socket.on("join-room", async ({ roomId, userName }: { roomId: string; userName: string }) => {
+  try {
+    socket.join(roomId);
+    console.log(`👥 ${userName} joined room ${roomId}`);
 
       // Notify others
       io.to(roomId).emit("user-joined", { userName, roomId });

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import InRoom from "./pages/InRoom.js";
 import CreateRoomLobby from "./pages/CreateRoomLobby.js";
 import CreateRoom from "./pages/CreateRoom.js";
 import ActiveSessions from "./pages/ActiveSessions.js";
+import InRoomWrapper from "./pages/InRoomWrapper.js";
 const queryClient = new QueryClient();
 
 const App = () => (
@@ -32,7 +33,7 @@ const App = () => (
             <Route path="/oauth-success" element={<OAuthSuccess />} />
             <Route path="/create-room" element={<CreateRoom />} />   {/* ✅ */}
             <Route path="/join-room" element={<JoinRoom />} />       {/* ✅ */}
-            <Route path="/room/:roomName" element={<InRoom />} />
+            <Route path="/room/:roomName" element={<InRoomWrapper />} />
             <Route path="/lobby/:roomId" element={<CreateRoomLobby />} />
             <Route path="/sessions" element={<ActiveSessions />} />
           </Routes>

frontend/src/pages/CreateRoomLobby.tsx

@@ -29,7 +29,7 @@ export default function CreateRoomLobby() {
             }
         };
         fetchRoom();
-    }, [roomId]);
+    }, [roomId,roomName]);
 
     // Copy join link to clipboard
     const handleCopyLink = () => {
@@ -73,7 +73,7 @@ export default function CreateRoomLobby() {
                 </p>
 
                 <Button
-                    onClick={() => navigate(`/room/${roomId}`)}
+                    onClick={() => navigate(`/room/${roomName}`)}
                     className="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 rounded-lg shadow-md"
                 >
                     Go to Room