You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
import { Button, Divider, message, PageHeader } from 'antd' |
|
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' |
|
|
|
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 |
|
message.error('Check all fields!') |
|
setError('Phone number needs to be a length of at least 10') |
|
return |
|
} |
|
|
|
const client_id = await createClient({ |
|
name, |
|
email, |
|
phone: parseInt(phone), |
|
}) |
|
|
|
history.push(`/sessions/${client_id}`) |
|
} |
|
|
|
return ( |
|
<Content> |
|
<PageHeader |
|
title="Dashboard" |
|
subTitle="Enter the name, email and phone number of the subject" |
|
></PageHeader> |
|
<Divider /> |
|
<form onSubmit={handleSubmit}> |
|
<label htmlFor="name"> |
|
Name: |
|
<input |
|
minLength={3} |
|
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 danger onClick={handleReset}> |
|
Reset |
|
</Button> |
|
<Button htmlType="submit" type="primary"> |
|
Start Session |
|
</Button> |
|
{error && <p className="error">{error}</p>} |
|
</form> |
|
</Content> |
|
) |
|
}
|
|
|