36 lines
987 B
TypeScript
36 lines
987 B
TypeScript
|
import { useWaste } from '../store'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
status: 'disconnected' | 'connecting' | 'connected'
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Onboarding({ status }: Props) {
|
||
|
|
const { send } = useWaste()
|
||
|
|
|
||
|
|
const label = status === 'connecting'
|
||
|
|
? 'Connecting to daemon…'
|
||
|
|
: 'Waiting for daemon — is waste-daemon running?'
|
||
|
|
|
||
|
|
function joinNetwork(e: React.FormEvent<HTMLFormElement>) {
|
||
|
|
e.preventDefault()
|
||
|
|
const form = e.currentTarget
|
||
|
|
const name = (form.elements.namedItem('network') as HTMLInputElement).value.trim()
|
||
|
|
if (!name) return
|
||
|
|
send({ type: 'join_network', network_name: name })
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="onboarding">
|
||
|
|
<h1>waste</h1>
|
||
|
|
<p className="status">{label}</p>
|
||
|
|
|
||
|
|
{status === 'connected' && (
|
||
|
|
<form onSubmit={joinNetwork} className="join-form">
|
||
|
|
<input name="network" placeholder="network name" autoComplete="off" autoFocus />
|
||
|
|
<button type="submit">Join</button>
|
||
|
|
</form>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|