bug fix that messages missing when leave the tab

Author: Eliza612

app/src/components/bottom/chatRoom.tsx

@@ -1,19 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
 import { emitEvent } from '../../helperFunctions/socket';
 
 const Chatroom = (props): JSX.Element => {
-  const nickName = useSelector((store: RootState) => store.roomSlice.userName);
+  const userName = useSelector((store: RootState) => store.roomSlice.userName);
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
-  const newMessage = useSelector(
-    (store: RootState) => store.roomSlice.newMessage
-  );
-
-  const userChange = useSelector(
-    (store: RootState) => store.roomSlice.userChange
-  );
+  const messages = useSelector((store: RootState) => store.roomSlice.messages);
 
   const wrapperStyles = {
     border: `2px solid #f2fbf8`,
@@ -60,44 +54,39 @@ const Chatroom = (props): JSX.Element => {
     ) as HTMLInputElement;
     const message = messageInput.value.trim();
     if (message !== '') {
-      emitEvent('send-chat-message', roomCode, { message, nickName });
+      emitEvent('send-chat-message', roomCode, { userName, message });
       messageInput.value = '';
     }
   };
 
-  const handleMessageStyle = (messageNickName: string) => {
-    return {
-      color: messageNickName === nickName ? '#66C4EB' : 'white'
-    };
-  };
-
-  useEffect(() => {
-    if (newMessage.nickName !== '' && newMessage.message !== '') {
-      const messageContainer = document.getElementById('message-container');
-      const messageElement = document.createElement('div');
-      messageElement.innerText =
-        nickName === newMessage.nickName
-          ? `You: ${newMessage.message}`
-          : `${newMessage.nickName}: ${newMessage.message}`;
-      messageElement.style.color = handleMessageStyle(
-        newMessage.nickName
-      ).color;
-      messageContainer.append(messageElement);
+  const handleMessageContainerStyle = (message: object) => {
+    if (message['type'] === 'activity') {
+      return { color: 'yellow' };
+    } else {
+      if (message['userName'] === userName) return { color: '#66C4EB' };
+      return { color: 'white' };
     }
-  }, [newMessage]);
+  };
 
-  useEffect(() => {
-    if (userChange.nickName !== '' && userChange.status !== '') {
-      const messageContainer = document.getElementById('message-container');
-      const messageElement = document.createElement('div');
-      messageElement.innerText =
-        userChange.status === 'JOIN'
-          ? `${userChange.nickName} joined the chat room`
-          : `${userChange.nickName} left the chat room`;
-      messageElement.style.color = 'yellow';
-      messageContainer.append(messageElement);
-    }
-  }, [userChange]);
+  const renderMessages = () => {
+    return messages.map((message, index) => {
+      if (message.type === 'activity') {
+        return (
+          <div key={index} style={handleMessageContainerStyle(message)}>
+            {message.message}
+          </div>
+        );
+      } else if (message.type === 'chat') {
+        return (
+          <div key={index} style={handleMessageContainerStyle(message)}>
+            {message.userName === userName ? 'You' : message.userName}:{' '}
+            {message.message}
+          </div>
+        );
+      }
+      return null;
+    });
+  };
 
   return (
     <div
@@ -106,10 +95,12 @@ const Chatroom = (props): JSX.Element => {
     >
       <div className="roomInfo" style={{ paddingLeft: '70px' }}>
         <p>Current room: {roomCode}</p>
-        <p>Your nickname: {nickName}</p>
+        <p>Your nickname: {userName}</p>
       </div>
       <div style={{ justifyContent: 'center', display: 'flex', height: '80%' }}>
-        <div id="message-container" style={wrapperStyles}></div>
+        <div id="message-container" style={wrapperStyles}>
+          {renderMessages()}
+        </div>
       </div>
       <form
         id="send-container"

app/src/components/left/RoomsContainer.tsx

@@ -41,8 +41,7 @@ import {
   setUserName,
   setUserJoined,
   setUserList,
-  setNewMessage,
-  setUserChange
+  setMessages
 } from '../../redux/reducers/slice/roomSlice';
 import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
 import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
@@ -71,13 +70,7 @@ const RoomsContainer = () => {
   const userJoined = useSelector(
     (store: RootState) => store.roomSlice.userJoined
   );
-  const newMessage = useSelector(
-    (store: RootState) => store.roomSlice.newMessage
-  );
-
-  const userChange = useSelector(
-    (store: RootState) => store.roomSlice.userChange
-  );
+  const messages = useSelector((store: RootState) => store.roomSlice.messages);
 
   // for websockets - initialize socket connection passing in roomCode
   function initSocketConnection(roomCode: string) {
@@ -113,16 +106,14 @@ const RoomsContainer = () => {
       socket.on('updateUserList', (messageData) => {
         //console.log('user list received from server');
         dispatch(setUserList(messageData.userList));
-        if (
-          JSON.stringify(messageData.activity) !== JSON.stringify(userChange)
-        ) {
-          dispatch(setUserChange(messageData.activity));
-        }
       });
 
       socket.on('new chat message', (messageData) => {
-        if (JSON.stringify(messageData) !== JSON.stringify(newMessage)) {
-          dispatch(setNewMessage(messageData));
+        if (
+          messages.length === 0 ||
+          JSON.stringify(messageData) !== JSON.stringify(messages[-1])
+        ) {
+          dispatch(setMessages(messageData));
         }
       });
 

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

@@ -6,8 +6,7 @@ const initialState = {
   userName: '',
   userList: [],
   userJoined: false,
-  newMessage: { nickName: '', message: '' },
-  userChange: { nickName: '', status: '' }
+  messages: []
 };
 
 // Creates new slice with the name , initial state, and reducer function
@@ -27,11 +26,8 @@ const roomSlice = createSlice({
     setUserJoined: (state, action) => {
       state.userJoined = action.payload;
     },
-    setNewMessage: (state, action) => {
-      state.newMessage = action.payload;
-    },
-    setUserChange: (state, action) => {
-      state.userChange = action.payload;
+    setMessages: (state, action) => {
+      state.messages = [...state.messages, action.payload];
     }
   }
 });
@@ -42,8 +38,7 @@ export const {
   setUserName,
   setUserList,
   setUserJoined,
-  setNewMessage,
-  setUserChange
+  setMessages
 } = roomSlice.actions;
 // Exports so we can combine in rootReducer
 export default roomSlice.reducer;

server/server.ts

@@ -137,6 +137,11 @@ io.on('connection', (client) => {
             activity: { nickName: userName, status: 'JOIN' }
           } // send updated userList to all users in room
         );
+        io.to(roomCode).emit('new chat message', {
+          userName,
+          message: `${userName} joined chat room`,
+          type: 'activity'
+        });
       }
     } catch (error) {
       //if joining event is having an error and time out
@@ -156,24 +161,31 @@ io.on('connection', (client) => {
   //disconnecting functionality
   client.on('disconnecting', () => {
     const roomCode = Array.from(client.rooms)[1]; //grabbing current room client was in when disconnecting
-    const nickName = roomLists[roomCode][client.id];
+    const userName = roomLists[roomCode][client.id];
     delete roomLists[roomCode][client.id];
     //if room empty, delete room from room list
     if (!Object.keys(roomLists[roomCode]).length) {
       delete roomLists[roomCode];
     } else {
       //else emit updated user list
       io.to(roomCode).emit('updateUserList', {
-        userList: Object.values(roomLists[roomCode]),
-        activity: { nickName, status: 'LEAVE' }
+        userList: Object.values(roomLists[roomCode])
+      });
+      io.to(roomCode).emit('new chat message', {
+        userName,
+        message: `${userName} left chat room`,
+        type: 'activity'
       });
     }
   });
 
   //-------Socket events for state synchronization in collab room------------------
   client.on('send-chat-message', (roomCode: string, messageData: object) => {
     if (roomCode) {
-      io.to(roomCode).emit('new chat message', messageData);
+      io.to(roomCode).emit('new chat message', {
+        ...messageData,
+        type: 'chat'
+      });
     }
   });
   client.on('addChildAction', (roomCode: string, childData: object) => {