refactor: consistent name for room (#599)

Co-authored-by: MJinH <[email protected]> Co-authored-by: [email protected] <[email protected]> Co-authored-by: Mathias Ayivor <[email protected]> Co-authored-by: Danilo Ferrari <[email protected]>
Dun-sin · Jan 24, 2024 · 1160ad3 · 1160ad3 · vercel · Jan 24, 2024
1 parent fbfff92
commit 1160ad3
Show file tree

Hide file tree

Showing 23 changed files with 260 additions and 228 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/socket.io-client": "^3.0.0",
     "autoprefixer": "^10.0.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.53.0",
@@ -81,4 +82,4 @@
     "*.{js,jsx,ts,tsx}": "eslint --fix",
     "*.--write": "prettier --write ."
   }
-}
+}
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
@@ -101,34 +101,34 @@ const Chat = () => {
     inputRef.current.value = '';
     setEditing({ isediting: false, messageID: '' });
     socket?.timeout(10000).emit(events.NEW_EVENT_TYPING, {
-      chatId: app.currentChatId,
+      roomId: app.currentRoomId,
       isTyping: false,
     });
   };
 
   const sortedMessages = useMemo(() => {
-    if (!app.currentChatId) {
+    if (!app.currentRoomId) {
       return;
     }
-    return Object.values(state[app.currentChatId]?.messages ?? {})?.sort(
+    return Object.values(state[app.currentRoomId]?.messages ?? {})?.sort(
       (a, b) => {
         const da = new Date(a.time),
           db = new Date(b.time);
         return da.getTime() - db.getTime();
       }
     );
-  }, [state, app.currentChatId]);
+  }, [state, app.currentRoomId]);
 
   const doSend = async ({
     senderId,
-    room,
+    roomId,
     message,
     time,
     containsBadword,
     replyTo = null,
   }: {
     senderId: string;
-    room: string | null;
+    roomId: string | null;
     message: string;
     time: number;
     containsBadword: boolean;
@@ -139,7 +139,7 @@ const Chat = () => {
         senderId,
         message,
         time,
-        room,
+        roomId,
         containsBadword,
         replyTo,
       });
@@ -157,7 +157,7 @@ const Chat = () => {
       try {
         updateMessage({
           senderId,
-          room,
+          roomId,
           id: uuid(),
           message,
           time,
@@ -181,7 +181,7 @@ const Chat = () => {
     e.preventDefault();
 
     socket?.emit(events.NEW_EVENT_TYPING, {
-      chatId: app.currentChatId,
+      roomId: app.currentRoomId,
       isTyping: false,
     });
     const d = new Date();
@@ -197,14 +197,14 @@ const Chat = () => {
         const oldMessage = messageObject?.message;
         const editedMessage = await editMessage({
           id: editing.messageID,
-          chatId: app.currentChatId,
+          roomId: app.currentRoomId,
           newMessage: message as string,
           oldMessage,
         });
 
         updateMessage({
           ...editedMessage,
-          room: app.currentChatId,
+          roomId: app.currentRoomId,
           isEdited: true,
         });
       } catch (e) {
@@ -215,7 +215,7 @@ const Chat = () => {
     } else {
       doSend({
         senderId,
-        room: app.currentChatId,
+        roomId: app.currentRoomId,
         message: message as string,
         time: d.getTime(),
         containsBadword: badwords.check(message as string),
@@ -234,7 +234,7 @@ const Chat = () => {
   const handleTypingStatus = throttle(e => {
     if (e.target.value.length > 0) {
       socket?.timeout(5000).emit(events.NEW_EVENT_TYPING, {
-        chatId: app.currentChatId,
+        roomId: app.currentRoomId,
         isTyping: true,
       });
     }
@@ -292,18 +292,18 @@ const Chat = () => {
 
     const deleteMessageHandler = ({
       id,
-      chatId,
+      roomId,
     }: {
       id: string;
-      chatId: string;
+      roomId: string;
     }) => {
-      removeMessage(id, chatId);
+      removeMessage(id, roomId);
     };
 
     const editMessageHandler = (messageEdited: MessageType) => {
       updateMessage({
         ...messageEdited,
-        room: app.currentChatId,
+        roomId: app.currentRoomId,
         isEdited: true,
       });
     };
@@ -314,12 +314,12 @@ const Chat = () => {
 
     const readMessageHandler = ({
       messageId,
-      chatId,
+      roomId,
     }: {
       messageId: string;
-      chatId: string;
+      roomId: string;
     }) => {
-      receiveMessage(messageId, chatId);
+      receiveMessage(messageId, roomId);
     };
 
     // This is used to recive message form other user.
@@ -336,7 +336,7 @@ const Chat = () => {
       socket?.off(events.NEW_EVENT_READ_MESSAGE, readMessageHandler);
       socket?.off(events.NEW_EVENT_SEND_FAILED, limitMessageHandler);
     };
-  }, [app.currentChatId, socket]);
+  }, [app.currentRoomId, socket]);
 
   // this is used to send the notification for inactive chat to the respective user
   // get the last message sent

diff --git a/src/components/Chat/DropDownOption.tsx b/src/components/Chat/DropDownOption.tsx
@@ -77,7 +77,7 @@ const DropDownOptions = ({
     try {
       const messageDeleted = await deleteMessage({
         id,
-        chatId: gottenMessage.room as string,
+        roomId: gottenMessage.roomId as string,
       });
 
       console.log(messageDeleted);
@@ -86,7 +86,7 @@ const DropDownOptions = ({
         return;
       }
 
-      removeMessage(id, gottenMessage.room as string);
+      removeMessage(id, gottenMessage.roomId as string);
     } catch (e) {
       console.log(e);
       updateMessage(gottenMessage);

diff --git a/src/components/Chat/MessageSeen.tsx b/src/components/Chat/MessageSeen.tsx
@@ -18,18 +18,18 @@ const MessageSeen = ({ isRead, isSender }: MessageSeenProps) => {
   const { seenMessage } = useChatUtils(socket);
 
   const sortedMessages = useMemo(() => {
-    if (!app.currentChatId) {
+    if (!app.currentRoomId) {
       return;
     }
-    return Object.values(state[app.currentChatId]?.messages ?? {})?.sort(
+    return Object.values(state[app.currentRoomId]?.messages ?? {})?.sort(
       (a, b) => {
         const da = new Date(a.time),
           db = new Date(b.time);
 
         return da.getTime() - db.getTime();
       }
     );
-  }, [state, app.currentChatId]);
+  }, [state, app.currentRoomId]);
 
   useEffect(() => {
     // Initialize Intersection Observer
@@ -42,19 +42,19 @@ const MessageSeen = ({ isRead, isSender }: MessageSeenProps) => {
               ?.getAttribute('id')
               ?.split('-')[1] as string;
 
-            if (!app.currentChatId) {
+            if (!app.currentRoomId) {
               return;
             }
 
             try {
               seenMessage({
                 messageId,
-                chatId: app.currentChatId,
+                roomId: app.currentRoomId,
               });
             } catch (e) {
               return;
             }
-            receiveMessage(messageId, app.currentChatId);
+            receiveMessage(messageId, app.currentRoomId);
           }
         });
       },
@@ -81,7 +81,7 @@ const MessageSeen = ({ isRead, isSender }: MessageSeenProps) => {
       // Clean up the observer
       observer.disconnect();
     };
-  }, [sortedMessages, isTabVisible, app.currentChatId, isSender]);
+  }, [sortedMessages, isTabVisible, app.currentRoomId, isSender]);
 
   return isSender && <p className='text-sm'>{isRead ? 'Seen' : 'Not Seen'}</p>;
 };

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -69,7 +69,7 @@ const NavBar = () => {
   const fullscreenPages = ['/founduser'];
 
   const hideNavbar = useMemo(
-    () => fullscreenPages.includes(location) && app.currentChatId,
+    () => fullscreenPages.includes(location) && app.currentRoomId,
     [location, app]
   );
 

diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
@@ -48,11 +48,11 @@ const PageWrapper = ({ children }: ProviderType) => {
   }, [isLoggedIn, router]);
 
   useEffect(() => {
-    const onRestoreChat = ({ chats, currentChatId }: any) => {
+    const onRestoreChat = ({ chats, currentRoomId }: any) => {
       Object.values(chats).forEach((chat: any) => {
         createChat(chat.id, chat.userIds, chat.messages, chat.createdAt);
       });
-      endSearch(currentChatId);
+      endSearch(currentRoomId);
     };
 
     socket?.on(events.NEW_EVENT_CHAT_RESTORE, onRestoreChat);

diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
@@ -102,10 +102,10 @@ export const AppProvider = ({ children }: ProviderType) => {
     });
   }
 
-  function endSearch(currentChatId: string | null = null): undefined {
+  function endSearch(currentRoomId: string | null = null): undefined {
     dispatch({
       type: 'STOP_SEARCHING',
-      payload: { currentChatId },
+      payload: { currentRoomId },
     });
   }
 

diff --git a/src/context/ChatContext.tsx b/src/context/ChatContext.tsx
@@ -83,39 +83,39 @@ export const ChatProvider = ({ children }: ProviderType) => {
       });
     },
     createChat: (
-      chatId: string,
+      roomId: string,
       userIds: [string, string],
       messages: MessageIdType = {},
       createdAt?: Date
     ): any => {
       try {
         dispatch({
           type: 'CREATE_CHAT',
-          payload: { chatId, userIds, messages, createdAt },
+          payload: { roomId, userIds, messages, createdAt },
         });
-        console.log('context', { chatId, userIds, messages, createdAt });
-        return { chatId, userIds };
+        console.log('context', { roomId, userIds, messages, createdAt });
+        return { roomId, userIds };
       } catch (error) {
         console.error('Error creating chat:', error);
         return { error };
       }
     },
-    removeMessage: (id: string, chatId: string) => {
+    removeMessage: (id: string, roomId: string) => {
       dispatch({
         type: 'REMOVE_MESSAGE',
-        payload: { id, room: chatId },
+        payload: { id, roomId },
       });
     },
-    receiveMessage: (id: string, chatId: string) => {
+    receiveMessage: (id: string, roomId: string) => {
       dispatch({
         type: 'RECEIVE_MESSAGE',
-        payload: { id, room: chatId },
+        payload: { id, roomId },
       });
     },
-    closeChat: (chatId: string) => {
+    closeChat: (roomId: string) => {
       dispatch({
         type: 'CLOSE_CHAT',
-        payload: { chatId },
+        payload: { roomId },
       });
     },
     closeAllChats: () => {