@@ -4,35 +4,33 @@ import { useState, type FormEvent } from "react"
44import { Button } from "@/components/ui/button"
55import { Input } from "@/components/ui/input"
66
7+ import { generate as generateName } from 'yet-another-name-generator'
8+
79interface HomeScreenProps {
8- name : string
9- onSetName : ( name : string ) => void
10- onJoin : ( ticket : string ) => void
11- onCreate : ( ) => void
10+ onJoin : ( ticket : string , nickname : string ) => void
11+ onCreate : ( nickname : string ) => void
1212}
1313
14- export default function HomeScreen ( { onJoin, onCreate, name , onSetName } : HomeScreenProps ) {
14+ export default function HomeScreen ( { onJoin, onCreate } : HomeScreenProps ) {
1515 const [ ticket , setTicket ] = useState ( ( ) => {
1616 const url = new URL ( document . location . toString ( ) )
1717 const ticket = url . searchParams . get ( "ticket" )
1818 if ( ticket ?. startsWith ( "chat" ) ) return ticket
1919 return ""
2020 } )
21- // const [channelName, setChannelName] = useState("")
21+
22+ const [ nickname , setNickname ] = useState ( generateName ( ) )
2223
2324 const handleJoin = ( e : FormEvent ) => {
2425 e . preventDefault ( )
2526 if ( ticket . trim ( ) ) {
26- onJoin ( ticket . trim ( ) )
27+ onJoin ( ticket . trim ( ) , nickname )
2728 }
2829 }
2930
3031 const handleCreate = ( e : FormEvent ) => {
3132 e . preventDefault ( )
32- onCreate ( )
33- // if (channelName.trim()) {
34- // onCreate(channelName.trim())
35- // }
33+ onCreate ( nickname )
3634 }
3735
3836 return (
@@ -41,32 +39,22 @@ export default function HomeScreen({ onJoin, onCreate, name, onSetName }: HomeSc
4139 < div >
4240 < h2 className = "text-lg font-semibold mb-2" > Your name</ h2 >
4341 < div className = "flex space-x-2" >
44- < Input value = { name } onChange = { ( e ) => onSetName ( e . target . value ) } placeholder = "Enter your name" />
42+ < Input value = { nickname } onChange = { ( e ) => setNickname ( e . target . value ) } placeholder = "Enter your name" />
4543 </ div >
4644 </ div >
47- { name . length && (
48- < >
49- < form onSubmit = { handleJoin } >
50- < h2 className = "text-lg font-semibold mb-2" > Join Channel</ h2 >
51- < div className = "flex space-x-2" >
52- < Input value = { ticket } onChange = { ( e ) => setTicket ( e . target . value ) } placeholder = "Enter ticket" />
53- < Button type = "submit" > Join</ Button >
54- </ div >
55- </ form >
56- < form onSubmit = { handleCreate } >
57- < h2 className = "text-lg font-semibold mb-2" > Create Channel</ h2 >
58- < div className = "flex space-x-2" >
59- { /* <Input
60- value={channelName}
61- onChange={(e) => setChannelName(e.target.value)}
62- placeholder="Enter channel name"
63- /> */ }
64- < Button type = "submit" > Create</ Button >
65- </ div >
66- </ form >
67-
68- </ >
69- ) }
45+ < form onSubmit = { handleJoin } >
46+ < h2 className = "text-lg font-semibold mb-2" > Join Channel</ h2 >
47+ < div className = "flex space-x-2" >
48+ < Input value = { ticket } onChange = { ( e ) => setTicket ( e . target . value ) } placeholder = "Enter ticket" />
49+ < Button type = "submit" disabled = { ! nickname . length || ! ticket . length } > Join</ Button >
50+ </ div >
51+ </ form >
52+ < form onSubmit = { handleCreate } >
53+ < h2 className = "text-lg font-semibold mb-2" > Create Channel</ h2 >
54+ < div className = "flex space-x-2" >
55+ < Button type = "submit" disabled = { ! nickname . length } > Create</ Button >
56+ </ div >
57+ </ form >
7058 </ div >
7159 </ div >
7260 )
0 commit comments