47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
|
import {useState} from 'react';
|
||
|
|
|
||
|
|
export default function JoinRoomForm({socket} : {socket: SocketIOClient.Socket}) {
|
||
|
|
const [name, setName] = useState('');
|
||
|
|
const [password, setPassword] = useState('');
|
||
|
|
const [waiting, setWaiting] = useState(false);
|
||
|
|
const [error, setError] = useState('');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<p>Join Room</p>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
maxLength={15}
|
||
|
|
placeholder="Room name..."
|
||
|
|
value={name}
|
||
|
|
onChange={(e) => setName(e.target.value)}
|
||
|
|
disabled={waiting}
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
maxLength={15}
|
||
|
|
placeholder="Password..."
|
||
|
|
value={password}
|
||
|
|
onChange={(e) => setPassword(e.target.value)}
|
||
|
|
disabled={waiting}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setWaiting(true);
|
||
|
|
socket.emit('joinRoom', name, password);
|
||
|
|
socket.once('joinRoomRes', (data: {success: boolean; error?: string}) => {
|
||
|
|
setWaiting(false);
|
||
|
|
if (!data.success)
|
||
|
|
setError(data.error!);
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
disabled={!name || waiting}
|
||
|
|
>
|
||
|
|
Join
|
||
|
|
</button>
|
||
|
|
{waiting && 'Joining room...'}
|
||
|
|
<p style={{color: 'red'}}>{error}</p>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|