Overnap

방 목록의 배열을 방 정보 컴포넌트에 매핑 및 테스트

......@@ -10,6 +10,24 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
const socket = useContext(SocketContext);
const [ rooms, setRooms ] = useState<Room[]>([]);
// for test
const testingRoom1: Room = {
uuid: '23525',
name: 'Hello World!',
currentUsers: 3,
maxUsers: 4
}
const testingRoom2: Room = {
uuid: '235252134',
name: 'Bonjour World!',
currentUsers: 6,
maxUsers: 6
}
useEffect(() => {
setRooms([testingRoom1, testingRoom2]);
// refreshRooms()
}, []);
const refreshRooms = () => {
socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
if (response.ok) {
......@@ -21,14 +39,12 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
});
}
useEffect(refreshRooms, []);
// useEffect(refreshRooms, []);
return (
<div className='flex flex-col items-center w-screen h-screen'>
<div className='mt-auto w-screen flex flex-col items-center'>
<RoomInfo name='테스트테스트' currentUsers={3} maxUsers={9} uuid='234234'></RoomInfo>
<RoomInfo name='테스트테스트' currentUsers={5} maxUsers={9} uuid='234234'></RoomInfo>
<RoomInfo name='테스트테스트' currentUsers={9} maxUsers={9} uuid='234234'></RoomInfo>
{rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
</div>
<Footer />
</div>
......