Showing
1 changed file
with
22 additions
and
19 deletions
| ... | @@ -20,33 +20,36 @@ export const RoomInfo: React.FC = () => { | ... | @@ -20,33 +20,36 @@ export const RoomInfo: React.FC = () => { |
| 20 | users: [] | 20 | users: [] |
| 21 | }); | 21 | }); |
| 22 | 22 | ||
| 23 | - const handleUpdateRoomUser = useCallback((data: UpdateRoomUser) => { | 23 | + const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => { |
| 24 | - if (data.state == 'added') { | 24 | + if (rawMessage.type == MessageType.ROOM_USER_UPDATE) { |
| 25 | - setRoomData({ | 25 | + const data = rawMessage.message as UpdateRoomUser; |
| 26 | - ...roomData, | 26 | + if (data.state == 'added') { |
| 27 | - users: [data.user, ...roomData.users] // TODO: immutable.js로 바꾸면 좋을 듯 | 27 | + setRoomData({ |
| 28 | - }); | 28 | + ...roomData, |
| 29 | - } else if (data.state == 'removed') { | 29 | + users: [data.user, ...roomData.users] // TODO: immutable.js로 바꾸면 좋을 듯 |
| 30 | - const newUsers = roomData.users; | 30 | + }); |
| 31 | - const index = newUsers.indexOf(data.user); | 31 | + } else if (data.state == 'removed') { |
| 32 | - if (index < 0) { | 32 | + const newUsers = roomData.users; |
| 33 | - console.log('존재하지 않는 유저를 제거 시도'); | 33 | + const index = newUsers.indexOf(data.user); |
| 34 | - } else { | 34 | + if (index < 0) { |
| 35 | - newUsers.splice(index, 1); | 35 | + console.log('존재하지 않는 유저를 제거 시도'); |
| 36 | + } else { | ||
| 37 | + newUsers.splice(index, 1); | ||
| 38 | + } | ||
| 39 | + setRoomData({ | ||
| 40 | + ...roomData, | ||
| 41 | + users: newUsers | ||
| 42 | + }); | ||
| 36 | } | 43 | } |
| 37 | - setRoomData({ | ||
| 38 | - ...roomData, | ||
| 39 | - users: newUsers | ||
| 40 | - }); | ||
| 41 | } | 44 | } |
| 42 | }, []); | 45 | }, []); |
| 43 | 46 | ||
| 44 | useEffect(() => { | 47 | useEffect(() => { |
| 45 | setRoomData(location.state.roomData); | 48 | setRoomData(location.state.roomData); |
| 46 | - socket.on(MessageType.ROOM_USER_UPDATE, handleUpdateRoomUser); | 49 | + socket.on('msg', handleUpdateRoomUser); |
| 47 | 50 | ||
| 48 | return () => { | 51 | return () => { |
| 49 | - socket.off(MessageType.ROOM_USER_UPDATE, handleUpdateRoomUser); | 52 | + socket.off('msg', handleUpdateRoomUser); |
| 50 | 53 | ||
| 51 | const rawMessage: RawMessage = { | 54 | const rawMessage: RawMessage = { |
| 52 | type: MessageType.ROOM_LEAVE, | 55 | type: MessageType.ROOM_LEAVE, | ... | ... |
-
Please register or login to post a comment