chatroom function clean up and improvement

Author: Eliza612

app/src/components/bottom/BottomTabs.tsx

@@ -31,7 +31,6 @@ const BottomTabs = (props): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
   const collaborationRoom = useSelector((store: RootState) => store.roomSlice);
-  // {roomCode: '', userName: '', userList: Array(0), userJoined: false}
 
   const [tab, setTab] = useState(0);
   const classes = useStyles();
@@ -60,7 +59,7 @@ const BottomTabs = (props): JSX.Element => {
         zIndex: 1,
         borderTop: '2px solid grey'
       }}
-      onMouseOver={() => {
+      onClick={() => {
         props.setBottomShow(true);
       }}
     >

app/src/components/bottom/chatRoom.tsx

@@ -4,7 +4,8 @@ import { RootState } from '../../redux/store';
 import { emitEvent } from '../../helperFunctions/socket';
 
 const Chatroom = (props): JSX.Element => {
-  const collaborationRoom = useSelector((store: RootState) => store.roomSlice);
+  const nickName = useSelector((store: RootState) => store.roomSlice.userName);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
   const newMessage = useSelector(
     (store: RootState) => store.roomSlice.newMessage
@@ -14,9 +15,6 @@ const Chatroom = (props): JSX.Element => {
     (store: RootState) => store.roomSlice.userChange
   );
 
-  const nickName = collaborationRoom.userName;
-  const roomCode = collaborationRoom.roomCode;
-
   const wrapperStyles = {
     border: `2px solid #f2fbf8`,
     borderRadius: '8px',
@@ -93,8 +91,8 @@ const Chatroom = (props): JSX.Element => {
     const messageElement = document.createElement('div');
     messageElement.innerText =
       userChange.status === 'JOIN'
-        ? `${userChange.nickName} joined the chatroom`
-        : `${userChange.nickName} left the chatroom`;
+        ? `${userChange.nickName} joined the chat room`
+        : `${userChange.nickName} left the chat room`;
     messageElement.style.color = 'yellow';
     messageContainer.append(messageElement);
   }, [userChange]);
@@ -106,10 +104,10 @@ const Chatroom = (props): JSX.Element => {
     >
       <div className="roomInfo" style={{ paddingLeft: '70px' }}>
         <p>Current room: {roomCode}</p>
-        <p>Your Nickname: {nickName}</p>
+        <p>Your nickname: {nickName}</p>
       </div>
       <div style={{ justifyContent: 'center', display: 'flex', height: '80%' }}>
-        <div id="message-container" style={{ ...wrapperStyles }}></div>
+        <div id="message-container" style={wrapperStyles}></div>
       </div>
       <form
         id="send-container"

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

@@ -4,9 +4,9 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   roomCode: '',
   userName: '',
-  newMessage: { nickName: '', message: '' },
   userList: [],
   userJoined: false,
+  newMessage: { nickName: '', message: '' },
   userChange: { nickName: '', status: '' }
 };