1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46

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>
		</>
	);
};