debugging rooms

Co-authored-by: Nam <[email protected]>
Co-authored-by: HadriChan <[email protected]>
Co-authored-by: r-mcgrath <[email protected]>

Author: 4 people

app/src/components/left/RoomsContainer.tsx

@@ -38,6 +38,7 @@ const RoomsContainer = () => {
       userJoined: store.roomSlice.userJoined
     })
   );
+
   React.useEffect(() => {
     console.log('You Joined Room---:', roomCode);
   }, [roomCode]);
@@ -72,15 +73,22 @@ const RoomsContainer = () => {
       if (currentStore !== event) {
         currentStore = JSON.parse(currentStore);
         event = JSON.parse(event);
-        if (currentStore.appState !== event.appState) {
+        if (
+          JSON.stringify(currentStore.appState) !==
+          JSON.stringify(event.appState)
+        ) {
           console.log('updating app state');
           store.dispatch(allCooperativeState(event.appState));
         } else if (
-          currentStore.codePreviewSlice !== event.codePreviewCooperative
+          JSON.stringify(currentStore.codePreviewSlice) !==
+          JSON.stringify(event.codePreviewCooperative)
         ) {
           console.log('updating code preview');
           store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
-        } else if (currentStore.styleSlice !== event.styleSlice) {
+        } else if (
+          JSON.stringify(currentStore.styleSlice) !==
+          JSON.stringify(event.styleSlice)
+        ) {
           console.log('updating style');
           store.dispatch(cooperativeStyle(event.styleSlice));
         }
@@ -98,23 +106,23 @@ const RoomsContainer = () => {
     const newState = store.getState();
     const roomCode = newState.roomSlice.roomCode;
 
-    if (newState !== previousState) {
+    if (JSON.stringify(newState) !== JSON.stringify(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);
+  }, 100);
 
   store.subscribe(() => {
     if (socket) {
-      console.log('handling store change');
+      //console.log('handling store change');
       handleStoreChange();
     }
   });
 
   function joinRoom() {
-    if (userList.length !== 0) setUserList([]); //edge case check if userList not empty.
+    if (userList.length !== 0) dispatch(setUserList([])); //edge case check if userList not empty.
     handleUserEnteredRoom(roomCode); // Call handleUserEnteredRoom when joining a room
     dispatch(setRoomCode(roomCode));
     dispatch(setUserJoined(true)); //setting joined room to true for rendering leave room button
@@ -131,12 +139,11 @@ const RoomsContainer = () => {
   }
 
   //checking if both text field have any input (not including spaces)
-  function checkInputField(...inputs: any) {
+  function checkInputField(...inputs) {
     let userName: string = inputs[0].trim();
     let roomCode: string = inputs[1].trim();
     return userName.length === 0 || roomCode.length === 0;
   }
-
   return (
     <div>
       <Stack //stack styling for container

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

@@ -17,7 +17,7 @@ export const initialState: State = {
   forked: false,
   published: false,
   isLoggedIn: false,
-  config: { saveFlag: true, saveTimer: false },
+  //config: { saveFlag: true, saveTimer: false },
   components: [
     {
       id: 1,

server/server.ts

@@ -98,16 +98,17 @@ 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');
+    //console.log('back receiving new state');
     if (room) {
       //sending to sender client, only if they are in room
       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 broadcast');
-      client.broadcast.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 broadcast');
+    //   client.broadcast.emit('new state from back', redux_store);
+    // }
   });
 
   // client.on('join-room', (roomCode) => {

webpack.development.js

@@ -18,7 +18,8 @@ module.exports = merge(base, {
     port: '8080',
     hot: true, // Hot-reload this server if changes are detected
     compress: true, // Compress (gzip) files that are served
-    // contentBase: path.resolve(__dirname, 'app/dist'), // Where we serve the local dev server's files from, not valid devserver
+    // contentBase: path.resolve(__dirname, 'app/dist')
+    // Where we serve the local dev server's files from, not valid devserver
     // watchContentBase: true, // Watch the content base for changes , also not valid for dev server
     // watchOptions: {
     //   ignored: /node_modules/,