-
Notifications
You must be signed in to change notification settings - Fork 0
/
hire.js
109 lines (100 loc) · 2.92 KB
/
hire.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {
Form,
Select,
InputNumber,
Input,
Radio,
Switch,
Slider,
Button,
Layout,
Menu,
Breadcrumb,
Cascader,
Table,
Tag,
Space,
DatePicker,
TreeSelect
} from 'antd'
import Head from 'next/head'
import {useRouter} from 'next/router'
import Link from 'next/link'
import {createEmp,updateEmp,deleteEmp,deleteAllEmp} from '../../utils/fetch_fun'
import {useState, useEffect, useReducer} from 'react'
const { Header, Footer, Content } = Layout;
const FormItem = Form.Item
const Option = Select.Option
export default function Hire(props) {
const router = useRouter()
const [body, setBody ] = useState({First:'',Last:'',Act:'',Date:''})
// NOTE: line:94 if any of the form's inputs are blank, Hire button is disabled
function handleChange(value) {
setBody({...body,Act:value})
}
function changeDate(date, dateString) {
setBody({...body,Date:dateString})
}
return (
<Layout className="layout">
<Head>
<title>Postem</title>
</Head>
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['3']}>
<Menu.Item key="1" >
<Link href="/">
<a> Postem </a>
</Link>
</Menu.Item>
<Menu.Item key="2">
<Link href="/employees">
<a> Employees </a>
</Link>
</Menu.Item>
<Menu.Item key="3" >
<Link href="/employees/hire">
<a> Hire </a>
</Link>
</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}/>
<div className="site-layout-content">
<Form labelCol={{ span: 4 }}
wrapperCol={{ span: 14 }}
layout="horizontal"
>
<Form.Item label="First name">
<Input onChange={(e)=>setBody({...body,First:e.target.value})}/>
</Form.Item>
<Form.Item label="Last name">
<Input onChange={(e)=>setBody({...body,Last:e.target.value})}/>
</Form.Item>
<Form.Item label="Activity">
<Select onChange={handleChange}>
<Option value="true" >Active</Option>
<Option value="false">Not Active</Option>
</Select>
</Form.Item>
<Form.Item label="DatePicker">
<DatePicker onChange={changeDate} />
</Form.Item>
</Form>
</div>
<Button size="large" type="primary" disabled = {!body.First||!body.Last||!body.Act||!body.Date} onClick={()=>createEmp(body)}>
Hire
</Button>
</Content>
<Footer style={{ textAlign: 'center' }}>
<Link href="/about">
<a>About me.. </a>
</Link>
Powered by PostBoy
</Footer>
</Layout>
)
}
// WHY: why does handle event read value but setState doesnt?