infinite loop

Author: sonyahu15

app/src/components/left/RoomsContainer.tsx

@@ -39,7 +39,7 @@ const RoomsContainer = () => {
     })
   );
   React.useEffect(() => {
-    console.log('You Joined Room---front end:', roomCode);
+    console.log('You Joined Room---:', roomCode);
   }, [roomCode]);
 
   function initSocketConnection(roomCode) {
@@ -51,18 +51,16 @@ const RoomsContainer = () => {
 
     socket.on('connect', () => {
       console.log(`You Connected With Id: ${socket.id}`);
-      // ????
-      //socket.emit('join-room', roomCode); // Join the room when connected
       console.log(`Your Nickname Is: ${userName}`);
-      //passing current client nickname to server
-      // ???
+      //passing current client nickname and room code to server
       socket.emit('joining', userName, roomCode);
-      //listening to back end for updating user list
     });
 
+    //listening to back end for updating user list
     socket.on('updateUserList', (newUserList) => {
       console.log('received user list from back:', newUserList);
       dispatch(setUserList(Object.values(newUserList)));
+      console.log('object values new user list', Object.values(newUserList));
       console.log('client user list updated:', userList);
     });
 
@@ -96,22 +94,22 @@ const RoomsContainer = () => {
 
   let previousState = store.getState();
   // sending info to backend whenever the redux store changes
-  // const handleStoreChange = debounce(() => {
-  //   const newState = store.getState();
-  //   const roomCode = newState.roomSlice.roomCode;
+  const handleStoreChange = debounce(() => {
+    const newState = store.getState();
+    const roomCode = newState.roomSlice.roomCode;
 
-  //   if (newState !== previousState) {
-  //     // Send the current state to the server
-  //     console.log('front emitting new state')
-  //     socket.emit('new state from front', JSON.stringify(newState), roomCode);
-  //     previousState = newState;
-  //   }
-  // }, 100);
+    if (newState !== previousState) {
+      // Send the current state to the server
+      console.log('front emitting new state');
+      socket.emit('new state from front', JSON.stringify(newState), roomCode);
+      previousState = newState;
+    }
+  }, 10000);
 
   store.subscribe(() => {
     if (socket) {
       console.log('handling store change');
-      //handleStoreChange();
+      handleStoreChange();
     }
   });
 

server/server.ts

@@ -98,13 +98,14 @@ const io = new Server(httpServer, {
 const roomLists = {}; //key: roomCode, value: Obj{ socketid: username }
 io.on('connection', (client) => {
   client.on('new state from front', (redux_store, room) => {
+    console.log('back receiving new state');
     if (room) {
       //sending to sender client, only if they are in room
-      console.log('back emitting new state');
+      console.log('back emitting new state to room');
       client.to(room).emit('new state from back', redux_store);
     } else {
       //send to all connected clients except the one that sent the message
-      console.log('back emitting new state');
+      console.log('back emitting new state broadcast');
       client.broadcast.emit('new state from back', redux_store);
     }
   });