From 8bd76c71f3f79063284ee7f04b061f6a8d8b58d3 Mon Sep 17 00:00:00 2001
From: JobbyM <songzhipengmune@gmail.com>
Date: Wed, 26 Apr 2017 12:53:10 +0800
Subject: [PATCH] =?UTF-8?q?Step=206.=20=E6=B7=BB=E5=8A=A0=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E8=AE=A9=E7=94=A8=E6=88=B7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=B1=95=E7=8E=B0=E5=87=BA=E6=9D=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Users/Users.css |  7 ++++
 src/components/Users/Users.js  | 71 ++++++++++++++++++++++++++++++++++
 src/constants.js               |  2 +
 src/models/users.js            | 16 ++++++--
 src/routes/Users.js            |  9 ++---
 src/services/users.js          |  5 ++-
 6 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Users/Users.css
 create mode 100644 src/components/Users/Users.js
 create mode 100644 src/constants.js

diff --git a/src/components/Users/Users.css b/src/components/Users/Users.css
new file mode 100644
index 0000000..e75e7e0
--- /dev/null
+++ b/src/components/Users/Users.css
@@ -0,0 +1,7 @@
+
+.normal {
+}
+
+.operation a {
+  margin: 0 .5em;
+}
diff --git a/src/components/Users/Users.js b/src/components/Users/Users.js
new file mode 100644
index 0000000..5b1238d
--- /dev/null
+++ b/src/components/Users/Users.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { connect } from 'dva';
+import { Table, Pagination, Popconfirm } from 'antd';
+import styles from './Users.css';
+import { PAGE_SIZE } from '../../constants';
+
+function Users({ list: dataSource, total, page: current }) {
+  function deleteHandler(id){
+    console.warn(`TODO: ${id}`);
+  }
+
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: text => <a href="">{text}</a>
+    },
+    {
+      title: 'Email',
+      dataIndex: 'email',
+      key: 'email',
+    },
+    {
+      title: 'Website',
+      dataIndex: 'website',
+      key: 'website',
+    },
+    {
+      title: 'Operation',
+      key: 'operation',
+      render: (text, { id }) => (
+        <span className={styles.operation}>
+          <a href="">Edit</a>
+          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, id)}>
+            <a href="">Delete</a>
+          </Popconfirm>
+        </span>
+      ),
+    },
+  ]
+
+  return (
+    <div className={styles.normal}>
+      <div>
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          rowKey={record => record.id}
+          pagination={false}
+        />
+        <Pagination
+          className="ant-table-pagination"
+          total={total}
+          current={current}
+          pageSize={PAGE_SIZE}
+        />
+      </div>
+    </div>
+  );
+}
+
+function mapStateToProps(state){
+  const { list, total, page } = state.users
+  return {
+    list,
+    total,
+    page,
+  }
+}
+export default connect(mapStateToProps)(Users);
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..bfb4721
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,2 @@
+
+export const PAGE_SIZE = 3;
diff --git a/src/models/users.js b/src/models/users.js
index e3fd89b..6030740 100644
--- a/src/models/users.js
+++ b/src/models/users.js
@@ -5,16 +5,24 @@ export default {
   state: {
     list: [],
     total: null,
+    page: null,
   },
   reducers: {
-    save(state, { payload: { data: list, total } }) {
-      return { ...state, list, total };
+    save(state, { payload: { data: list, total, page } }) {
+      return { ...state, list, total, page };
     },
   },
   effects: {
-    *fetch({ payload: { page } }, { call, put }) {
+    *fetch({ payload: { page = 1 } }, { call, put }) {
       const { data, headers } = yield call(usersService.fetch, { page });
-      yield put({ type: 'save', payload: { data, total: headers['x-total-count'] } });
+      yield put({
+        type: 'save',
+        payload: {
+          data,
+          total: parseInt(headers['x-total-count'], 10),
+          page: parseInt(page, 10),
+        },
+      });
     },
   },
   subscriptions: {
diff --git a/src/routes/Users.js b/src/routes/Users.js
index 61bb402..a4419c7 100644
--- a/src/routes/Users.js
+++ b/src/routes/Users.js
@@ -1,17 +1,14 @@
 import React from 'react';
 import { connect } from 'dva';
 import styles from './Users.css';
+import UsersComponent from '../components/Users/Users';
 
 function Users() {
   return (
     <div className={styles.normal}>
-      Route Component: Users
+      <UsersComponent />
     </div>
   );
 }
 
-function mapStateToProps() {
-  return {};
-}
-
-export default connect(mapStateToProps)(Users);
+export default connect()(Users);
diff --git a/src/services/users.js b/src/services/users.js
index 34286e8..5bc0637 100644
--- a/src/services/users.js
+++ b/src/services/users.js
@@ -1,5 +1,6 @@
 import request from '../utils/request';
+import { PAGE_SIZE } from '../constants';
 
-export function fetch({ page = 1}) {
-  return request(`/api/users?_page=${page}&_limit=5`);
+export function fetch({ page }) {
+  return request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);
 }