5. Add Users components and make user list work

src/pages/users/components/Users.css

@@ -0,0 +1,7 @@
+
+.normal {
+}
+
+.operation a {
+  margin: 0 .5em;
+}

src/pages/users/components/Users.js

@@ -0,0 +1,71 @@
+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);

src/pages/users/constants.js

@@ -0,0 +1,2 @@
+
+export const PAGE_SIZE = 3;

src/pages/users/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: {

src/pages/users/page.js

@@ -1,8 +1,9 @@
+import Users from './components/Users';
 
 export default () => {
   return (
     <div>
-      Users Page
+      <Users />
     </div>
   )
 }

src/pages/users/services/users.js

@@ -1,5 +1,6 @@
+import { PAGE_SIZE } from '../constants';
 import request from '../../../utils/request';
 
 export function fetch({ page = 1 }) {
-  return request(`/api/users?_page=${page}&_limit=5`);
+  return request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);
 }