Update with chatroom

Author: Eliza612

app/src/components/bottom/chatRoom.tsx

@@ -1,41 +1,33 @@
-import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
-import Box from '@mui/material/Box';
-import {
-  initializeSocket,
-  getSocket,
-  emitEvent,
-  disconnectSocket
-} from '../../helperFunctions/socket';
+import { emitEvent } from '../../helperFunctions/socket';
 
 const Chatroom = (props): JSX.Element => {
   const collaborationRoom = useSelector((store: RootState) => store.roomSlice);
-  //   const newMessage = useSelector(
-  //     (store: RootState) => store.roomSlice.newMessage
-  //   );
-  const socket = getSocket();
+
+  const newMessage = useSelector(
+    (store: RootState) => store.roomSlice.newMessage
+  );
 
   const nickName = collaborationRoom.userName;
   const roomCode = collaborationRoom.roomCode;
-  //   const newMessage = collaborationRoom.newMessage;
 
   const wrapperStyles = {
     border: `2px solid #f2fbf8`,
     borderRadius: '8px',
     width: '70%',
-    height: '90%',
+    height: '100%',
     display: 'column',
     padding: '20px',
-    // justifyContent: 'center',
     backgroundColor: '#42464C',
     overflow: 'auto'
-    // scrollTop: 'scrollHeight'
   };
 
   const inputContainerStyles = {
     width: '100%',
-    padding: '10px',
+    paddingLeft: '30px',
+    paddingTop: '10px',
     display: 'flex',
     justifyContent: 'center'
   };
@@ -52,7 +44,7 @@ const Chatroom = (props): JSX.Element => {
   const buttonStyles = {
     padding: '10px',
     marginLeft: '10px',
-    backgroundColor: '#4CAF50',
+    backgroundColor: '#0070BA',
     color: 'white',
     border: 'none',
     borderRadius: '5px',
@@ -64,31 +56,44 @@ const Chatroom = (props): JSX.Element => {
     const messageInput = document.getElementById(
       'message-input'
     ) as HTMLInputElement;
-    const message = messageInput.value;
-    emitEvent('send-chat-message', roomCode, { message, nickName });
-    messageInput.value = '';
+    const message = messageInput.value.trim();
+    if (message !== '') {
+      emitEvent('send-chat-message', roomCode, { message, nickName });
+      messageInput.value = '';
+    }
+  };
+
+  const handleMessageStyle = (messageNickName: string) => {
+    return {
+      color: messageNickName === nickName ? '#66C4EB' : 'white'
+    };
   };
 
-  socket.on('new chat message', (remoteData) => {
-    const messageContainer = document.getElementById('message-container');
-    const messageElement = document.createElement('div');
-    messageElement.innerText =
-      nickName === remoteData.nickName
-        ? `You: ${remoteData.message}`
-        : `${remoteData.nickName}: ${remoteData.message}`;
-    messageContainer.append(messageElement);
-  });
+  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);
+    }
+  }, [newMessage]);
 
   return (
     <div
       className="livechat-panel"
       style={{ paddingLeft: '10px', width: '100%', height: '100%' }}
     >
-      <div className="roomInfo" style={{ paddingLeft: '10px' }}>
+      <div className="roomInfo" style={{ paddingLeft: '70px' }}>
         <p>Current room: {roomCode}</p>
         <p>Your Nickname: {nickName}</p>
       </div>
-      <div style={{ justifyContent: 'center', display: 'flex', height: '90%' }}>
+      <div style={{ justifyContent: 'center', display: 'flex', height: '80%' }}>
         <div id="message-container" style={{ ...wrapperStyles }}></div>
       </div>
       <form

app/src/components/left/RoomsContainer.tsx

@@ -40,7 +40,8 @@ import {
   setRoomCode,
   setUserName,
   setUserJoined,
-  setUserList
+  setUserList,
+  setNewMessage
 } from '../../redux/reducers/slice/roomSlice';
 import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
 import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
@@ -69,6 +70,9 @@ const RoomsContainer = () => {
   const userJoined = useSelector(
     (store: RootState) => store.roomSlice.userJoined
   );
+  const newMessage = useSelector(
+    (store: RootState) => store.roomSlice.newMessage
+  );
 
   // for websockets - initialize socket connection passing in roomCode
   function initSocketConnection(roomCode: string) {
@@ -106,6 +110,12 @@ const RoomsContainer = () => {
         dispatch(setUserList(newUserList));
       });
 
+      socket.on('new chat message', (messageData) => {
+        if (JSON.stringify(messageData) !== JSON.stringify(newMessage)) {
+          dispatch(setNewMessage(messageData));
+        }
+      });
+
       // dispatch add child to local state when element has been added by another user
       socket.on('child data from server', (childData: object) => {
         // console.log('child data received by users', childData);

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

@@ -4,6 +4,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   roomCode: '',
   userName: '',
+  newMessage: { nickName: '', message: '' },
   userList: [],
   userJoined: false
 };
@@ -24,12 +25,20 @@ const roomSlice = createSlice({
     },
     setUserJoined: (state, action) => {
       state.userJoined = action.payload;
+    },
+    setNewMessage: (state, action) => {
+      state.newMessage = action.payload;
     }
   }
 });
 
 // Exports the action creator function to be used with useDispatch
-export const { setRoomCode, setUserName, setUserList, setUserJoined } =
-  roomSlice.actions;
+export const {
+  setRoomCode,
+  setUserName,
+  setUserList,
+  setUserJoined,
+  setNewMessage
+} = roomSlice.actions;
 // Exports so we can combine in rootReducer
 export default roomSlice.reducer;