Fix Communication service from user typing change

CS3219-AY2324S1 · Nov 13, 2023 · f1cc010 · f1cc010
1 parent 3eebc06
commit f1cc010
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/frontend/app/src/features/room/components/chat/ChatInput.tsx b/frontend/app/src/features/room/components/chat/ChatInput.tsx
@@ -16,7 +16,7 @@ const ChatInput = ({ socket }: ChatInputProps) => {
     e.preventDefault();
     if (inputMessage.trim()) {
       socket.emit(COMMUNICATION_SOCKET_API.CHAT_MESSAGE, {
-        userId: user?.id,
+        userId: user?.id.toString(),
         message: inputMessage,
       });
       setInputMessage("");

diff --git a/frontend/app/src/features/room/components/chat/Chatbox.tsx b/frontend/app/src/features/room/components/chat/Chatbox.tsx
@@ -2,7 +2,7 @@ import { WEBSOCKET_PATH } from "@/constants/api";
 import { COMMUNICATION_SOCKET_API } from "@/constants/socket";
 import { useAuth } from "@/hooks";
 import { env } from "@/lib/env";
-import { Box, Spinner } from "@chakra-ui/react";
+import { Box, Spinner, useToast } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { Socket, io } from "socket.io-client";
 import { User } from "@/types/user";
@@ -25,14 +25,15 @@ export const ChatBox = ({ roomId }: ChatBoxProps): JSX.Element => {
       setRoomId: state.setRoomId,
     })),
   );
+  const toast = useToast();
 
   useEffect(() => {
     if (!user?.id) return;
 
     const newSocket = io(`${env.VITE_BACKEND_URL}`, {
       path: WEBSOCKET_PATH.COMMUNICATION,
       withCredentials: true,
-      query: { ...user },
+      query: { ...user, roomId },
     });
 
     newSocket.on(
@@ -42,6 +43,14 @@ export const ChatBox = ({ roomId }: ChatBoxProps): JSX.Element => {
 
     newSocket.on(COMMUNICATION_SOCKET_API.CHAT_MESSAGE_RESPONSE, addMessage);
 
+    newSocket.on(COMMUNICATION_SOCKET_API.ERROR, (error: string) => {
+      toast({
+        status: "error",
+        title: error,
+        isClosable: true,
+      });
+    });
+
     newSocket.emit(COMMUNICATION_SOCKET_API.GET_MESSAGES);
 
     setSocket(newSocket);
@@ -52,7 +61,7 @@ export const ChatBox = ({ roomId }: ChatBoxProps): JSX.Element => {
         newSocket.disconnect();
       }
     };
-  }, [addMessage, populateMessages, setRoomId, roomId, user, user?.id]);
+  }, [addMessage, populateMessages, setRoomId, roomId, user, user?.id, toast]);
 
   if (!socket) {
     return <Spinner />;

diff --git a/frontend/app/src/features/room/components/chat/message/Messages.tsx b/frontend/app/src/features/room/components/chat/message/Messages.tsx
@@ -47,7 +47,7 @@ export const Messages = (): JSX.Element => {
             <UserMessage
               message={message}
               sender={sender}
-              isUser={sender.id === user.id}
+              isUser={sender.id.toString() === user.id.toString()}
               key={index}
             />
           </>