Using the decorator syntax, Fixed user page filter data by address.

mock/dashboard.js

@@ -1,4 +1,4 @@
-import { color } from '../src/utils/theme'
+import { Color } from '../src/utils/theme'
 
 const Mock = require('mockjs')
 const config = require('../src/utils/config')
@@ -113,25 +113,25 @@ const Dashboard = Mock.mock({
   numbers: [
     {
       icon: 'pay-circle-o',
-      color: color.green,
+      color: Color.green,
       title: 'Online Review',
       number: 2781,
     },
     {
       icon: 'team',
-      color: color.blue,
+      color: Color.blue,
       title: 'New Customers',
       number: 3241,
     },
     {
       icon: 'message',
-      color: color.purple,
+      color: Color.purple,
       title: 'Active Projects',
       number: 253,
     },
     {
       icon: 'shopping-cart',
-      color: color.red,
+      color: Color.red,
       title: 'Referrals',
       number: 4324,
     },

src/components/Layout/Sider.js

@@ -25,7 +25,7 @@ const Sider = ({
   return (
     <div>
       <div className={styles.logo}>
-        <img alt="logo" src={config.logo} />
+        <img alt="logo" src={config.logoPath} />
         {siderFold ? '' : <span>{config.siteName}</span>}
       </div>
       <Menus {...menusProps} />

src/pages/UIElement/editor/index.js

@@ -12,11 +12,13 @@ export default class EditorPage extends React.Component {
       editorContent: null,
     }
   }
+
   onEditorStateChange = editorContent => {
     this.setState({
       editorContent,
     })
   }
+
   render() {
     const { editorContent } = this.state
     const colProps = {

src/pages/dashboard/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
@@ -25,116 +25,121 @@ const bodyStyle = {
   },
 }
 
-function Dashboard({ dashboard, loading }) {
-  const {
-    weather,
-    sales,
-    quote,
-    numbers,
-    recentSales,
-    comments,
-    completed,
-    browser,
-    cpu,
-    user,
-  } = dashboard
-  const numberCards = numbers.map((item, key) => (
-    <Col key={key} lg={6} md={12}>
-      <NumberCard {...item} />
-    </Col>
-  ))
+@connect(({ dashboard, loading }) => ({ dashboard, loading }))
+class Dashboard extends PureComponent {
+  render() {
+    const { dashboard, loading } = this.props
+    const {
+      weather,
+      sales,
+      quote,
+      numbers,
+      recentSales,
+      comments,
+      completed,
+      browser,
+      cpu,
+      user,
+    } = dashboard
 
-  return (
-    <Page
-      loading={loading.models.dashboard && sales.length === 0}
-      className={styles.dashboard}
-    >
-      <Row gutter={24}>
-        {numberCards}
-        <Col lg={18} md={24}>
-          <Card
-            bordered={false}
-            bodyStyle={{
-              padding: '24px 36px 24px 0',
-            }}
-          >
-            <Sales data={sales} />
-          </Card>
-        </Col>
-        <Col lg={6} md={24}>
-          <Row gutter={24}>
-            <Col lg={24} md={12}>
-              <Card
-                bordered={false}
-                className={styles.weather}
-                bodyStyle={{
-                  padding: 0,
-                  height: 204,
-                  background: Color.blue,
-                }}
-              >
-                <Weather
-                  {...weather}
-                  loading={loading.effects['dashboard/queryWeather']}
-                />
-              </Card>
-            </Col>
-            <Col lg={24} md={12}>
-              <Card
-                bordered={false}
-                className={styles.quote}
-                bodyStyle={{
-                  padding: 0,
-                  height: 204,
-                  background: Color.peach,
-                }}
-              >
-                <Quote {...quote} />
-              </Card>
-            </Col>
-          </Row>
-        </Col>
-        <Col lg={12} md={24}>
-          <Card bordered={false} {...bodyStyle}>
-            <RecentSales data={recentSales} />
-          </Card>
-        </Col>
-        <Col lg={12} md={24}>
-          <Card bordered={false} {...bodyStyle}>
-            <Comments data={comments} />
-          </Card>
-        </Col>
-        <Col lg={24} md={24}>
-          <Card
-            bordered={false}
-            bodyStyle={{
-              padding: '24px 36px 24px 0',
-            }}
-          >
-            <Completed data={completed} />
-          </Card>
-        </Col>
-        <Col lg={8} md={24}>
-          <Card bordered={false} {...bodyStyle}>
-            <Browser data={browser} />
-          </Card>
-        </Col>
-        <Col lg={8} md={24}>
-          <Card bordered={false} {...bodyStyle}>
-            <Cpu {...cpu} />
-          </Card>
-        </Col>
-        <Col lg={8} md={24}>
-          <Card
-            bordered={false}
-            bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}
-          >
-            <User {...user} />
-          </Card>
-        </Col>
-      </Row>
-    </Page>
-  )
+    const numberCards = numbers.map((item, key) => (
+      <Col key={key} lg={6} md={12}>
+        <NumberCard {...item} />
+      </Col>
+    ))
+
+    return (
+      <Page
+        loading={loading.models.dashboard && sales.length === 0}
+        className={styles.dashboard}
+      >
+        <Row gutter={24}>
+          {numberCards}
+          <Col lg={18} md={24}>
+            <Card
+              bordered={false}
+              bodyStyle={{
+                padding: '24px 36px 24px 0',
+              }}
+            >
+              <Sales data={sales} />
+            </Card>
+          </Col>
+          <Col lg={6} md={24}>
+            <Row gutter={24}>
+              <Col lg={24} md={12}>
+                <Card
+                  bordered={false}
+                  className={styles.weather}
+                  bodyStyle={{
+                    padding: 0,
+                    height: 204,
+                    background: Color.blue,
+                  }}
+                >
+                  <Weather
+                    {...weather}
+                    loading={loading.effects['dashboard/queryWeather']}
+                  />
+                </Card>
+              </Col>
+              <Col lg={24} md={12}>
+                <Card
+                  bordered={false}
+                  className={styles.quote}
+                  bodyStyle={{
+                    padding: 0,
+                    height: 204,
+                    background: Color.peach,
+                  }}
+                >
+                  <Quote {...quote} />
+                </Card>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} md={24}>
+            <Card bordered={false} {...bodyStyle}>
+              <RecentSales data={recentSales} />
+            </Card>
+          </Col>
+          <Col lg={12} md={24}>
+            <Card bordered={false} {...bodyStyle}>
+              <Comments data={comments} />
+            </Card>
+          </Col>
+          <Col lg={24} md={24}>
+            <Card
+              bordered={false}
+              bodyStyle={{
+                padding: '24px 36px 24px 0',
+              }}
+            >
+              <Completed data={completed} />
+            </Card>
+          </Col>
+          <Col lg={8} md={24}>
+            <Card bordered={false} {...bodyStyle}>
+              <Browser data={browser} />
+            </Card>
+          </Col>
+          <Col lg={8} md={24}>
+            <Card bordered={false} {...bodyStyle}>
+              <Cpu {...cpu} />
+            </Card>
+          </Col>
+          <Col lg={8} md={24}>
+            <Card
+              bordered={false}
+              bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}
+            >
+              <User {...user} />
+            </Card>
+          </Col>
+        </Row>
+      </Page>
+    )
+  }
 }
 
 Dashboard.propTypes = {
@@ -142,6 +147,4 @@ Dashboard.propTypes = {
   loading: PropTypes.object,
 }
 
-export default connect(({ dashboard, loading }) => ({ dashboard, loading }))(
-  Dashboard
-)
+export default Dashboard

src/pages/login/index.js

@@ -1,18 +1,18 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Button, Row, Form, Input } from 'antd'
-import { config } from 'utils'
-import styles from './index.less'
+import config from 'utils/config'
 
+import styles from './index.less'
 const FormItem = Form.Item
 
-const Login = ({
-  loading,
-  dispatch,
-  form: { getFieldDecorator, validateFieldsAndScroll },
-}) => {
-  function handleOk() {
+@connect(({ loading }) => ({ loading }))
+@Form.create()
+class Login extends PureComponent {
+  handleOk = () => {
+    const { dispatch, form } = this.props
+    const { validateFieldsAndScroll } = form
     validateFieldsAndScroll((errors, values) => {
       if (errors) {
         return
@@ -21,53 +21,58 @@ const Login = ({
     })
   }
 
-  return (
-    <div className={styles.form}>
-      <div className={styles.logo}>
-        <img alt="logo" src={config.logo} />
-        <span>{config.name}</span>
+  render() {
+    const { loading, form } = this.props
+    const { getFieldDecorator } = form
+
+    return (
+      <div className={styles.form}>
+        <div className={styles.logo}>
+          <img alt="logo" src={config.logoPath} />
+          <span>{config.siteName}</span>
+        </div>
+        <form>
+          <FormItem hasFeedback>
+            {getFieldDecorator('username', {
+              rules: [
+                {
+                  required: true,
+                },
+              ],
+            })(<Input onPressEnter={this.handleOk} placeholder="Username" />)}
+          </FormItem>
+          <FormItem hasFeedback>
+            {getFieldDecorator('password', {
+              rules: [
+                {
+                  required: true,
+                },
+              ],
+            })(
+              <Input
+                type="password"
+                onPressEnter={this.handleOk}
+                placeholder="Password"
+              />
+            )}
+          </FormItem>
+          <Row>
+            <Button
+              type="primary"
+              onClick={this.handleOk}
+              loading={loading.effects.login}
+            >
+              Sign in
+            </Button>
+            <p>
+              <span>Username：guest</span>
+              <span>Password：guest</span>
+            </p>
+          </Row>
+        </form>
       </div>
-      <form>
-        <FormItem hasFeedback>
-          {getFieldDecorator('username', {
-            rules: [
-              {
-                required: true,
-              },
-            ],
-          })(<Input onPressEnter={handleOk} placeholder="Username" />)}
-        </FormItem>
-        <FormItem hasFeedback>
-          {getFieldDecorator('password', {
-            rules: [
-              {
-                required: true,
-              },
-            ],
-          })(
-            <Input
-              type="password"
-              onPressEnter={handleOk}
-              placeholder="Password"
-            />
-          )}
-        </FormItem>
-        <Row>
-          <Button
-            type="primary"
-            onClick={handleOk}
-            loading={loading.effects.login}
-          >
-            Sign in
-          </Button>
-          <p>
-            <span>Username：guest</span>
-            <span>Password：guest</span>
-          </p>
-        </Row>
-      </form>
-    </div>
-  )
+    )
+  }
 }
 
 Login.propTypes = {
@@ -76,4 +81,4 @@ Login.propTypes = {
   loading: PropTypes.object,
 }
 
-export default connect(({ loading }) => ({ loading }))(Form.create()(Login))
+export default Login

src/pages/post/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Tabs } from 'antd'
@@ -14,65 +14,69 @@ const EnumPostStatus = {
   PUBLISHED: 2,
 }
 
-const Index = ({ post, dispatch, loading, location }) => {
-  const { list, pagination } = post
-  const { query, pathname } = location
+@connect(({ post, loading }) => ({ post, loading }))
+class Post extends PureComponent {
+  render() {
+    const { post, dispatch, loading, location } = this.props
+    const { list, pagination } = post
+    const { query, pathname } = location
 
-  const listProps = {
-    pagination,
-    dataSource: list,
-    loading: loading.effects['post/query'],
-    onChange(page) {
+    const listProps = {
+      pagination,
+      dataSource: list,
+      loading: loading.effects['post/query'],
+      onChange(page) {
+        dispatch(
+          routerRedux.push({
+            pathname,
+            search: stringify({
+              ...query,
+              page: page.current,
+              pageSize: page.pageSize,
+            }),
+          })
+        )
+      },
+    }
+
+    const handleTabClick = key => {
       dispatch(
         routerRedux.push({
           pathname,
           search: stringify({
-            ...query,
-            page: page.current,
-            pageSize: page.pageSize,
+            status: key,
           }),
         })
       )
-    },
-  }
+    }
 
-  const handleTabClick = key => {
-    dispatch(
-      routerRedux.push({
-        pathname,
-        search: stringify({
-          status: key,
-        }),
-      })
+    return (
+      <Page inner>
+        <Tabs
+          activeKey={
+            query.status === String(EnumPostStatus.UNPUBLISH)
+              ? String(EnumPostStatus.UNPUBLISH)
+              : String(EnumPostStatus.PUBLISHED)
+          }
+          onTabClick={handleTabClick}
+        >
+          <TabPane tab="Publised" key={String(EnumPostStatus.PUBLISHED)}>
+            <List {...listProps} />
+          </TabPane>
+          <TabPane tab="Unpublish" key={String(EnumPostStatus.UNPUBLISH)}>
+            <List {...listProps} />
+          </TabPane>
+        </Tabs>
+      </Page>
     )
   }
-
-  return (
-    <Page inner>
-      <Tabs
-        activeKey={
-          query.status === String(EnumPostStatus.UNPUBLISH)
-            ? String(EnumPostStatus.UNPUBLISH)
-            : String(EnumPostStatus.PUBLISHED)
-        }
-        onTabClick={handleTabClick}
-      >
-        <TabPane tab="Publised" key={String(EnumPostStatus.PUBLISHED)}>
-          <List {...listProps} />
-        </TabPane>
-        <TabPane tab="Unpublish" key={String(EnumPostStatus.UNPUBLISH)}>
-          <List {...listProps} />
-        </TabPane>
-      </Tabs>
-    </Page>
-  )
 }
 
-Index.propTypes = {
+Post.propTypes = {
   post: PropTypes.object,
   loading: PropTypes.object,
   location: PropTypes.object,
   dispatch: PropTypes.func,
 }
 
-export default connect(({ post, loading }) => ({ post, loading }))(Index)
+export default Post

src/pages/user/$id/index.js

@@ -1,33 +1,32 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import styles from './index.less'
 
-const Detail = ({ userDetail }) => {
-  const { data } = userDetail
-  const content = []
-  for (let key in data) {
-    if ({}.hasOwnProperty.call(data, key)) {
-      content.push(
-        <div key={key} className={styles.item}>
-          <div>{key}</div>
-          <div>{String(data[key])}</div>
-        </div>
-      )
+@connect(({ userDetail }) => ({ userDetail }))
+class UserDetail extends PureComponent {
+  render() {
+    const { userDetail } = this.props
+    const { data } = userDetail
+    const content = []
+    for (let key in data) {
+      if ({}.hasOwnProperty.call(data, key)) {
+        content.push(
+          <div key={key} className={styles.item}>
+            <div>{key}</div>
+            <div>{String(data[key])}</div>
+          </div>
+        )
+      }
     }
+    return (
+      <div className="content-inner">
+        <div className={styles.content}>{content}</div>
+      </div>
+    )
   }
-  return (
-    <div className="content-inner">
-      <div className={styles.content}>{content}</div>
-    </div>
-  )
 }
 
-Detail.propTypes = {
+UserDetail.propTypes = {
   userDetail: PropTypes.object,
 }
-
-export default connect(({ userDetail, loading }) => ({
-  userDetail,
-  loading: loading.models.userDetail,
-}))(Detail)

src/pages/user/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { routerRedux } from 'dva/router'
 import { connect } from 'dva'
@@ -9,162 +9,169 @@ import List from './components/List'
 import Filter from './components/Filter'
 import Modal from './components/Modal'
 
-const User = ({ location, dispatch, user, loading }) => {
-  const { query, pathname } = location
-  const {
-    list,
-    pagination,
-    currentItem,
-    modalVisible,
-    modalType,
-    isMotion,
-    selectedRowKeys,
-  } = user
+@connect(({ user, loading }) => ({ user, loading }))
+class User extends PureComponent {
+  render() {
+    const { location, dispatch, user, loading } = this.props
+    const { query, pathname } = location
+    const {
+      list,
+      pagination,
+      currentItem,
+      modalVisible,
+      modalType,
+      isMotion,
+      selectedRowKeys,
+    } = user
 
-  const handleRefresh = newQuery => {
-    dispatch(
-      routerRedux.push({
-        pathname,
-        search: stringify({
-          ...query,
-          ...newQuery,
-        }),
-      })
-    )
-  }
+    const handleRefresh = newQuery => {
+      dispatch(
+        routerRedux.push({
+          pathname,
+          search: stringify(
+            {
+              ...query,
+              ...newQuery,
+            },
+            { arrayFormat: 'repeat' }
+          ),
+        })
+      )
+    }
 
-  const modalProps = {
-    item: modalType === 'create' ? {} : currentItem,
-    visible: modalVisible,
-    maskClosable: false,
-    confirmLoading: loading.effects[`user/${modalType}`],
-    title: `${modalType === 'create' ? 'Create User' : 'Update User'}`,
-    wrapClassName: 'vertical-center-modal',
-    onOk(data) {
-      dispatch({
-        type: `user/${modalType}`,
-        payload: data,
-      }).then(() => {
-        handleRefresh()
-      })
-    },
-    onCancel() {
-      dispatch({
-        type: 'user/hideModal',
-      })
-    },
-  }
+    const modalProps = {
+      item: modalType === 'create' ? {} : currentItem,
+      visible: modalVisible,
+      maskClosable: false,
+      confirmLoading: loading.effects[`user/${modalType}`],
+      title: `${modalType === 'create' ? 'Create User' : 'Update User'}`,
+      wrapClassName: 'vertical-center-modal',
+      onOk(data) {
+        dispatch({
+          type: `user/${modalType}`,
+          payload: data,
+        }).then(() => {
+          handleRefresh()
+        })
+      },
+      onCancel() {
+        dispatch({
+          type: 'user/hideModal',
+        })
+      },
+    }
 
-  const listProps = {
-    dataSource: list,
-    loading: loading.effects['user/query'],
-    pagination,
-    location,
-    isMotion,
-    onChange(page) {
-      handleRefresh({
-        page: page.current,
-        pageSize: page.pageSize,
-      })
-    },
-    onDeleteItem(id) {
+    const listProps = {
+      dataSource: list,
+      loading: loading.effects['user/query'],
+      pagination,
+      location,
+      isMotion,
+      onChange(page) {
+        handleRefresh({
+          page: page.current,
+          pageSize: page.pageSize,
+        })
+      },
+      onDeleteItem(id) {
+        dispatch({
+          type: 'user/delete',
+          payload: id,
+        }).then(() => {
+          handleRefresh({
+            page:
+              list.length === 1 && pagination.current > 1
+                ? pagination.current - 1
+                : pagination.current,
+          })
+        })
+      },
+      onEditItem(item) {
+        dispatch({
+          type: 'user/showModal',
+          payload: {
+            modalType: 'update',
+            currentItem: item,
+          },
+        })
+      },
+      rowSelection: {
+        selectedRowKeys,
+        onChange: keys => {
+          dispatch({
+            type: 'user/updateState',
+            payload: {
+              selectedRowKeys: keys,
+            },
+          })
+        },
+      },
+    }
+
+    const filterProps = {
+      isMotion,
+      filter: {
+        ...query,
+      },
+      onFilterChange(value) {
+        handleRefresh({
+          ...value,
+          page: 1,
+        })
+      },
+      onAdd() {
+        dispatch({
+          type: 'user/showModal',
+          payload: {
+            modalType: 'create',
+          },
+        })
+      },
+      switchIsMotion() {
+        dispatch({ type: 'user/switchIsMotion' })
+      },
+    }
+
+    const handleDeleteItems = () => {
       dispatch({
-        type: 'user/delete',
-        payload: id,
+        type: 'user/multiDelete',
+        payload: {
+          ids: selectedRowKeys,
+        },
       }).then(() => {
         handleRefresh({
           page:
-            list.length === 1 && pagination.current > 1
+            list.length === selectedRowKeys.length && pagination.current > 1
               ? pagination.current - 1
               : pagination.current,
         })
       })
-    },
-    onEditItem(item) {
-      dispatch({
-        type: 'user/showModal',
-        payload: {
-          modalType: 'update',
-          currentItem: item,
-        },
-      })
-    },
-    rowSelection: {
-      selectedRowKeys,
-      onChange: keys => {
-        dispatch({
-          type: 'user/updateState',
-          payload: {
-            selectedRowKeys: keys,
-          },
-        })
-      },
-    },
-  }
+    }
 
-  const filterProps = {
-    isMotion,
-    filter: {
-      ...query,
-    },
-    onFilterChange(value) {
-      handleRefresh({
-        ...value,
-        page: 1,
-      })
-    },
-    onAdd() {
-      dispatch({
-        type: 'user/showModal',
-        payload: {
-          modalType: 'create',
-        },
-      })
-    },
-    switchIsMotion() {
-      dispatch({ type: 'user/switchIsMotion' })
-    },
+    return (
+      <Page inner>
+        <Filter {...filterProps} />
+        {selectedRowKeys.length > 0 && (
+          <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
+            <Col>
+              {`Selected ${selectedRowKeys.length} items `}
+              <Popconfirm
+                title="Are you sure delete these items?"
+                placement="left"
+                onConfirm={handleDeleteItems}
+              >
+                <Button type="primary" style={{ marginLeft: 8 }}>
+                  Remove
+                </Button>
+              </Popconfirm>
+            </Col>
+          </Row>
+        )}
+        <List {...listProps} />
+        {modalVisible && <Modal {...modalProps} />}
+      </Page>
+    )
   }
-
-  const handleDeleteItems = () => {
-    dispatch({
-      type: 'user/multiDelete',
-      payload: {
-        ids: selectedRowKeys,
-      },
-    }).then(() => {
-      handleRefresh({
-        page:
-          list.length === selectedRowKeys.length && pagination.current > 1
-            ? pagination.current - 1
-            : pagination.current,
-      })
-    })
-  }
-
-  return (
-    <Page inner>
-      <Filter {...filterProps} />
-      {selectedRowKeys.length > 0 && (
-        <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
-          <Col>
-            {`Selected ${selectedRowKeys.length} items `}
-            <Popconfirm
-              title="Are you sure delete these items?"
-              placement="left"
-              onConfirm={handleDeleteItems}
-            >
-              <Button type="primary" style={{ marginLeft: 8 }}>
-                Remove
-              </Button>
-            </Popconfirm>
-          </Col>
-        </Row>
-      )}
-      <List {...listProps} />
-      {modalVisible && <Modal {...modalProps} />}
-    </Page>
-  )
 }
 
 User.propTypes = {
@@ -174,4 +181,4 @@ User.propTypes = {
   loading: PropTypes.object,
 }
 
-export default connect(({ user, loading }) => ({ user, loading }))(User)
+export default User

src/utils/config.js

@@ -2,7 +2,7 @@ module.exports = {
   siteName: 'AntD Admin',
   prefix: 'antdAdmin',
   footerText: 'Ant Design Admin  © 2018 zuiidea',
-  logo: '/logo.svg',
+  logoPath: '/logo.svg',
   apiPrefix: '/api/v1',
   openPages: ['/login'],
 }