11. Handle user edit

src/components/Users/UserModal.css

@@ -0,0 +1,3 @@
+
+.normal {
+}

src/components/Users/UserModal.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import { Modal, Form, Input } from 'antd';
+import styles from './UserModal.css';
+
+const FormItem = Form.Item;
+
+class UserEditModal extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  showModelHandler = (e) => {
+    if (e) e.stopPropagation();
+    this.setState({
+      visible: true,
+    });
+  };
+
+  hideModelHandler = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  okHandler = () => {
+    const { onOk } = this.props;
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        onOk(values);
+        this.hideModelHandler();
+      }
+    });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    const { name, email, website } = this.props.record;
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
+
+    return (
+      <span>
+        <span onClick={this.showModelHandler}>
+          { children }
+        </span>
+        <Modal
+          title="Edit User"
+          visible={this.state.visible}
+          onOk={this.okHandler}
+          onCancel={this.hideModelHandler}
+        >
+          <Form horizontal onSubmit={this.okHandler}>
+            <FormItem
+              {...formItemLayout}
+              label="Name"
+            >
+              {
+                getFieldDecorator('name', {
+                  initialValue: name,
+                })(<Input />)
+              }
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="Email"
+            >
+              {
+                getFieldDecorator('email', {
+                  initialValue: email,
+                })(<Input />)
+              }
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="Website"
+            >
+              {
+                getFieldDecorator('website', {
+                  initialValue: website,
+                })(<Input />)
+              }
+            </FormItem>
+          </Form>
+        </Modal>
+      </span>
+    );
+  }
+}
+
+export default Form.create()(UserEditModal);

src/components/Users/Users.js

@@ -4,6 +4,7 @@ import { Table, Pagination, Popconfirm } from 'antd';
 import { routerRedux } from 'dva/router';
 import styles from './Users.css';
 import { PAGE_SIZE } from '../../constants';
+import UserModal from './UserModal';
 
 function Users({ dispatch, list: dataSource, loading, total, page: current }) {
   function deleteHandler(id) {
@@ -20,6 +21,13 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
     }));
   }
 
+  function editHandler(id, values) {
+    dispatch({
+      type: 'users/patch',
+      payload: { id, values },
+    });
+  }
+
   const columns = [
     {
       title: 'Name',
@@ -40,10 +48,12 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
     {
       title: 'Operation',
       key: 'operation',
-      render: (text, { id }) => (
+      render: (text, record) => (
         <span className={styles.operation}>
-          <a href="">Edit</a>
-          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, id)}>
+          <UserModal record={record} onOk={editHandler.bind(null, record.id)}>
+            <a>Edit</a>
+          </UserModal>
+          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, record.id)}>
             <a href="">Delete</a>
           </Popconfirm>
         </span>

src/models/users.js

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

src/services/users.js

@@ -10,3 +10,10 @@ export function remove(id) {
     method: 'DELETE',
   });
 }
+
+export function patch(id, values) {
+  return request(`/api/users/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(values),
+  });
+}