11. Handle user create

src/pages/users/components/Users.css

@@ -5,3 +5,7 @@
 .operation a {
   margin: 0 .5em;
 }
+
+.create {
+  margin: 1.5em 0;
+}

src/pages/users/components/Users.js

@@ -1,5 +1,5 @@
 import { connect } from 'dva';
-import { Table, Pagination, Popconfirm } from 'antd';
+import { Table, Pagination, Popconfirm, Button } from 'antd';
 import { routerRedux } from 'dva/router';
 import styles from './Users.css';
 import { PAGE_SIZE } from '../constants';
@@ -27,6 +27,13 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
     });
   }
 
+  function createHandler(values) {
+    dispatch({
+      type: 'users/create',
+      payload: values,
+    });
+  }
+
   const columns = [
     {
       title: 'Name',
@@ -63,6 +70,11 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
   return (
     <div className={styles.normal}>
       <div>
+        <div className={styles.create}>
+          <UserModal record={{}} onOk={createHandler}>
+            <Button type="primary">Create User</Button>
+          </UserModal>
+        </div>
         <Table
           loading={loading}
           columns={columns}

src/pages/users/models/users.js

@@ -34,6 +34,11 @@ export default {
       const page = yield select(state => state.users.page);
       yield put({ type: 'fetch', payload: { page } });
     },
+    *create({ payload: values }, { call, put, select }) {
+      yield call(usersService.create, values);
+      const page = yield select(state => state.users.page);
+      yield put({ type: 'fetch', payload: { page } });
+    },
   },
   subscriptions: {
     setup({ dispatch, history }) {

src/pages/users/services/users.js

@@ -17,3 +17,10 @@ export function patch(id, values) {
     body: JSON.stringify(values),
   });
 }
+
+export function create(values) {
+  return request('/api/users', {
+    method: 'POST',
+    body: JSON.stringify(values),
+  });
+}