From b1c7903ca7889f17162e1a1810981d94f88fc565 Mon Sep 17 00:00:00 2001
From: Zenith <zenithyap88@gmail.com>
Date: Sat, 4 Nov 2023 18:12:59 +0800
Subject: [PATCH] Chat api (#99)

* Test room id

* Update MatchSlice

* Allow client communication

* Link chat api

---------

Co-authored-by: Zenith Yap <zenithyap@Zeniths-MacBook-Air.local>
Co-authored-by: Haiqel <34855234+Acerizm@users.noreply.github.com>
---
 .../ChatView/ChatBubble/ChatBubble.tsx        | 17 ++++----
 .../PracticePage/ChatView/index.tsx           | 41 +++++++++----------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/front-end/peer-prep/src/components/PracticePage/ChatView/ChatBubble/ChatBubble.tsx b/front-end/peer-prep/src/components/PracticePage/ChatView/ChatBubble/ChatBubble.tsx
index dd0025bc..d4998644 100644
--- a/front-end/peer-prep/src/components/PracticePage/ChatView/ChatBubble/ChatBubble.tsx
+++ b/front-end/peer-prep/src/components/PracticePage/ChatView/ChatBubble/ChatBubble.tsx
@@ -1,5 +1,5 @@
 import * as Styles from './styles';
-import { Typography } from '@mui/material';
+import { Typography, Box } from '@mui/material';
 
 interface ChatBubbleProps {
     text: string;
@@ -9,7 +9,7 @@ interface ChatBubbleProps {
 const ChatBubble = ({ text, isMine }:ChatBubbleProps) => {
     const myChatBubbleStyle = {
         backgroundColor: "#281E5D",
-        width: "auto",
+        display: "inline",
         borderRadius: "5px",
         wordWrap: "break-word",
         maxWidth: "300px",
@@ -20,13 +20,13 @@ const ChatBubble = ({ text, isMine }:ChatBubbleProps) => {
 
     const otherChatBubbleStyle = {
         backgroundColor: "#1B2735",
-        width: "auto",
+        display: "inline",
         borderRadius: "5px",
         wordWrap: "break-word",
         maxWidth: "300px",
         color: "white",
         marginLeft: "5%",
-        padding: "2%"
+        padding: "2%",
     };
 
     const MyChatBubble = () => {
@@ -41,9 +41,12 @@ const ChatBubble = ({ text, isMine }:ChatBubbleProps) => {
 
     const OtherChatBubble = () => {
         return (
-            <Typography sx={otherChatBubbleStyle} mb={1}>
-                {text}
-            </Typography>
+            <Box mb={1}>
+                <Typography sx={otherChatBubbleStyle}>
+                    {text}
+                </Typography>
+            </Box>
+
         )
     };
   
diff --git a/front-end/peer-prep/src/components/PracticePage/ChatView/index.tsx b/front-end/peer-prep/src/components/PracticePage/ChatView/index.tsx
index 0dfe07b5..b351dcb2 100644
--- a/front-end/peer-prep/src/components/PracticePage/ChatView/index.tsx
+++ b/front-end/peer-prep/src/components/PracticePage/ChatView/index.tsx
@@ -9,12 +9,13 @@ import io from 'socket.io-client';
 import * as MatchSlice from '../../redux/reducers/Match/MatchSlice';
 import { useSelector, useDispatch } from 'react-redux';
 
-// change to this when live https://api.peerprepgroup51sem1y2023.xyz/
 const socket = io("https://collab.peerprepgroup51sem1y2023.xyz/");
 
-type IMessage = {
-    message: string;
-    roomId: string;
+interface IMessageData {
+    message: string,
+    roomId: string,
+    socketId: string,
+    isMine: boolean
 };
 
 interface IPartnerDetails {
@@ -26,15 +27,10 @@ interface IPartnerDetails {
 }
 
 const ChatView = () => {
-    const dispatch = useDispatch();
     const partnerDetails: IPartnerDetails = useSelector(MatchSlice.selectPartnerDetails);
-    console.log(partnerDetails)
-    const roomId = partnerDetails.matchId
-    //const roomId = useSelector(MatchSlice.selectRoomId)
-    console.log(roomId);
-    // let roomId = "test";
+    const roomId = partnerDetails.matchId;
 
-    const [messages, setMessages] = useState<string[]>([]);
+    const [messages, setMessages] = useState<IMessageData[]>([]);
     const [message, setMessage] = useState<string>('');
 
     useEffect(() => {
@@ -43,23 +39,26 @@ const ChatView = () => {
         })
 
         socket.emit("joinRoom", roomId);
+        console.log(roomId)
 
-        socket.on("message", (data: IMessage) => {
-            console.log("Received message:", data.message);
+        socket.on("message", (data:IMessageData) => {
+            console.log("Server Received message:", data);
 
+            // Checks if the message sent belongs to client using socket id
+            data.isMine = data.socketId === socket.id;
+            
             // Update the messages state with the received message
-            setMessages((prevMessages) => [...prevMessages, data.message]);
+            setMessages((prevMessages) => [...prevMessages, data]);
         });
-
     }, [socket]);
 
     const handleSendMessage = (event: React.KeyboardEvent) => {
         if (event.key === 'Enter' && message != '') {
-            console.log("enter pressed");
-
             // Add the new message to the messages state
-            socket.emit("message", { "message": message, "roomId": roomId });
-            setMessages((prevMessages) => [...prevMessages, message]);
+            socket.emit("message", { "message": message, 
+                                            "roomId": roomId,
+                                            "socketId": socket.id,
+                                            "isMine": true });
             setMessage(''); // Clear the input field
         }
     };
@@ -69,9 +68,9 @@ const ChatView = () => {
             <List sx={Styles.listStyle}>
                 {messages.map((message) => {
                     return (
-                        <ChatBubble text={message} isMine={true} />
+                        <ChatBubble text={message.message} isMine={message.isMine} />
                     );
-                })};
+                })}
             </List>
             <TextField value={message}
                 onChange={(e) => setMessage(e.target.value)}