79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import { Content } from 'antd/lib/layout/layout'
|
|
import React, { FormEvent } from 'react'
|
|
import { useState } from 'react'
|
|
import { useHistory } from 'react-router-dom'
|
|
import { createClient } from '../api'
|
|
import settings from '../settings'
|
|
|
|
export const Dashboard = () => {
|
|
const history = useHistory()
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [name, setName] = useState('')
|
|
const [email, setEmail] = useState('')
|
|
const [phone, setPhone] = useState('')
|
|
|
|
const handleReset = () => {
|
|
//
|
|
setName('')
|
|
setEmail('')
|
|
setPhone('')
|
|
}
|
|
|
|
const handleSubmit = async (e: FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (phone.length < 10) {
|
|
// helpful message
|
|
setError('Phone number needs to be a length of at least 10')
|
|
return
|
|
}
|
|
|
|
if (settings.env === 'jank') {
|
|
history.push(`/sessions/${phone}`)
|
|
return
|
|
}
|
|
|
|
await createClient({ name, email, phone: parseInt(phone) })
|
|
history.push(`/sessions/${phone}`)
|
|
}
|
|
|
|
return (
|
|
<Content>
|
|
<h1>Dashboard</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<label htmlFor="name">
|
|
Name:
|
|
<input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
name="name"
|
|
/>
|
|
</label>
|
|
<label htmlFor="email">
|
|
Email:
|
|
<input
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
type="email"
|
|
name="email"
|
|
/>
|
|
</label>
|
|
<label htmlFor="phone">
|
|
Phone:
|
|
<input
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
type="tel"
|
|
name="phone"
|
|
/>
|
|
</label>
|
|
<button type="submit">Start Session</button>
|
|
<button type="button" onClick={handleReset}>
|
|
Reset
|
|
</button>
|
|
{error && <p className="error">{error}</p>}
|
|
</form>
|
|
</Content>
|
|
)
|
|
}
|