Merge branch 'dev' into sonya-exploring

Author: sonyahu15

app/src/components/left/RoomsContainer.tsx

@@ -49,24 +49,19 @@ const RoomsContainer = () => {
       socket.emit('join-room', roomCode); // Join the room when connected
       //passing current client nickname to server
       console.log(`Your Nickname Is: ${userName}`);
-      socket.emit('user', userName);
+      socket.emit('userJoined', userName);
     });
-
-    // // Receiving the room state from the backend
-    // socket.on('room-state-update', (stateFromServer) => {
-    //   const newState = JSON.parse(stateFromServer);
-    //   // Dispatch actions to update your Redux store with the received state
-    //   store.dispatch(allCooperativeState(newState.appState));
-    //   store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
-    //   store.dispatch(cooperativeStyle(newState.styleSlice));
-    // });
+      
 
     // receiving the message from the back end
     socket.on('receive message', (event) => {
       let currentStore: any = JSON.stringify(store.getState());
+      console.log('event ', event);
       if (currentStore !== event) {
         currentStore = JSON.parse(currentStore);
         event = JSON.parse(event);
+        console.log('current store', currentStore);
+        console.log('event ', event);
         if (currentStore.appState !== event.appState) {
           store.dispatch(allCooperativeState(event.appState));
         } else if (
@@ -104,6 +99,7 @@ const RoomsContainer = () => {
       );
       previousState = newState;
     }
+  
   }, 100);
 
   store.subscribe(() => {

app/src/redux/reducers/slice/roomSlice.ts

@@ -4,7 +4,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   roomCode: '',
   userName: '',
-  userList: new Map(),
+  userList: [],
   userJoined: false
 };
 

server/server.ts

@@ -95,34 +95,35 @@ const io = new Server(httpServer, {
   }
 });
 //creating map for user list
-const userList = new Map();
+const userList = {};
 io.on('connection', (socket) => {
-
   console.log('Socket ID: -----', socket.id);
   socket.on('custom-event', (redux_store, room) => {
     if (room) {
       //sending to sender client, only if they are in room
+      console.log('emiting to room receive message event to front end');
       socket.to(room).emit('receive message', redux_store);
     } else {
       //send to all connected clients except the one that sent the message
+      console.log('emiting broadcast receive message event to front end');
       socket.broadcast.emit('receive message', redux_store);
     }
   });
   socket.on('room-code', (roomCode) => {
     //working
     socket.join(roomCode);
   });
-  socket.on('user', (userName) => {
+  socket.on('userJoined', (userName) => {
     //working
-    userList.set(socket.id, userName);
-    io.emit('updateUserList', userList);
+    userList[socket.id] = userName;
+    io.emit('updateUserList', userList); //work on this
   });
   socket.on('disconnect', () => {
-    const userName = userList.get(socket.id);
+    const userName = userList[socket.id];
     console.log('User list before remove user', userList);
-    userList.delete(socket.id); //remove the user from the obj
+    delete userList[socket.id]; //remove the user from the obj
     console.log('User list after remove user', userList);
-    io.emit('disconnected', userName);
+    io.emit('updateUserList', userList); //check this
   });
 });