Builds for
1 pipeline
failed
in
1 minute 33 seconds
handleUpdateRoomUser가 실시간 반영되도록 수정
Showing
1 changed file
with
17 additions
and
11 deletions
... | @@ -23,12 +23,8 @@ export const RoomInfo: React.FC = () => { | ... | @@ -23,12 +23,8 @@ export const RoomInfo: React.FC = () => { |
23 | const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => { | 23 | const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => { |
24 | if (rawMessage.type == MessageType.ROOM_USER_UPDATE) { | 24 | if (rawMessage.type == MessageType.ROOM_USER_UPDATE) { |
25 | const data = rawMessage.message as UpdateRoomUser; | 25 | const data = rawMessage.message as UpdateRoomUser; |
26 | - if (data.state == 'added') { | 26 | + console.log(data); |
27 | - setRoomData({ | 27 | + if (data.state == 'removed') { |
28 | - ...roomData, | ||
29 | - users: [data.user, ...roomData.users] // TODO: immutable.js로 바꾸면 좋을 듯 | ||
30 | - }); | ||
31 | - } else if (data.state == 'removed') { | ||
32 | const newUsers = roomData.users; | 28 | const newUsers = roomData.users; |
33 | const index = newUsers.indexOf(data.user); | 29 | const index = newUsers.indexOf(data.user); |
34 | if (index < 0) { | 30 | if (index < 0) { |
... | @@ -40,24 +36,34 @@ export const RoomInfo: React.FC = () => { | ... | @@ -40,24 +36,34 @@ export const RoomInfo: React.FC = () => { |
40 | ...roomData, | 36 | ...roomData, |
41 | users: newUsers | 37 | users: newUsers |
42 | }); | 38 | }); |
39 | + } else if (data.state == 'added') { | ||
40 | + setRoomData({ | ||
41 | + ...roomData, | ||
42 | + users: [data.user, ...roomData.users] | ||
43 | + }); | ||
43 | } | 44 | } |
44 | } | 45 | } |
45 | - }, []); | 46 | + }, [roomData]); |
46 | 47 | ||
47 | useEffect(() => { | 48 | useEffect(() => { |
48 | - setRoomData(location.state.roomData); | ||
49 | socket.on('msg', handleUpdateRoomUser); | 49 | socket.on('msg', handleUpdateRoomUser); |
50 | - | 50 | + |
51 | return () => { | 51 | return () => { |
52 | socket.off('msg', handleUpdateRoomUser); | 52 | socket.off('msg', handleUpdateRoomUser); |
53 | - | 53 | + } |
54 | + }, [roomData]); | ||
55 | + | ||
56 | + useEffect(() => { | ||
57 | + setRoomData(location.state.roomData); | ||
58 | + | ||
59 | + return () => { | ||
54 | const rawMessage: RawMessage = { | 60 | const rawMessage: RawMessage = { |
55 | type: MessageType.ROOM_LEAVE, | 61 | type: MessageType.ROOM_LEAVE, |
56 | message: '' | 62 | message: '' |
57 | } | 63 | } |
58 | socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {}); | 64 | socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {}); |
59 | } | 65 | } |
60 | - }, []); | 66 | + }, []) |
61 | 67 | ||
62 | return ( | 68 | return ( |
63 | <div className='m-3 w-5/6 flex items-center place-content-between'> | 69 | <div className='m-3 w-5/6 flex items-center place-content-between'> | ... | ... |
-
Please register or login to post a comment