Overnap

handleUpdateRoomUser 프로토콜에 맞게 수정

...@@ -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,
......