🔧

client/src/pages/Dashboard.tsx

@@ -1,19 +1,27 @@
 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'
 
+type FormData = {
+  name: string
+  email: string
+  phone: string
+}
+
 export const Dashboard = () => {
   const history = useHistory()
   const [error, setError] = useState<string | null>(null)
+  const [form] = Form.useForm<FormData>()
 
-  const handleReset = () => {}
+  const handleReset = () => {
+    form.resetFields()
+  }
 
-  const handleSubmit = async (values: Store) => {
+  const handleSubmit = async (values: FormData) => {
     if (values.phone.length < 10) {
       // helpful message
       message.error('Check all fields!')
@@ -40,6 +48,7 @@ export const Dashboard = () => {
       </Typography.Text>
       <Divider />
       <Form
+        form={form}
         className="dashboard-form"
         onFinish={handleSubmit}
         labelCol={{ span: 8 }}