Merge pull request #8 from commt/unsubscribe-logic

Unsubscribe Logic

Author: mkilincaslan

src/context/actions/messagesAction.ts

@@ -29,3 +29,8 @@ export const addMoreMessages =
   (data: AddMoreMessagesProps) => (dispatch: Dispatch<CommtContextActions>) => {
     dispatch({ type: "ADD_MORE_MESSAGES", payload: data });
   };
+
+export const deleteMessages =
+  (roomId: string) => (dispatch: Dispatch<CommtContextActions>) => {
+    dispatch({ type: "DELETE_MESSAGES", payload: roomId });
+  };

src/context/actions/roomsActions.ts

@@ -24,6 +24,11 @@ export const addRoom =
     dispatch({ type: "ADD_ROOM", payload: room });
   };
 
+export const deleteRoom =
+  (chatRoomAuthId: string) => (dispatch: Dispatch<CommtContextActions>) => {
+    dispatch({ type: "DELETE_ROOM", payload: chatRoomAuthId });
+  };
+
 export const updateLastMessage =
   (data: UpdateLastMessageProps) =>
   (dispatch: Dispatch<CommtContextActions>) => {

src/context/reducers/index.ts

@@ -39,6 +39,7 @@ export const InitialState: CommtContextData = {
 type RoomsActions =
   | { type: "SET_ROOMS"; payload: RoomProps[] }
   | { type: "ADD_ROOM"; payload: RoomProps }
+  | { type: "DELETE_ROOM"; payload: string }
   | { type: "UPDATE_LAST_MESSAGE"; payload: UpdateLastMessageProps }
   | { type: "UPDATE_READ_TOKEN"; payload: ReadTokenProps }
   | { type: "UPDATE_UNREAD_MSG_COUNT"; payload: UpdateUnreadMsgCountProps };
@@ -51,7 +52,8 @@ type UsersActions =
 type MessagesActions =
   | { type: "SET_MESSAGES"; payload: IMessagesData }
   | { type: "ADD_MESSAGE"; payload: AddMessageProps }
-  | { type: "ADD_MORE_MESSAGES"; payload: AddMoreMessagesProps };
+  | { type: "ADD_MORE_MESSAGES"; payload: AddMoreMessagesProps }
+  | { type: "DELETE_MESSAGES"; payload: string };
 
 type AppActions =
   | { type: "TOGGLE_THEME"; payload: DefaultTheme }

src/context/reducers/messagesReducer.ts

@@ -57,6 +57,15 @@ export function messagesReducer(
       };
     }
 
+    case "DELETE_MESSAGES": {
+      const roomId = action.payload;
+
+      const messages = { ...state };
+      delete messages[roomId];
+
+      return messages;
+    }
+
     default: {
       return state;
     }

src/context/reducers/roomsReducer.ts

@@ -22,6 +22,16 @@ export function roomsReducer(state: RoomProps[], action: CommtContextActions) {
       return [...state, action.payload];
     }
 
+    case "DELETE_ROOM": {
+      const rooms = [...state];
+      const roomIndexToBeDeleted = rooms.findIndex(
+        (r) => r.chatRoomAuthId === action.payload,
+      ); // action.payload represents the chatRoomAuthId of the room to be deleted from the state
+      rooms.splice(roomIndexToBeDeleted, 1); // Delete that particular index from the instance of the rooms
+
+      return rooms;
+    }
+
     case "UPDATE_LAST_MESSAGE": {
       const { roomId, lastMessage } = action.payload;
       return state.map((room) =>

src/utils/SocketController.tsx

@@ -3,9 +3,10 @@ import { connect, socket, DataProps, MessageInfoProps } from "./socket";
 import { CommtContext } from "../context/Context";
 import * as types from "./emitTypes";
 import { updateUserOnline } from "../context/actions/usersActions";
-import { addMessage } from "../context/actions/messagesAction";
+import { addMessage, deleteMessages } from "../context/actions/messagesAction";
 import {
   addRoom,
+  deleteRoom,
   updateLastMessage,
   updateReadToken,
 } from "../context/actions/roomsActions";
@@ -211,6 +212,38 @@ const SocketController = () => {
     });
   }, []);
 
+  useEffect(() => {
+    socket.on(types.UNSUBSCRIBE_ROOM, (chatRoomAuthId) => {
+      try {
+        // Send request to server to leave room
+        socket.emit(types.LEAVE_ROOM, chatRoomAuthId, ({ status }) => {
+          // Check if the socket successfully leaves the room
+          if (status === "success") {
+            const roomId = rooms.find(
+              (room) => room.chatRoomAuthId === chatRoomAuthId,
+            )?.roomId;
+
+            // Update the context
+            deleteRoom(chatRoomAuthId)(dispatch);
+            roomId && deleteMessages(roomId)(dispatch);
+          }
+        });
+      } catch (error) {
+        handleLogger({
+          apiKey,
+          subscriptionKey,
+          projectName,
+          chatAuthId: selfUser?.chatAuthId,
+          chatRoomAuthId: chatRoomAuthId,
+          error: {
+            error,
+            event: types.UNSUBSCRIBE_ROOM,
+          },
+        });
+      }
+    });
+  }, [rooms]);
+
   const handleMessage = (data: DataProps) => {
     try {
       const { message: messageData, iv } = data;

src/utils/emitTypes.ts

@@ -16,3 +16,5 @@ export const SEND_READ_TOKEN = "send_read_token";
 export const RECEIVE_READ_TOKEN = "receive_read_token";
 export const CREATE_NEW_ROOM = "create_new_room";
 export const CONNECT_ERROR = "connect_error";
+export const LEAVE_ROOM = "leave_room";
+export const UNSUBSCRIBE_ROOM = "unsubscribe_room";

src/utils/socket.ts

@@ -41,6 +41,7 @@ interface ServerToClientEvents {
   [types.RECEIVE_READ_TOKEN]: (data: ReadTokenProps) => void;
   [types.JOIN_NEW_ROOM]: (data: { room: RoomProps }) => void;
   [types.CONNECT_ERROR]: (err: Error) => void;
+  [types.UNSUBSCRIBE_ROOM]: (chatRoomAuthId: string) => void;
 }
 
 interface ClientToServerEvents {
@@ -62,6 +63,11 @@ interface ClientToServerEvents {
     data: CreateRoomProps,
     callback: ({ room }: { room: RoomProps }) => void,
   ) => void;
+
+  [types.LEAVE_ROOM]: (
+    chatRoomAuthId: string,
+    callback: ({ status }: { status: string }) => void,
+  ) => void;
 }
 
 interface ConnectProps {