refactor: consistent name for room

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 ."
   }
-}
+}

src/components/Chat.tsx

@@ -101,23 +101,23 @@ const Chat = () => {
     inputRef.current.value = '';
     setEditing({ isediting: false, messageID: '' });
     socket?.timeout(10000).emit(events.NEW_EVENT_TYPING, {
-      chatId: app.currentChatId,
+      room: app.currentroom,
       isTyping: false,
     });
   };
 
   const sortedMessages = useMemo(() => {
-    if (!app.currentChatId) {
+    if (!app.currentroom) {
       return;
     }
-    return Object.values(state[app.currentChatId]?.messages ?? {})?.sort(
+    return Object.values(state[app.currentroom]?.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.currentroom]);
 
   const doSend = async ({
     senderId,
@@ -181,7 +181,7 @@ const Chat = () => {
     e.preventDefault();
 
     socket?.emit(events.NEW_EVENT_TYPING, {
-      chatId: app.currentChatId,
+      room: app.currentroom,
       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,
+          room: app.currentroom,
           newMessage: message as string,
           oldMessage,
         });
 
         updateMessage({
           ...editedMessage,
-          room: app.currentChatId,
+          room: app.currentroom,
           isEdited: true,
         });
       } catch (e) {
@@ -215,7 +215,7 @@ const Chat = () => {
     } else {
       doSend({
         senderId,
-        room: app.currentChatId,
+        room: app.currentroom,
         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,
+        room: app.currentroom,
         isTyping: true,
       });
     }
@@ -292,18 +292,18 @@ const Chat = () => {
 
     const deleteMessageHandler = ({
       id,
-      chatId,
+      room,
     }: {
       id: string;
-      chatId: string;
+      room: string;
     }) => {
-      removeMessage(id, chatId);
+      removeMessage(id, room);
     };
 
     const editMessageHandler = (messageEdited: MessageType) => {
       updateMessage({
         ...messageEdited,
-        room: app.currentChatId,
+        room: app.currentroom,
         isEdited: true,
       });
     };
@@ -314,12 +314,12 @@ const Chat = () => {
 
     const readMessageHandler = ({
       messageId,
-      chatId,
+      room,
     }: {
       messageId: string;
-      chatId: string;
+      room: string;
     }) => {
-      receiveMessage(messageId, chatId);
+      receiveMessage(messageId, room);
     };
 
     // 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.currentroom, socket]);
 
   // this is used to send the notification for inactive chat to the respective user
   // get the last message sent

src/components/Chat/DropDownOption.tsx

@@ -77,7 +77,7 @@ const DropDownOptions = ({
     try {
       const messageDeleted = await deleteMessage({
         id,
-        chatId: gottenMessage.room as string,
+        room: gottenMessage.room as string,
       });
 
       console.log(messageDeleted);

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.currentroom) {
       return;
     }
-    return Object.values(state[app.currentChatId]?.messages ?? {})?.sort(
+    return Object.values(state[app.currentroom]?.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.currentroom]);
 
   useEffect(() => {
     // Initialize Intersection Observer
@@ -42,19 +42,19 @@ const MessageSeen = ({ isRead, isSender }: MessageSeenProps) => {
               ?.getAttribute('id')
               ?.split('-')[1] as string;
 
-            if (!app.currentChatId) {
+            if (!app.currentroom) {
               return;
             }
 
             try {
               seenMessage({
                 messageId,
-                chatId: app.currentChatId,
+                room: app.currentroom,
               });
             } catch (e) {
               return;
             }
-            receiveMessage(messageId, app.currentChatId);
+            receiveMessage(messageId, app.currentroom);
           }
         });
       },
@@ -81,7 +81,7 @@ const MessageSeen = ({ isRead, isSender }: MessageSeenProps) => {
       // Clean up the observer
       observer.disconnect();
     };
-  }, [sortedMessages, isTabVisible, app.currentChatId, isSender]);
+  }, [sortedMessages, isTabVisible, app.currentroom, isSender]);
 
   return isSender && <p className='text-sm'>{isRead ? 'Seen' : 'Not Seen'}</p>;
 };

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.currentroom,
     [location, app]
   );
 

src/components/PageWrapper.tsx

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

src/context/AppContext.tsx

@@ -102,10 +102,10 @@ export const AppProvider = ({ children }: ProviderType) => {
     });
   }
 
-  function endSearch(currentChatId: string | null = null): undefined {
+  function endSearch(currentroom: string | null = null): undefined {
     dispatch({
       type: 'STOP_SEARCHING',
-      payload: { currentChatId },
+      payload: { currentroom },
     });
   }
 

src/context/ChatContext.tsx

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

src/lib/chatHelper.ts

@@ -1,13 +1,13 @@
-import { AppType, ChatIdType, MessageType } from '@/types/types';
+import { AppType, RoomType, MessageType } from '@/types/types';
 import { RefObject } from 'react';
 
-export default (state: ChatIdType, app: AppType) => {
+export default (state: RoomType, app: AppType) => {
   const getMessage = (id: string): MessageType | null => {
-    if (app.currentChatId === null) {
+    if (app.currentroom === null) {
       return null;
     }
 
-    const chatContent = state[app.currentChatId];
+    const chatContent = state[app.currentroom];
 
     if (!chatContent) {
       return null;