Overnap

(WIP) 방 목록 컴포넌트 추가

......@@ -2,6 +2,7 @@ import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { socket, SocketProvider } from './SocketContext';
import { Login } from './Login';
import { Rooms } from './Rooms';
const App: React.FC = () => {
return (
......@@ -9,7 +10,7 @@ const App: React.FC = () => {
<Router>
<Switch>
<Route exact path='/' component={Login}/>
<Route path='/rooms'></Route>
<Route path='/rooms' component={Rooms}></Route>
<Route path='/:roomId'></Route>
</Switch>
</Router>
......
import React, { useContext, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import SocketContext from './SocketContext';
interface room {
uuid: string;
name: string;
currentUsers: number;
maxUsers: number;
}
export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
const socket = useContext(SocketContext);
const [ rooms, setRooms ] = useState<room[]>([]);
useEffect(() => {
socket.emit('room_list', ({ ok } : { ok: boolean }) => {
if (ok) {
history.push('/rooms');
} else {
console.error('login error!'); // TODO: 팝업 에러?
}
}); // TODO: interval마다 emit하거나 새로고침 버튼을 만들자
// socket.on('')
}, []);
return (
<div>
<header>header header</header>
<div className='flex items-center'>
<div>room test</div>
</div>
<footer>footer footer</footer>
</div>
)
}
\ No newline at end of file