clean up chatroom function

Author: Eliza612

app/src/components/bottom/chatRoom.tsx

@@ -10,6 +10,10 @@ const Chatroom = (props): JSX.Element => {
     (store: RootState) => store.roomSlice.newMessage
   );
 
+  const userChange = useSelector(
+    (store: RootState) => store.roomSlice.userChange
+  );
+
   const nickName = collaborationRoom.userName;
   const roomCode = collaborationRoom.roomCode;
 
@@ -84,6 +88,17 @@ const Chatroom = (props): JSX.Element => {
     }
   }, [newMessage]);
 
+  useEffect(() => {
+    const messageContainer = document.getElementById('message-container');
+    const messageElement = document.createElement('div');
+    messageElement.innerText =
+      userChange.status === 'JOIN'
+        ? `${userChange.nickName} joined the chatroom`
+        : `${userChange.nickName} left the chatroom`;
+    messageElement.style.color = 'yellow';
+    messageContainer.append(messageElement);
+  }, [userChange]);
+
   return (
     <div
       className="livechat-panel"

app/src/components/left/RoomsContainer.tsx

@@ -41,7 +41,8 @@ import {
   setUserName,
   setUserJoined,
   setUserList,
-  setNewMessage
+  setNewMessage,
+  setUserChange
 } from '../../redux/reducers/slice/roomSlice';
 import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
 import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
@@ -74,6 +75,10 @@ const RoomsContainer = () => {
     (store: RootState) => store.roomSlice.newMessage
   );
 
+  const userChange = useSelector(
+    (store: RootState) => store.roomSlice.userChange
+  );
+
   // for websockets - initialize socket connection passing in roomCode
   function initSocketConnection(roomCode: string) {
     // helper function to create socket connection
@@ -105,9 +110,14 @@ const RoomsContainer = () => {
       });
 
       // update user list when there's a change: new join or leave the room
-      socket.on('updateUserList', (newUserList) => {
+      socket.on('updateUserList', (messageData) => {
         //console.log('user list received from server');
-        dispatch(setUserList(newUserList));
+        dispatch(setUserList(messageData.userList));
+        if (
+          JSON.stringify(messageData.activity) !== JSON.stringify(userChange)
+        ) {
+          dispatch(setUserChange(messageData.activity));
+        }
       });
 
       socket.on('new chat message', (messageData) => {

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

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

server/server.ts

@@ -132,7 +132,10 @@ io.on('connection', (client) => {
         //send the message to all clients in room but the sender
         io.to(roomCode).emit(
           'updateUserList',
-          Object.values(roomLists[roomCode]) // send updated userList to all users in room
+          {
+            userList: Object.values(roomLists[roomCode]),
+            activity: { nickName: userName, status: 'JOIN' }
+          } // send updated userList to all users in room
         );
       }
     } catch (error) {
@@ -153,16 +156,17 @@ 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];
     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',
-        Object.values(roomLists[roomCode])
-      );
+      io.to(roomCode).emit('updateUserList', {
+        userList: Object.values(roomLists[roomCode]),
+        activity: { nickName, status: 'LEAVE' }
+      });
     }
   });