feat: add user dashboard and simplify the block (#13)

-The MIT License (MIT)
-
-Copyright (c) 2018-present yutingzhao1991 (yutingzhao1991@sina.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

 {
 {
   "name": "@umi-block/blank",
   "name": "@umi-block/blank",
-  "version": "0.0.1",
   "description": "A blank block for quick start a umi page develop.",
   "description": "A blank block for quick start a umi page develop.",
-  "main": "src/index.js",
-  "scripts": {
-    "dev": "umi dev"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/umijs/umi-blocks/blank"
-  },
   "dependencies": {
   "dependencies": {
-    "antd": "^3.0.0",
-    "dva": "^2.0.0",
-    "react": ">=16.0.0",
     "umi-request": "^1.0.0"
     "umi-request": "^1.0.0"
-  },
-  "devDependencies": {
-    "umi": "^2.3.0-beta.1",
-    "umi-plugin-block-dev": "^1.0.0",
-    "umi-plugin-react": "^1.3.0-beta.1"
-  },
-  "authors": [
-    "yutingzhao1991 <yutingzhao1991@sina.com>"
-  ],
-  "license": "ISC"
+  }
 }
 }

 {
 {
   "name": "@umi-blocks/demo",
   "name": "@umi-blocks/demo",
-  "version": "1.0.0",
-  "description": "a demo block of umi",
-  "main": "src/index.js",
-  "scripts": {
-    "dev": "umi dev"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/umijs/umi-blocks/demo"
-  },
-  "dependencies": {
-    "react": ">=16.0.0",
-    "antd": "^3.0.0"
-  },
-  "devDependencies": {
-    "umi": "^2.0.0",
-    "umi-plugin-block-dev": "^1.0.0",
-    "umi-plugin-react": "^1.2.3"
-  },
-  "author": "yutingzhao1991 <yutingzhao1991@sina.com>",
-  "license": "ISC"
+  "description": "a demo block of umi"
 }
 }

@@ -25,14 +25,17 @@
     "prettier": "1.15.2",
     "prettier": "1.15.2",
     "stylelint": "^9.8.0",
     "stylelint": "^9.8.0",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-prettier": "^4.0.0",
-    "stylelint-config-standard": "^18.0.0"
+    "stylelint-config-standard": "^18.0.0",
+    "umi": "^2.3.0-0",
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.3.0-0"
   },
   },
   "lint-staged": {
   "lint-staged": {
     "x/**/*.{js,ts,tsx,json,jsx,less}": [
     "x/**/*.{js,ts,tsx,json,jsx,less}": [
       "node ./_scripts/lint-prettier.js",
       "node ./_scripts/lint-prettier.js",
       "git add"
       "git add"
     ],
     ],
-    "**/*.{js,jsx}": "npm run lint-staged:js",
+    "x/**/*.{js,jsx}": "npm run lint-staged:js",
     "**/*.less": "stylelint --syntax less"
     "**/*.less": "stylelint --syntax less"
   },
   },
   "husky": {
   "husky": {

+export default {
+  plugins: [
+    ['umi-plugin-block-dev', {}],
+    ['umi-plugin-react', {
+      antd: true,
+      dva: true,
+    }],
+  ],
+}

+{
+  "name": "@umi-block/user-dashboard",
+  "description": "User dashboard example.",
+  "dependencies": {
+    "umi-request": "^1.0.0"
+  }
+}

+
+const PAGE_SIZE = 3;
+let data = [
+  {
+    "id": 1,
+    "name": "Leanne Graham",
+    "email": "Sincere@april.biz",
+    "website": "hildegard.org",
+  },
+  {
+    "id": 2,
+    "name": "Ervin Howell",
+    "email": "Shanna@melissa.tv",
+    "website": "anastasia.net",
+  },
+  {
+    "id": 3,
+    "name": "Clementine Bauch",
+    "email": "Nathan@yesenia.net",
+    "website": "ramiro.info",
+  },
+  {
+    "id": 4,
+    "name": "Patricia Lebsack",
+    "email": "Julianne.OConner@kory.org",
+    "website": "kale.biz",
+  },
+  {
+    "id": 5,
+    "name": "Chelsey Dietrich",
+    "email": "Lucio_Hettinger@annie.ca",
+    "website": "demarco.info",
+  },
+  {
+    "id": 6,
+    "name": "Mrs. Dennis Schulist",
+    "email": "Karley_Dach@jasper.info",
+    "website": "ola.org",
+  },
+  {
+    "id": 7,
+    "name": "Kurtis Weissnat",
+    "email": "Telly.Hoeger@billy.biz",
+    "website": "elvis.io",
+  },
+  {
+    "id": 8,
+    "name": "Nicholas Runolfsdottir V",
+    "email": "Sherwood@rosamond.me",
+    "website": "jacynthe.com",
+  },
+  {
+    "id": 9,
+    "name": "Glenna Reichert",
+    "email": "Chaim_McDermott@dana.io",
+    "website": "conrad.com",
+  },
+];
+
+function uid(len) {
+  len = len || 7;
+  return Math.random().toString(35).substr(2, len);
+}
+
+function getData(page) {
+  const start = (page - 1) * PAGE_SIZE;
+  return {
+    status: 'success',
+    total: data.length,
+    page,
+    data: data.slice(start, start + 3),
+  };
+}
+
+export default {
+  'GET /api/BLOCK_NAME': (req, res) => {
+    res.json(getData(parseInt(req.query.page, 10) || 1));
+  },
+  'DELETE /api/BLOCK_NAME/:id': (req, res) => {
+    data = data.filter(item => `${item.id}` !== `${req.params.id}`);
+    res.end('ok');
+  },
+  'PATCH /api/BLOCK_NAME/:id': (req, res) => {
+    data.forEach(item => {
+      if (`${item.id}` === `${req.params.id}`) {
+        Object.assign(item, req.body);
+      }
+    });
+    res.end('ok');
+  },
+  'POST /api/BLOCK_NAME': (req, res) => {
+    data.push({
+      ...req.body,
+      id: uid(),
+    });
+    res.end('ok');
+  },
+};

+import { Component } from 'react';
+import { Modal, Form, Input } from 'antd';
+
+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);

+
+.normal {
+}
+
+.operation a {
+  margin: 0 .5em;
+}
+
+.create {
+  margin: 1.5em 0;
+}

+import { connect } from 'dva';
+import { Table, Pagination, Popconfirm, Button } from 'antd';
+import { routerRedux } from 'dva/router';
+import styles from './Users.css';
+import { PAGE_SIZE } from '../utils/constants';
+import UserModal from './UserModal';
+
+function Users({ dispatch, list: dataSource, loading, total, page: current }) {
+  function deleteHandler(id) {
+    dispatch({
+      type: 'BLOCK_NAME/remove',
+      payload: id,
+    });
+  }
+
+  function pageChangeHandler(page) {
+    dispatch({
+      type: 'BLOCK_NAME/fetch',
+      payload: { page },
+    });
+  }
+
+  function editHandler(id, values) {
+    dispatch({
+      type: 'BLOCK_NAME/patch',
+      payload: { id, values },
+    });
+  }
+
+  function createHandler(values) {
+    dispatch({
+      type: 'BLOCK_NAME/create',
+      payload: values,
+    });
+  }
+
+  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, record) => (
+        <span className={styles.operation}>
+          <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>
+      ),
+    },
+  ];
+
+  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}
+          dataSource={dataSource}
+          rowKey={record => record.id}
+          pagination={false}
+        />
+        <Pagination
+          className="ant-table-pagination"
+          total={total}
+          current={current}
+          pageSize={PAGE_SIZE}
+          onChange={pageChangeHandler}
+        />
+      </div>
+    </div>
+  );
+}
+
+function mapStateToProps(state) {
+  const { list, total, page } = state['BLOCK_NAME'];
+  return {
+    list,
+    total,
+    page,
+    loading: state.loading.models['BLOCK_NAME'],
+  };
+}
+
+export default connect(mapStateToProps)(Users);

+import { Component } from 'react';
+import { connect } from 'dva';
+import Users from './components/Users';
+
+class BLOCK_NAME extends Component {
+  componentDidMount() {
+    this.props.dispatch({
+      type: 'BLOCK_NAME/fetch',
+      payload: {
+        page: 1,
+      },
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Users />
+      </div>
+    );
+  }
+}
+
+export default connect()(BLOCK_NAME);

+import * as usersService from './service';
+
+export default {
+  namespace: 'BLOCK_NAME',
+  state: {
+    list: [],
+    total: null,
+    page: null,
+  },
+  reducers: {
+    save(state, { payload: { data: list, total, page } }) {
+      return { ...state, list, total, page };
+    },
+  },
+  effects: {
+    *fetch({ payload: { page = 1 } }, { call, put }) {
+      const { data, total, page: currentPage } = yield call(usersService.fetch, { page });
+      yield put({
+        type: 'save',
+        payload: {
+          data,
+          total,
+          page: currentPage,
+        },
+      });
+    },
+    *remove({ payload: id }, { call, put, select }) {
+      yield call(usersService.remove, id);
+      const page = yield select(state => state['BLOCK_NAME'].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['BLOCK_NAME'].page);
+      yield put({ type: 'fetch', payload: { page } });
+    },
+    *create({ payload: values }, { call, put, select }) {
+      yield call(usersService.create, values);
+      const page = yield select(state => state['BLOCK_NAME'].page);
+      yield put({ type: 'fetch', payload: { page } });
+    },
+  },
+};

+import request from 'umi-request';
+
+const API_PREFIX = `/api/BLOCK_NAME`;
+
+export function fetch({ page = 1 }) {
+  return request(`${API_PREFIX}?page=${page}`);
+}
+
+export function remove(id) {
+  return request(`${API_PREFIX}/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export function patch(id, values) {
+  // TODO:
+  // use umi-request after the issue is closed
+  // https://github.com/umijs/umi-request/issues/5
+  return window.fetch(`${API_PREFIX}/${id}`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(values),
+  });
+}
+
+export function create(values) {
+  return request(API_PREFIX, {
+    method: 'POST',
+    data: values,
+  });
+}

+
+export const PAGE_SIZE = 3;