34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { FormEventHandler } from 'react'
|
|
import useMeetingStarted from '../../hooks/useMeetingStarted'
|
|
import { useRoomName } from '../../hooks/useRoomName'
|
|
import './MeetingNameInput.css'
|
|
|
|
function MeetingNameInput(props: { roomName: string; currentUser: string }) {
|
|
const { roomName, updateRoomName, updateAndSubmitRoomName, submitRoomName } = useRoomName()
|
|
const [_, setMeetingStarted] = useMeetingStarted()
|
|
|
|
const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
|
|
updateRoomName(event.target.value)
|
|
event.preventDefault()
|
|
}
|
|
|
|
const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
|
|
submitRoomName()
|
|
setMeetingStarted(true)
|
|
event.preventDefault()
|
|
}
|
|
|
|
console.log('[Rooms] MeetingName input comp')
|
|
return (
|
|
<div className="meeting-name-input">
|
|
<h1>Greetings {props.currentUser}</h1>
|
|
<form onSubmit={onSubmit}>
|
|
<input placeholder="Roomname" type="text" value={roomName} onChange={onInput} />
|
|
<button type="submit">Enter the adventure</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MeetingNameInput
|