12. Handle user create

src/components/Users/Users.css

@@ -2,6 +2,10 @@
 .normal {
 }
 
+.create {
+  margin-bottom: 1.5em;
+}
+
 .operation a {
   margin: 0 .5em;
 }

src/components/Users/Users.js

@@ -1,6 +1,6 @@
 import React from 'react';
 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';
@@ -28,6 +28,13 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
     });
   }
 
+  function createHandler(values) {
+    dispatch({
+      type: 'users/create',
+      payload: values,
+    });
+  }
+
   const columns = [
     {
       title: 'Name',
@@ -64,6 +71,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
           columns={columns}
           dataSource={dataSource}

src/models/users.js

@@ -24,13 +24,19 @@ export default {
         },
       });
     },
-    *remove({ payload: id }, { call, put, select }) {
+    *remove({ payload: id }, { call, put }) {
       yield call(usersService.remove, id);
-      const page = yield select(state => state.users.page);
-      yield put({ type: 'fetch', payload: { page } });
+      yield put({ type: 'reload' });
     },
-    *patch({ payload: { id, values } }, { call, put, select }) {
+    *patch({ payload: { id, values } }, { call, put }) {
       yield call(usersService.patch, id, values);
+      yield put({ type: 'reload' });
+    },
+    *create({ payload: values }, { call, put }) {
+      yield call(usersService.create, values);
+      yield put({ type: 'reload' });
+    },
+    *reload(action, { put, select }) {
       const page = yield select(state => state.users.page);
       yield put({ type: 'fetch', payload: { page } });
     },

src/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),
+  });
+}