wait for server to emit state from host b4 joining

Author: sonyahu15

app/src/components/left/RoomsContainer.tsx

@@ -57,7 +57,7 @@ const RoomsContainer = () => {
   //   console.log('userList[0]-------', userList[0]);
   // }, [userList]);
 
-  function initSocketConnection(roomCode) {
+  function initSocketConnection(roomCode: string) {
     if (socket) socket.disconnect(); //edge case check if socket connection existed
 
     socket = io(API_BASE_URL, {
@@ -69,6 +69,11 @@ const RoomsContainer = () => {
       console.log(`Your Nickname Is: ${userName}`);
       //passing current client nickname and room code to server
       socket.emit('joining', userName, roomCode);
+      socket.on('back emitting state from host', (state) => {
+        store.dispatch(allCooperativeState(state.appState));
+        store.dispatch(codePreviewCooperative(state.codePreviewCooperative));
+        store.dispatch(cooperativeStyle(state.styleSlice));
+      });
     });
 
     //listening to back end for updating user list

server/server.ts

@@ -105,22 +105,24 @@ io.on('connection', (client) => {
   });
 
   //when user Joined a room
-  client.on('joining', (userName, roomCode) => {
-    client.join(roomCode); //client joining a room
+  client.on('joining', (userName: string, roomCode: string) => {
     //if room exists, get state from host
     if (roomLists[roomCode]) {
       let hostID = Object.keys(roomLists[roomCode])[0];
       console.log('back requesting state from host');
       console.log('host username:', roomLists[roomCode][hostID]);
       io.to(roomLists[roomCode][hostID]).emit('requesting state from host');
       client.on('state from host', (state) => {
-        io.to(client.id).emit('new state from back', state);
+        io.to(client.id).emit('back emitting state from host', state);
       });
       //if no room exist, create new room in server
     } else if (!roomLists[roomCode]) {
       roomLists[roomCode] = {};
     }
     roomLists[roomCode][client.id] = userName; // add user into the room with id: userName
+
+    client.join(roomCode); //client joining a room
+
     console.log('back emitting new user list');
     io.to(roomCode).emit('updateUserList', roomLists[roomCode]); //send the message to all clients in room