Overnap

RoomData 핸들링을 RoomInfo에서 Room으로 옮김

......@@ -4,74 +4,11 @@ import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
import { RoomData, UpdateRoomUser } from './types';
interface RoomInfoLocation {
state: { roomData: RoomData }
interface RoomInfoProps {
roomData: RoomData;
}
export const RoomInfo: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const location: RoomInfoLocation = useLocation();
const [ roomData, setRoomData ] = useState<RoomData>({
// 기본값
uuid: '0',
name: 'loading...',
maxUsers: 9,
users: []
});
const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
const data = rawMessage.message as UpdateRoomUser;
console.log(data);
if (data.state == 'removed') {
const newUsers = roomData.users;
const index = newUsers.indexOf(data.user);
if (index < 0) {
console.log('존재하지 않는 유저를 제거 시도');
} else {
newUsers.splice(index, 1);
}
setRoomData({
...roomData,
users: newUsers
});
} else if (data.state == 'added') {
setRoomData({
...roomData,
users: [data.user, ...roomData.users]
});
}
}
}, [roomData]);
useEffect(() => {
socket.on('msg', handleUpdateRoomUser);
return () => {
socket.off('msg', handleUpdateRoomUser);
}
}, [roomData]);
useEffect(() => {
// 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
if (location.state === undefined) {
history.push('/');
return;
}
setRoomData(location.state.roomData);
return () => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LEAVE,
message: ''
}
socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
}
}, [])
export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
return (
<div className='m-3 w-5/6 flex items-center place-content-between'>
<div>{roomData.name}</div>
......
import React, { useContext } from 'react';
import { useLocation } from 'react-router';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import { Main } from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import { Canvas } from '../components/room/Canvas';
import { Chat } from '../components/room/Chat';
import { RoomInfo } from '../components/room/RoomInfo';
import { RoomData, UpdateRoomUser } from '../components/room/types';
import SocketContext from '../contexts/SocketContext';
interface RoomLocation {
state: { roomData: RoomData }
}
export const Room: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const location: RoomLocation = useLocation();
const [ roomData, setRoomData ] = useState<RoomData>({
// 기본값
uuid: '0',
name: 'loading...',
maxUsers: 9,
users: []
});
const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
const data = rawMessage.message as UpdateRoomUser;
console.log(data);
if (data.state == 'removed') {
const newUsers = roomData.users;
const index = newUsers.indexOf(data.user);
if (index < 0) {
console.log('존재하지 않는 유저를 제거 시도');
} else {
newUsers.splice(index, 1);
}
setRoomData({
...roomData,
users: newUsers
});
} else if (data.state == 'added') {
setRoomData({
...roomData,
users: [data.user, ...roomData.users]
});
}
}
}, [roomData]);
useEffect(() => {
socket.on('msg', handleUpdateRoomUser);
return () => {
socket.off('msg', handleUpdateRoomUser);
}
}, [roomData]);
useEffect(() => {
// 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
if (location.state === undefined) {
history.push('/');
return;
}
setRoomData(location.state.roomData);
return () => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LEAVE,
message: ''
}
socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
}
}, [])
return (
<Main>
<RoomInfo />
<RoomInfo roomData={roomData}/>
<div className='w-full flex'>
<Canvas />
<Chat />
......