@@ -4,35 +4,33 @@ import { useState, type FormEvent } from "react"
4
4
import { Button } from "@/components/ui/button"
5
5
import { Input } from "@/components/ui/input"
6
6
7
+ import { generate as generateName } from 'yet-another-name-generator'
8
+
7
9
interface 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
12
12
}
13
13
14
- export default function HomeScreen ( { onJoin, onCreate, name , onSetName } : HomeScreenProps ) {
14
+ export default function HomeScreen ( { onJoin, onCreate } : HomeScreenProps ) {
15
15
const [ ticket , setTicket ] = useState ( ( ) => {
16
16
const url = new URL ( document . location . toString ( ) )
17
17
const ticket = url . searchParams . get ( "ticket" )
18
18
if ( ticket ?. startsWith ( "chat" ) ) return ticket
19
19
return ""
20
20
} )
21
- // const [channelName, setChannelName] = useState("")
21
+
22
+ const [ nickname , setNickname ] = useState ( generateName ( ) )
22
23
23
24
const handleJoin = ( e : FormEvent ) => {
24
25
e . preventDefault ( )
25
26
if ( ticket . trim ( ) ) {
26
- onJoin ( ticket . trim ( ) )
27
+ onJoin ( ticket . trim ( ) , nickname )
27
28
}
28
29
}
29
30
30
31
const handleCreate = ( e : FormEvent ) => {
31
32
e . preventDefault ( )
32
- onCreate ( )
33
- // if (channelName.trim()) {
34
- // onCreate(channelName.trim())
35
- // }
33
+ onCreate ( nickname )
36
34
}
37
35
38
36
return (
@@ -41,32 +39,22 @@ export default function HomeScreen({ onJoin, onCreate, name, onSetName }: HomeSc
41
39
< div >
42
40
< h2 className = "text-lg font-semibold mb-2" > Your name</ h2 >
43
41
< 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" />
45
43
</ div >
46
44
</ 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 >
70
58
</ div >
71
59
</ div >
72
60
)
0 commit comments