🐛 새로운 채팅방 생성시 생기는 버그 해결 boostcampwm-2021#116

client/src/components/chat/chat-new-header.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHistory } from 'react-router-dom';
 
+import useChatSocket from '@utils/chat-socket';
 import { ChatHeaderStyle } from '@components/chat/style';
 import { postChatRoom } from '@api/index';
 import selectedUserType from '@atoms/chat-selected-users';
@@ -39,6 +40,7 @@ const DoneBtn = () => {
   const [selectedUserList, setSelectedUserList] = useRecoilState(selectedUserType);
   const user = useRecoilValue(userType);
   const history = useHistory();
+  const chatSocket = useChatSocket();
 
   const makeChatRoom = () => {
     if (selectedUserList.length === 0) return;
@@ -49,6 +51,10 @@ const DoneBtn = () => {
           state: { participantsInfo: selectedUserList },
         });
         setSelectedUserList([]);
+        chatSocket.emit('chat:makeChat', {
+          chatDocumentId: res.chatRoomId,
+          participantsInfo: [...selectedUserList, { userDocumentId: user.userDocumentId, userName: user.userName, profileUrl: user.profileUrl }],
+        });
       });
   };
 

client/src/views/chat-rooms-view.tsx

@@ -64,6 +64,13 @@ function ChatRoomsViews() {
     });
   };
 
+  const newChatRooms = (payload: any) => {
+    const { chatDocumentId, participantsInfo } = payload;
+    setChatRooms((oldRooms: any) => [{
+      chatDocumentId, participants: participantsInfo, lastMsg: '', recentActive: new Date(), unCheckedMsg: 0,
+    }, ...oldRooms]);
+  };
+
   useEffect(() => {
     getChatRooms(userDocumentId)
       .then((res: any) => {
@@ -76,6 +83,7 @@ function ChatRoomsViews() {
     if (!socket) return;
     socket.emit('chat:viewJoin', userDocumentId);
     socket.on('chat:alertMsg', setNewRooms);
+    socket.on('chat:makeChat', newChatRooms);
   }, [socket]);
 
   if (loading) return (<LoadingSpinner />);

server/src/sockets/chat.ts

@@ -1,3 +1,4 @@
+/* eslint-disable array-callback-return */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable max-len */
 import { Socket } from 'socket.io';
@@ -32,9 +33,17 @@ export default function chatEventHandler(socket : Socket) {
     });
   };
 
+  const makeChatHandler = ({ participantsInfo, chatDocumentId }: any) => {
+    participantsInfo.map((user: any) => {
+      const newParticipants = participantsInfo.filter((participant: any) => participant.userDocumentId !== user.userDocumentId);
+      socket.to(user.userDocumentId).emit('chat:makeChat', { chatDocumentId, participantsInfo: newParticipants });
+    });
+  };
+
   socket.on('chat:roomJoin', chatRoomJoinHandler);
   socket.on('chat:viewJoin', chatViewJoinHandler);
   socket.on('chat:sendMsg', sendMsgHandler);
   socket.on('chat:leave', chatLeaveHandler);
   socket.on('chat:alertMsg', alertMsgHandler);
+  socket.on('chat:makeChat', makeChatHandler);
 }