Merge pull request #99 from nicolelim02/feat/communication

Close socket connection when component unmounts

Author: feliciagan

backend/communication-service/src/handlers/websocketHandler.ts

@@ -13,7 +13,6 @@ export const handleWebsocketCommunicationEvents = (socket: Socket) => {
 
       const room = io.sockets.adapter.rooms.get(roomId);
       if (room?.has(socket.id)) {
-        // todo: fetch messages from cache and send to the user
         socket.emit(CommunicationEvents.ALREADY_JOINED);
         return;
       }
@@ -33,24 +32,6 @@ export const handleWebsocketCommunicationEvents = (socket: Socket) => {
     }
   );
 
-  socket.on(
-    CommunicationEvents.LEAVE,
-    ({ roomId, username }: { roomId: string; username: string }) => {
-      if (!roomId) {
-        return;
-      }
-
-      socket.leave(roomId);
-      const createdTime = Date.now();
-      socket.to(roomId).emit(CommunicationEvents.USER_LEFT, {
-        from: BOT_NAME,
-        type: MessageTypes.BOT_GENERATED,
-        message: `${username} has left the chat`,
-        createdTime,
-      });
-    }
-  );
-
   socket.on(
     CommunicationEvents.SEND_TEXT_MESSAGE,
     ({
@@ -71,14 +52,13 @@ export const handleWebsocketCommunicationEvents = (socket: Socket) => {
         message,
         createdTime,
       });
-
-      // todo: store the message in a cache
     }
   );
 
   socket.on(CommunicationEvents.DISCONNECT, () => {
     const { roomId } = socket.data;
     if (roomId) {
+      console.log("disconnected", roomId, socket.data.username);
       const createdTime = Date.now();
       socket.to(roomId).emit(CommunicationEvents.DISCONNECTED, {
         from: BOT_NAME,

backend/communication-service/src/utils/types.ts

@@ -1,12 +1,10 @@
 export enum CommunicationEvents {
   // receive
   JOIN = "join",
-  LEAVE = "leave",
   SEND_TEXT_MESSAGE = "send_text_message",
   DISCONNECT = "disconnect",
 
   // send
-  USER_LEFT = "user_left",
   USER_JOINED = "user_joined",
   ALREADY_JOINED = "already_joined",
   TEXT_MESSAGE_RECEIVED = "text_message_received",

frontend/src/components/Chat/index.tsx

@@ -18,12 +18,10 @@ type Message = {
 export enum CommunicationEvents {
   // receive
   JOIN = "join",
-  LEAVE = "leave",
   SEND_TEXT_MESSAGE = "send_text_message",
   DISCONNECT = "disconnect",
 
   // send
-  USER_LEFT = "user_left",
   USER_JOINED = "user_joined",
   ALREADY_JOINED = "already_joined",
   TEXT_MESSAGE_RECEIVED = "text_message_received",
@@ -69,32 +67,31 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
       username: user?.username,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    return () => {
+      console.log("closing socket...");
+      communicationSocket.close();
+      setMessages([]); // clear the earlier messages in dev mode
+    };
   }, []);
 
   useEffect(() => {
     // initialize listener for incoming messages
-    communicationSocket.on(
-      CommunicationEvents.USER_JOINED,
-      (message: Message) => {
-        setMessages((prevMessages) => [...prevMessages, message]);
-      }
-    );
-    communicationSocket.on(
-      CommunicationEvents.TEXT_MESSAGE_RECEIVED,
-      (message: Message) => {
-        setMessages((prevMessages) => [...prevMessages, message]);
-      }
-    );
-    communicationSocket.on(
-      CommunicationEvents.DISCONNECTED,
-      (message: Message) => {
-        setMessages((prevMessages) => [...prevMessages, message]);
-      }
-    );
+    const listener = (message: Message) => {
+      setMessages((prevMessages) => [...prevMessages, message]);
+    };
+
+    communicationSocket.on(CommunicationEvents.USER_JOINED, listener);
+    communicationSocket.on(CommunicationEvents.TEXT_MESSAGE_RECEIVED, listener);
+    communicationSocket.on(CommunicationEvents.DISCONNECTED, listener);
 
     return () => {
-      communicationSocket.off(CommunicationEvents.USER_JOINED);
-      communicationSocket.off(CommunicationEvents.TEXT_MESSAGE_RECEIVED);
+      communicationSocket.off(CommunicationEvents.USER_JOINED, listener);
+      communicationSocket.off(
+        CommunicationEvents.TEXT_MESSAGE_RECEIVED,
+        listener
+      );
+      communicationSocket.off(CommunicationEvents.DISCONNECTED, listener);
     };
   }, []);
 

frontend/src/components/QuestionCodeTemplates/index.tsx

@@ -46,7 +46,7 @@ const QuestionCodeTemplates: React.FC<QuestionCodeTemplatesProps> = ({
     }));
   };
 
-  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleTabKeys = (event: any) => {
     const { value } = event.target;