Merge pull request #10 from oslabs-beta/liz-test-redux

Add Live Chatroom Function

Author: Eliza612

app/src/components/bottom/BottomTabs.tsx

@@ -8,6 +8,7 @@ import CustomizationPanel from '../../containers/CustomizationPanel';
 import CreationPanel from './CreationPanel';
 import ContextManager from '../ContextAPIManager/ContextManager';
 import StateManager from '../StateManagement/StateManagement';
+import Chatroom from './ChatRoom';
 import Box from '@mui/material/Box';
 import Tree from '../../tree/TreeChart';
 import FormControl from '@mui/material/FormControl';
@@ -22,6 +23,7 @@ const BottomTabs = (props): JSX.Element => {
   const dispatch = useDispatch();
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const collaborationRoom = useSelector((store: RootState) => store.roomSlice);
 
   const [tab, setTab] = useState(0);
   const classes = useStyles();
@@ -95,6 +97,11 @@ const BottomTabs = (props): JSX.Element => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="State Manager"
           />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="Live Chat"
+          />
         </Tabs>
         <div className={classes.projectTypeWrapper}>
           <FormControl size="small">
@@ -133,6 +140,23 @@ const BottomTabs = (props): JSX.Element => {
             isThemeLight={props.isThemeLight}
           />
         )}
+        {tab === 6 &&
+          (collaborationRoom.userJoined ? (
+            <Chatroom />
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%'
+              }}
+            >
+              <p style={{ color: 'white', fontSize: '18px' }}>
+                Please join a collaboration room to enable this function
+              </p>
+            </div>
+          ))}
       </div>
     </div>
   );

app/src/components/bottom/ChatRoom.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
+
+const Chatroom = (props): JSX.Element => {
+  const userName = useSelector((store: RootState) => store.roomSlice.userName);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+  const messages = useSelector((store: RootState) => store.roomSlice.messages);
+
+  const [inputContent, setInputContent] = useState('');
+
+  const wrapperStyles = {
+    border: `2px solid #f2fbf8`,
+    borderRadius: '8px',
+    width: '70%',
+    height: '100%',
+    display: 'column',
+    padding: '20px',
+    backgroundColor: '#42464C',
+    overflow: 'auto'
+  };
+
+  const inputContainerStyles = {
+    width: '100%',
+    paddingLeft: '30px',
+    paddingTop: '10px',
+    display: 'flex',
+    justifyContent: 'center'
+  };
+
+  const inputStyles = {
+    width: '70%',
+    padding: '10px',
+    border: 'none',
+    borderRadius: '5px',
+    backgroundColor: '#333333',
+    color: 'white'
+  };
+
+  const buttonStyles = {
+    padding: '10px',
+    marginLeft: '10px',
+    backgroundColor: '#0070BA',
+    color: 'white',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer'
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (inputContent !== '') {
+      emitEvent('send-chat-message', roomCode, {
+        userName,
+        message: inputContent
+      });
+      setInputContent('');
+    }
+  };
+
+  const handleMessageContainerStyle = (message: object) => {
+    if (message['type'] === 'activity') {
+      return { color: 'yellow' };
+    } else {
+      if (message['userName'] === userName) return { color: '#66C4EB' };
+      return { color: 'white' };
+    }
+  };
+
+  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;
+    });
+  };
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to the bottom of the container whenever new messages are added
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <div
+      className="livechat-panel"
+      style={{ paddingLeft: '10px', width: '100%', height: '100%' }}
+    >
+      <div style={{ justifyContent: 'center', display: 'flex', height: '80%' }}>
+        <div id="message-container" style={wrapperStyles} ref={containerRef}>
+          {renderMessages()}
+        </div>
+      </div>
+      <div className="chatroom-input">
+        <form
+          id="send-container"
+          style={inputContainerStyles}
+          onSubmit={handleSubmit}
+        >
+          <input
+            type="text"
+            id="message-input"
+            onChange={(e) => setInputContent(e.target.value)}
+            value={inputContent}
+            style={inputStyles}
+          />
+          <button type="submit" id="send-button" style={buttonStyles}>
+            Send
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Chatroom;

app/src/components/left/RoomsContainer.tsx

@@ -40,6 +40,7 @@ import {
   setUserName,
   setUserJoined,
   setUserList,
+  setMessages,
   setPassword
 } from '../../redux/reducers/slice/roomSlice';
 import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
@@ -66,6 +67,7 @@ const RoomsContainer = () => {
   const userJoined = useSelector(
     (store: RootState) => store.roomSlice.userJoined
   );
+  const messages = useSelector((store: RootState) => store.roomSlice.messages);
 
   const initSocketConnection = (roomCode: string) => {
     // helper function to create socket connection
@@ -97,9 +99,18 @@ 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));
+      });
+
+      socket.on('new chat message', (messageData) => {
+        if (
+          messages.length === 0 ||
+          JSON.stringify(messageData) !== JSON.stringify(messages[-1])
+        ) {
+          dispatch(setMessages(messageData));
+        }
       });
 
       // dispatch add child to local state when element has been added by another user

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

@@ -5,6 +5,7 @@ const initialState = {
   userName: '',
   userList: [],
   userJoined: false,
+  messages: [],
   password: ''
 };
 
@@ -24,6 +25,9 @@ const roomSlice = createSlice({
     setUserJoined: (state, action) => {
       state.userJoined = action.payload;
     },
+    setMessages: (state, action) => {
+      state.messages = [...state.messages, action.payload];
+    },
     setPassword: (state, action) => {
       state.password = action.payload;
     }
@@ -35,6 +39,7 @@ export const {
   setUserName,
   setUserList,
   setUserJoined,
+  setMessages,
   setPassword
 } = roomSlice.actions;
 

server/server.ts

@@ -132,8 +132,15 @@ 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])
+          } // 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
@@ -153,20 +160,33 @@ 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 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',
-        Object.values(roomLists[roomCode])
-      );
+      io.to(roomCode).emit('updateUserList', {
+        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,
+        type: 'chat'
+      });
+    }
+  });
   client.on('addChildAction', (roomCode: string, childData: object) => {
     // console.log('child data received on server:', childData);
     if (roomCode) {