45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import useTitle from "../../utils/hooks/TitleHook";
|
|
import React from "react";
|
|
import {useNavigate} from "react-router";
|
|
import {NoButton} from "../components/Button";
|
|
|
|
const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
|
|
|
|
const Rooms = () => {
|
|
|
|
useTitle('Mau-Mau Rooms');
|
|
const navigateTo = useNavigate();
|
|
|
|
const [rooms, setRooms] = React.useState<string[]>([]);
|
|
|
|
const handleRoomClick = (room: string) => {
|
|
if (!localStorage.getItem('playerName')){
|
|
localStorage.setItem("playerName", "Mau");
|
|
}
|
|
navigateTo(`/room/${room}`);
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
fetch(ROOM_URL)
|
|
.then(r => r.json())
|
|
.then(data => setRooms(data));
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1 className={"mau"}>Rooms</h1>
|
|
<ul>
|
|
{
|
|
rooms.map((room) => {
|
|
return <li key={room}>
|
|
<NoButton onClick={() => handleRoomClick(room)}>{room}</NoButton>
|
|
</li>
|
|
})
|
|
}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Rooms;
|