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.
69 lines
2.0 KiB
69 lines
2.0 KiB
import { Button, Divider, Form, Input, message, Row, Typography } from 'antd' |
|
import FormItem from 'antd/lib/form/FormItem' |
|
import { Store } from 'antd/lib/form/interface' |
|
import { Content } from 'antd/lib/layout/layout' |
|
import React 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 handleReset = () => {} |
|
|
|
const handleSubmit = async (values: Store) => { |
|
if (values.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: values.name, |
|
email: values.email, |
|
phone: parseInt(values.phone.replace(/\D/g, '')), |
|
}) |
|
|
|
history.push(`/sessions/${client_id}`) |
|
} |
|
|
|
return ( |
|
<Content> |
|
<Typography.Title className="page-head" level={3}> |
|
Dashboard |
|
</Typography.Title> |
|
<Typography.Text> |
|
Enter the name, email and phone number of the subject |
|
</Typography.Text> |
|
<Divider /> |
|
<Form |
|
className="dashboard-form" |
|
onFinish={handleSubmit} |
|
labelCol={{ span: 8 }} |
|
wrapperCol={{ span: 16 }} |
|
> |
|
<FormItem label="name" name="name"> |
|
<Input minLength={3} /> |
|
</FormItem> |
|
<FormItem label="email" name="email"> |
|
<Input type="email" /> |
|
</FormItem> |
|
<FormItem label="phone" name="phone"> |
|
<Input type="tel" minLength={10} /> |
|
</FormItem> |
|
<Row justify="space-between"> |
|
<Button danger onClick={handleReset}> |
|
Reset |
|
</Button> |
|
<Button htmlType="submit" type="primary"> |
|
Start Session |
|
</Button> |
|
</Row> |
|
{error && <p className="error">{error}</p>} |
|
</Form> |
|
</Content> |
|
) |
|
}
|
|
|