work-on-userlist

Author: namos2502

app/src/components/left/RoomsContainer.tsx

@@ -23,16 +23,16 @@ const { API_BASE_URL } = config;
 const RoomsContainer = () => {
   const [roomCode, setRoomCode] = useState('');
   const [userName, setUserName] = useState('');
-  const [userList, setUserList] = useState(new Map());
-  // const [confirmRoom, setConfirmRoom] = useState('');
   const [userJoined, setUserJoined] = useState(false); //setting up state for joinning a room
-  const [emptyInput, setEmptyInput] = useState(false);
 
   const dispatch = useDispatch();
-  const { state, joinedRoom } = useSelector((store: RootState) => ({
-    state: store.appState,
-    joinedRoom: store.roomCodeSlice.roomCode
-  }));
+  const { state, joinedRoom } = useSelector (
+    (store: RootState) => ({
+      state: store.appState,
+      joinedRoom: store.roomCodeSlice.roomCode,
+    })
+  );
+
   React.useEffect(() => {
     console.log('You Joined Room: ', joinedRoom);
   }, [joinedRoom]);
@@ -52,24 +52,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 (
@@ -110,6 +105,7 @@ const RoomsContainer = () => {
       );
       previousState = newState;
     }
+  
   }, 100);
 
   store.subscribe(() => {

app/src/redux/reducers/rootReducer.ts

@@ -13,7 +13,7 @@ const rootReducer = combineReducers({
   contextSlice: contextReducer,
   appState: appStateReducer,
   styleSlice: styleReducer,
-  roomCodeSlice: roomCodeReducer
+  roomCodeSlice: roomCodeReducer,
 });
 
 export default rootReducer;

server/server.ts

@@ -87,7 +87,6 @@ app.use('/auth', authRoutes);
 import { createServer } from 'http';
 import { Server } from 'socket.io';
 
-
 const httpServer = createServer(app);
 const io = new Server(httpServer, {
   transports: ['websocket'],
@@ -103,27 +102,29 @@ io.on('connection', (socket) => {
     console.log(string);
     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);
+    io.emit('updateUserList', userList); //work on this
   });
   socket.on('disconnect', () => {
     const userName = userList.get(socket.id);
     console.log('User list before remove user', userList);
     userList.delete(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
   });
 });