Link chat api (#98)

* Test room id * Update MatchSlice * Allow client communication --------- Co-authored-by: Zenith Yap <[email protected]> Co-authored-by: Haiqel <[email protected]>
CS3219-AY2324S1 · Nov 4, 2023 · 4d12fd2 · 4d12fd2
1 parent 1d87070
commit 4d12fd2
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 36 deletions.
diff --git a/front-end/peer-prep/src/components/MatchingServicePopUp/index.tsx b/front-end/peer-prep/src/components/MatchingServicePopUp/index.tsx
@@ -36,6 +36,14 @@ const steps = [
     "Find partner"
 ];
 
+interface IPartnerDetails {
+    "userId1": string,
+    "userId2": string,
+    "complexity": string
+    "matchId": string
+    "language": string
+}
+
 const LanguageSelection = () => {
     const languagesChosen: string[] = useSelector(MatchSlice.selectLanguagesChosen);
     const dispatch = useDispatch();
@@ -175,7 +183,8 @@ const MatchingServicePopUp = () => {
         socket.on("match-response:success", (data) => {
             console.log("success! partner found");
             dispatch(MatchSlice.setMatchResponse("success"));
-            dispatch(MatchSlice.setPartnerDetails(data));
+            const partnerDetails: IPartnerDetails = JSON.parse(data)
+            dispatch(MatchSlice.setPartnerDetails(partnerDetails));
             console.log(data);
         });
         socket.on("match-response:failure", () => {

diff --git a/front-end/peer-prep/src/components/PracticePage/ChatView/index.tsx b/front-end/peer-prep/src/components/PracticePage/ChatView/index.tsx
@@ -6,46 +6,76 @@ import ChatBubble from './ChatBubble/ChatBubble';
 import React, { useEffect, useState } from 'react';
 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("http://localhost:8576");
+const socket = io("https://collab.peerprepgroup51sem1y2023.xyz/");
 
 type IMessage = {
-    text: string;
-    isMine: boolean;
+    message: string;
+    roomId: string;
 };
 
+interface IPartnerDetails {
+    userId1: string,
+    userId2: string,
+    complexity: string
+    matchId: string
+    language: string
+}
+
 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 [messages, setMessages] = useState<string[]>([]);
     const [message, setMessage] = useState<string>('');
 
     useEffect(() => {
         socket.on("connect", () => {
-            console.log("connected to server")
+            console.log("connected to server");
         })
-    }, []);
 
-    const handleSendMessage = (event:React.KeyboardEvent) => {
+        socket.emit("joinRoom", roomId);
+
+        socket.on("message", (data: IMessage) => {
+            console.log("Received message:", data.message);
+
+            // Update the messages state with the received message
+            setMessages((prevMessages) => [...prevMessages, data.message]);
+        });
+
+    }, [socket]);
+
+    const handleSendMessage = (event: React.KeyboardEvent) => {
         if (event.key === 'Enter' && message != '') {
             console.log("enter pressed");
-
-        // Add the new message to the messages state
-        setMessages((prevMessages) => [...prevMessages, message]);
-        setMessage(''); // Clear the input field
+
+            // Add the new message to the messages state
+            socket.emit("message", { "message": message, "roomId": roomId });
+            setMessages((prevMessages) => [...prevMessages, message]);
+            setMessage(''); // Clear the input field
         }
     };
 
     return (
         <div style={Styles.chatViewContainerStyle}>
-                <List sx={Styles.listStyle}>
-                    {messages.map((message) => {
-                        return (
-                            <ChatBubble text={message} isMine={true}/>
-                        );
-                    })};
-                </List>
-                <TextField value={message} 
-                            onChange={(e) => setMessage(e.target.value)} 
-                            onKeyDown={handleSendMessage} sx={Styles.textFieldStyle}></TextField>
+            <List sx={Styles.listStyle}>
+                {messages.map((message) => {
+                    return (
+                        <ChatBubble text={message} isMine={true} />
+                    );
+                })};
+            </List>
+            <TextField value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={handleSendMessage} sx={Styles.textFieldStyle}></TextField>
         </div>
     );
 };

diff --git a/front-end/peer-prep/src/components/redux/reducers/Match/MatchSlice.tsx b/front-end/peer-prep/src/components/redux/reducers/Match/MatchSlice.tsx
@@ -1,12 +1,20 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 interface IMatchState {
-    languagesChosen: string[]
-    complexityChosen: string
-    partnerDetails: {}
+    languagesChosen: string[],
+    complexityChosen: string,
+    partnerDetails: IPartnerDetails,
     matchResponse: string
 }
 
+interface IPartnerDetails {
+    userId1: string,
+    userId2: string,
+    complexity: string
+    matchId: string
+    language: string
+}
+
 const matchSlice = createSlice({
     name: "match",
     initialState: {
@@ -26,7 +34,8 @@ const matchSlice = createSlice({
         setComplexity(state, action: PayloadAction<string>) {
             state.complexityChosen = action.payload
         },
-        setPartnerDetails(state, action: PayloadAction<object>) {
+        setPartnerDetails(state, action: PayloadAction<IPartnerDetails>) {
+
             state.partnerDetails = action.payload
         },
         setMatchResponse(state, action: PayloadAction<string>) {
@@ -39,7 +48,8 @@ export const { setLanguages, setComplexity, setPartnerDetails, setMatchResponse
 
 export default matchSlice.reducer;
 
-export const selectLanguagesChosen = (state: any) => state.match.languagesChosen;
-export const selectComplexityChosen = (state: any) => state.match.complexityChosen;
-export const selectPartnerDetails = (state: any) => state.match.partnerDetails;
-export const selectMatchResponse = (state: any) => state.match.matchResponse;
+export const selectLanguagesChosen = (state: { match: IMatchState }) => state.match.languagesChosen;
+export const selectComplexityChosen = (state: { match: IMatchState }) => state.match.complexityChosen;
+export const selectPartnerDetails = (state: { match: IMatchState }) => state.match.partnerDetails;
+export const selectRoomId = (state: { match: IMatchState }) => state.match.partnerDetails.matchId;
+export const selectMatchResponse = (state: { match: IMatchState }) => state.match.matchResponse;
diff --git a/services/collaboration-service/index.ts b/services/collaboration-service/index.ts
@@ -3,10 +3,12 @@ import http from 'http';
 import { Server as socketIo } from 'socket.io';
 import cors from "cors";
 
-interface IData {
+interface IMessageData {
     message: string,
-    roomId: string
-} 
+    roomId: string,
+    socketId: string,
+    isMine: boolean
+};
 
 const app = express();
 app.use(
@@ -38,17 +40,17 @@ io.on('connection', (socket) => {
         console.log(`User joined room: ${room}`);
     });
 
-    // Define socket event handlers here
-    socket.on('message', (data:IData) => {
+    socket.on('message', (data:IMessageData) => {
+        console.log("test")
         console.log('Received message:', data);
         try {
-            // Broadcast the message to all connected clients
+        // Broadcast the message to all connected clients
             const room = data.roomId;
             if (!room) {
                 socket.emit('error', 'An error occurred while processing your request');
             }
             // Emit the message to the specified room
-            io.to(room).emit('message', data.message);
+            io.to(room).emit('message', data);
         } catch (error) {
         // Handle the error
         console.error('An error occurred in the event handler:', error);