add Posts Page

package.json

@@ -26,6 +26,7 @@
     "babel-polyfill": "^6.23.0",
     "babel-runtime": "^6.9.2",
     "draftjs-to-html": "^0.7.0",
+    "dva-model-extend": "^0.1.1",
     "eslint": "^3.17.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.16.0",

src/mock/common.js

@@ -0,0 +1,63 @@
+const Mock = require('mockjs')
+const config = require('../utils/config')
+
+const queryArray = (array, key, keyAlias = 'key') => {
+  if (!(array instanceof Array)) {
+    return null
+  }
+  let data
+
+  for (const item of array) {
+    if (item[keyAlias] === key) {
+      data = item
+      break
+    }
+  }
+
+  if (data) {
+    return data
+  }
+  return null
+}
+
+const NOTFOUND = {
+  message: 'Not Found',
+  documentation_url: 'http://localhost:8000/request',
+}
+
+
+let postId = 0
+const posts = Mock.mock({
+  'data|100': [
+    {
+      id () {
+        postId += 1
+        return postId + 10000
+      },
+      'status|1-2': 1,
+      title: '@title',
+      author: '@last',
+      categories: '@word',
+      tags: '@word',
+      'views|10-200': 1,
+      'comments|10-200': 1,
+      visibility: () => {
+        return Mock.mock('@pick(["Public",'
+          + '"Password protected", '
+          + '"Private"])')
+      },
+      date: '@dateTime',
+      image () {
+        return Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', this.author.substr(0, 1))
+      },
+    },
+  ],
+}).data
+
+module.exports = {
+  queryArray,
+  NOTFOUND,
+  Mock,
+  posts,
+  config,
+}

src/mock/post.js

@@ -0,0 +1,31 @@
+const { config, posts } = require('./common')
+
+const { apiPrefix } = config
+let database = posts
+
+module.exports = {
+
+  [`GET ${apiPrefix}/posts`] (req, res) {
+    const { query } = req
+    let { pageSize, page, ...other } = query
+    pageSize = pageSize || 10
+    page = page || 1
+
+    let newData = database
+    for (let key in other) {
+      if ({}.hasOwnProperty.call(other, key)) {
+        newData = newData.filter((item) => {
+          if ({}.hasOwnProperty.call(item, key)) {
+            return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1
+          }
+          return true
+        })
+      }
+    }
+
+    res.status(200).json({
+      data: newData.slice((page - 1) * pageSize, page * pageSize),
+      total: newData.length,
+    })
+  },
+}

src/models/common.js

@@ -0,0 +1,47 @@
+import modelExtend from 'dva-model-extend'
+
+const model = {
+  reducers: {
+    updateState (state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      }
+    },
+  },
+}
+
+const pageModel = modelExtend(model, {
+
+  state: {
+    list: [],
+    pagination: {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: total => `Total ${total} Items`,
+      current: 1,
+      total: 0,
+    },
+  },
+
+  reducers: {
+    querySuccess (state, { payload }) {
+      const { list, pagination } = payload
+      return {
+        ...state,
+        list,
+        pagination: {
+          ...state.pagination,
+          ...pagination,
+        },
+      }
+    },
+  },
+
+})
+
+
+module.exports = {
+  model,
+  pageModel,
+}

src/models/post.js

@@ -0,0 +1,44 @@
+import modelExtend from 'dva-model-extend'
+import { query } from '../services/posts'
+import { pageModel } from './common'
+
+export default modelExtend(pageModel, {
+
+  namespace: 'post',
+
+  subscriptions: {
+    setup ({ dispatch, history }) {
+      history.listen(location => {
+        if (location.pathname === '/post') {
+          dispatch({ type: 'query', payload: {
+            status: 2,
+            ...location.query,
+          } })
+        }
+      })
+    },
+  },
+
+  effects: {
+    *query ({
+      payload,
+    }, { call, put }) {
+      const data = yield call(query, payload)
+      if (data.success) {
+        yield put({
+          type: 'querySuccess',
+          payload: {
+            list: data.data,
+            pagination: {
+              current: Number(payload.page) || 1,
+              pageSize: Number(payload.pageSize) || 10,
+              total: data.total,
+            },
+          },
+        })
+      } else {
+        throw data
+      }
+    },
+  },
+})

src/models/user.js

@@ -1,27 +1,21 @@
+import modelExtend from 'dva-model-extend'
 import { create, remove, update } from '../services/user'
 import * as usersService from '../services/users'
-import { parse } from 'qs'
+import { pageModel } from './common'
+import { config } from '../utils'
 
 const { query } = usersService
+const { prefix } = config
 
-export default {
-
+export default modelExtend(pageModel, {
   namespace: 'user',
 
   state: {
-    list: [],
     currentItem: {},
     modalVisible: false,
     modalType: 'create',
     selectedRowKeys: [],
-    isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true',
-    pagination: {
-      showSizeChanger: true,
-      showQuickJumper: true,
-      showTotal: total => `共 ${total} 条`,
-      current: 1,
-      total: null,
-    },
+    isMotion: localStorage.getItem(`${prefix}userIsMotion`) === 'true',
   },
 
   subscriptions: {
@@ -39,8 +33,7 @@ export default {
 
   effects: {
 
-    *query ({ payload }, { call, put }) {
-      payload = parse(location.search.substr(1))
+    *query ({ payload = {} }, { call, put }) {
       const data = yield call(query, payload)
       if (data) {
         yield put({
@@ -104,36 +97,18 @@ export default {
 
   reducers: {
 
-    querySuccess (state, action) {
-      const { list, pagination } = action.payload
-      return { ...state,
-        list,
-        pagination: {
-          ...state.pagination,
-          ...pagination,
-        } }
-    },
-
-    updateState (state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      }
-    },
-
-    showModal (state, action) {
-      return { ...state, ...action.payload, modalVisible: true }
+    showModal (state, { payload }) {
+      return { ...state, ...{ payload }, modalVisible: true }
     },
 
     hideModal (state) {
       return { ...state, modalVisible: false }
     },
 
     switchIsMotion (state) {
-      localStorage.setItem('antdAdminUserIsMotion', !state.isMotion)
+      localStorage.setItem(`${prefix}userIsMotion`, !state.isMotion)
       return { ...state, isMotion: !state.isMotion }
     },
 
   },
-
-}
+})

src/router.js

@@ -123,6 +123,14 @@ const Routers = function ({ history, app }) {
               cb(null, require('./routes/chart/areaChart/'))
             }, 'chart-areaChart')
           },
+        }, {
+          path: 'post',
+          getComponent (nextState, cb) {
+            require.ensure([], require => {
+              registerModel(app, require('./models/post'))
+              cb(null, require('./routes/post/'))
+            }, 'post')
+          },
         }, {
           path: '*',
           getComponent (nextState, cb) {

src/routes/post/List.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Table } from 'antd'
+import styles from './List.less'
+
+const List = ({ ...tableProps }) => {
+  const columns = [
+    {
+      title: 'Image',
+      dataIndex: 'image',
+      className: styles.image,
+      width: 64,
+      render: (text) => <img alt="Feture" width={26} src={text} />,
+    }, {
+      title: 'Title',
+      dataIndex: 'title',
+    }, {
+      title: 'Author',
+      dataIndex: 'author',
+    }, {
+      title: 'Categories',
+      dataIndex: 'categories',
+    }, {
+      title: 'Tags',
+      dataIndex: 'tags',
+    }, {
+      title: 'Visibility',
+      dataIndex: 'visibility',
+    }, {
+      title: 'Comments',
+      dataIndex: 'comments',
+    }, {
+      title: 'Views',
+      dataIndex: 'views',
+    }, {
+      title: 'Date',
+      dataIndex: 'date',
+    },
+  ]
+
+  return (
+    <div>
+      <Table
+        {...tableProps}
+        bordered
+        scroll={{ x: 1200 }}
+        columns={columns}
+        simple
+        className={styles.table}
+        rowKey={record => record.id}
+      />
+    </div>
+  )
+}
+
+export default List

src/routes/post/List.less

@@ -0,0 +1,16 @@
+.table {
+  td.image {
+    line-height: 1;
+
+    img {
+      border-radius: 2px;
+    }
+  }
+
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      height: 60px;
+    }
+  }
+}