채팅방 초대 기능 구현 #118
채팅방 초대 기능 구현 #118
Conversation
| console.error(error); | ||
| } | ||
| }; | ||
|
|
||
| export const setUnCheckedMsg0 = async (chatDocumentId: string, userDocumentId: string) => { |
There was a problem hiding this comment.
언젠간 프론트에서도 api를 라우터별로 나누면 찾기 좋을 것 같네요 fetch해서 받아오는 interface도 명시해주면 재사용이 쉬울텐데 뭔가 대대적인 변경이 있어야 할 것 같아서 두려운건 어쩔 수 없네요.. ㅜ
There was a problem hiding this comment.
리팩토링 이슈에도 제가 올렸던것 같은데 저도 api 파일이 좀 커진것 같아서 나누면 좋겠다는 생각을 했습니다 !!
| @@ -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 }], | |||
There was a problem hiding this comment.
데이터를 받는 쪽에서 isLoggedin 때문에 문제가 생기지 않는다면
participantsInfo: [...selectedUserList, { ...user }] 도 괜찮을 것 같네요!
There was a problem hiding this comment.
앗... 이제보니 그렇네요 !! 고치겠습니다
다시 확인해보니 userDocumentId, userName, profileUrl을 그대로 넣어줘서 상태로 사용하는 로직이 있어서 isLoggedin 때문에 안될것 같아요...ㅠㅠ 아쉽네요 뭔가...
| export function chatReducer(state: any, action: any): any { | ||
| const { type, payload } = action; | ||
|
|
||
| switch (type) { | ||
| case 'ADD_CHATTING_LOG': { | ||
| const { chatLog } = payload; | ||
| const newChattingLog = deepCopy(state.chattingLog); | ||
| newChattingLog.push(chatLog); | ||
|
|
||
| return { ...state, chattingLog: newChattingLog }; | ||
| } | ||
|
|
||
| case 'UPDATE': { | ||
| const { responseChattingLog, user, participantsInfo } = payload; |
There was a problem hiding this comment.
reducer의 액션 네임을 보고 어떠한 역할인지 바로 알 수 있어서 가독성이 좋아진 것 것 같습니다! 다만 any 타입이 많아서 실제로 데이터가 어떠한 구조인지 따라가기가 쉽지는 않네요ㅜ
There was a problem hiding this comment.
저도 any 사용한 부분 리팩토링의 필요성을 간절하게 느끼고 있습니다 ㅠㅠ
빠른 시일 내에 개선해보도록 할게요 !!
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋ reducer 도입하다가 에러가 너무떠서 급한 마음에 any를 넣었네요....
| setChattingLog(res.chattingLog.map((chat: any) => { | ||
| if (chat.userDocumentId === user.userDocumentId) { | ||
| return ({ | ||
| message: chat.message, | ||
| userDocumentId: chat.userDocumentId, | ||
| profileUrl: user.profileUrl, | ||
| userName: user.userName, | ||
| date: makeDateToHourMinute(new Date(chat.date)), | ||
| }); | ||
| } | ||
| const userData = location.state.participantsInfo.filter((userInfo: any) => userInfo.userDocumentId === chat.userDocumentId); | ||
| return ({ | ||
| message: chat.message, | ||
| userDocumentId: chat.userDocumentId, | ||
| profileUrl: userData[0].profileUrl, | ||
| userName: userData[0].userName, | ||
| date: makeDateToHourMinute(new Date(chat.date)), | ||
| }); | ||
| })); | ||
| dispatch({ type: 'UPDATE', payload: { responseChattingLog: res.chattingLog, participantsInfo: location.state.participantsInfo, user } }); |
There was a problem hiding this comment.
이 부분을 빼내기 위해 reducer를 사용했어요 !
성빈님이 구현해주셨습니다 :)
There was a problem hiding this comment.
코드를 보고 reducer를 이해하게 되었습니다. 이런식으로 사용하면 좋군요!
개요
작업사항
변경로직
변경후
2021-11-23.8.30.43.mov
2021-11-23.9.05.34.mov
2021-11-23.9.06.50.mov
2021-11-24.12.04.51.mov
사용방법
기타
closed나 초대하는 기능에서 다른 사람에게는 실시간으로 잘 가는데 자기자신에게는 실시간으로 보낸 메세지가 확인이 안되네요... 수정하겠습니다>> 해결 했습니다 :)