Merge pull request #984 from lovemegowin/master

refactor user,menu,permission storage strategy

src/components/Layout/Bread.js

@@ -12,7 +12,7 @@ import styles from './Bread.less'
 class Bread extends PureComponent {
   generateBreadcrumbs = paths => {
     return paths.map((item, key) => {
-      const content = (
+      const content = item && (
         <Fragment>
           {item.icon ? (
             <Icon type={item.icon} style={{ marginRight: 4 }} />
@@ -22,13 +22,15 @@ class Bread extends PureComponent {
       )
 
       return (
-        <Breadcrumb.Item key={key}>
-          {paths.length - 1 !== key ? (
-            <Link to={addLangPrefix(item.route) || '#'}>{content}</Link>
-          ) : (
-            content
-          )}
-        </Breadcrumb.Item>
+        item && (
+          <Breadcrumb.Item key={key}>
+            {paths.length - 1 !== key ? (
+              <Link to={addLangPrefix(item.route) || '#'}>{content}</Link>
+            ) : (
+              content
+            )}
+          </Breadcrumb.Item>
+        )
       )
     })
   }

src/components/Loader/Loader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'
 
-const Loader = ({ spinning = true, fullScreen }) => {
+const Loader = ({ spinning = false, fullScreen }) => {
   return (
     <div
       className={classNames(styles.loader, {

src/layouts/PrimaryLayout.js

@@ -11,6 +11,7 @@ import { enquireScreen, unenquireScreen } from 'enquire-js'
 import { config, pathMatchRegexp, langFromPath } from 'utils'
 import Error from '../pages/404'
 import styles from './PrimaryLayout.less'
+import store from 'store'
 
 const { Content } = Layout
 const { Header, Bread, Sider } = MyLayout
@@ -46,14 +47,10 @@ class PrimaryLayout extends PureComponent {
 
   render() {
     const { app, location, dispatch, children } = this.props
-    const {
-      user,
-      theme,
-      routeList,
-      collapsed,
-      permissions,
-      notifications,
-    } = app
+    const { theme, collapsed, notifications } = app
+    const user = store.get('user') || {}
+    const permissions = store.get('permissions') || {}
+    const routeList = store.get('routeList') || []
     const { isMobile } = this.state
     const { onCollapseChange } = this
 

src/models/app.js

@@ -14,10 +14,6 @@ const { queryRouteList, logoutUser, queryUserInfo } = api
 export default {
   namespace: 'app',
   state: {
-    user: {},
-    permissions: {
-      visit: [],
-    },
     routeList: [
       {
         id: '1',
@@ -67,10 +63,6 @@ export default {
         })
       })
     },
-
-    setup({ dispatch }) {
-      dispatch({ type: 'query' })
-    },
   },
   effects: {
     *query({ payload }, { call, put, select }) {
@@ -98,15 +90,10 @@ export default {
             return cases.every(_ => _)
           })
         }
-        yield put({
-          type: 'updateState',
-          payload: {
-            user,
-            permissions,
-            routeList,
-          },
-        })
-        if (pathMatchRegexp(['/','/login'], window.location.pathname)) {
+        store.set('routeList', routeList)
+        store.set('permissions', permissions)
+        store.set('user', user)
+        if (pathMatchRegexp(['/', '/login'], window.location.pathname)) {
           router.push({
             pathname: '/dashboard',
           })
@@ -124,22 +111,9 @@ export default {
     *signOut({ payload }, { call, put }) {
       const data = yield call(logoutUser)
       if (data.success) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            user: {},
-            permissions: { visit: [] },
-            menu: [
-              {
-                id: '1',
-                icon: 'laptop',
-                name: 'Dashboard',
-                zhName: '仪表盘',
-                router: '/dashboard',
-              },
-            ],
-          },
-        })
+        store.set('routeList', [])
+        store.set('permissions', { visit: [] })
+        store.set('user', {})
         yield put({ type: 'query' })
       } else {
         throw data

src/pages/dashboard/index.js

@@ -17,6 +17,7 @@ import {
   User,
 } from './components'
 import styles from './index.less'
+import store from 'store'
 
 const bodyStyle = {
   bodyStyle: {
@@ -26,14 +27,14 @@ const bodyStyle = {
 }
 
 @connect(({ app, dashboard, loading }) => ({
-  avatar: app.user.avatar,
-  username: app.user.username,
   dashboard,
   loading,
 }))
 class Dashboard extends PureComponent {
   render() {
-    const { avatar, username, dashboard, loading } = this.props
+    const userDetail = store.get('user')
+    const { avatar, username } = userDetail
+    const { dashboard, loading } = this.props
     const {
       weather,
       sales,
@@ -154,8 +155,6 @@ class Dashboard extends PureComponent {
 }
 
 Dashboard.propTypes = {
-  avatar: PropTypes.string,
-  username: PropTypes.string,
   dashboard: PropTypes.object,
   loading: PropTypes.object,
 }

src/pages/user/components/Filter.js

@@ -26,11 +26,6 @@ const TwoColProps = {
 @withI18n()
 @Form.create()
 class Filter extends Component {
-  componentDidUpdate(prevProps, prevState) {
-    if (Object.keys(prevProps.filter).length === 0) {
-      this.handleReset()
-    }
-  }
   handleFields = fields => {
     const { createTime } = fields
     if (createTime.length) {

src/pages/user/index.js

@@ -13,9 +13,30 @@ import Modal from './components/Modal'
 @withI18n()
 @connect(({ user, loading }) => ({ user, loading }))
 class User extends PureComponent {
+  componentDidMount() {
+    this.handleRefresh({ page: 1, pageSize: 10 })
+  }
+
+  handleRefresh = newQuery => {
+    const { location, dispatch } = this.props
+    const { query, pathname } = location
+    const payload = {
+      ...query,
+      ...newQuery,
+    }
+    dispatch({
+      type: 'user/query',
+      payload,
+    })
+    router.push({
+      pathname,
+      search: stringify(payload, { arrayFormat: 'repeat' }),
+    })
+  }
+
   render() {
     const { location, dispatch, user, loading, i18n } = this.props
-    const { query, pathname } = location
+    const { query } = location
     const {
       list,
       pagination,
@@ -25,19 +46,6 @@ class User extends PureComponent {
       selectedRowKeys,
     } = user
 
-    const handleRefresh = newQuery => {
-      router.push({
-        pathname,
-        search: stringify(
-          {
-            ...query,
-            ...newQuery,
-          },
-          { arrayFormat: 'repeat' }
-        ),
-      })
-    }
-
     const modalProps = {
       item: modalType === 'create' ? {} : currentItem,
       visible: modalVisible,
@@ -53,7 +61,7 @@ class User extends PureComponent {
           type: `user/${modalType}`,
           payload: data,
         }).then(() => {
-          handleRefresh()
+          this.handleRefresh()
         })
       },
       onCancel() {
@@ -67,8 +75,8 @@ class User extends PureComponent {
       dataSource: list,
       loading: loading.effects['user/query'],
       pagination,
-      onChange(page) {
-        handleRefresh({
+      onChange: page => {
+        this.handleRefresh({
           page: page.current,
           pageSize: page.pageSize,
         })
@@ -78,7 +86,7 @@ class User extends PureComponent {
           type: 'user/delete',
           payload: id,
         }).then(() => {
-          handleRefresh({
+          this.handleRefresh({
             page:
               list.length === 1 && pagination.current > 1
                 ? pagination.current - 1
@@ -112,10 +120,9 @@ class User extends PureComponent {
       filter: {
         ...query,
       },
-      onFilterChange(value) {
-        handleRefresh({
+      onFilterChange: value => {
+        this.handleRefresh({
           ...value,
-          page: 1,
         })
       },
       onAdd() {
@@ -135,7 +142,7 @@ class User extends PureComponent {
           ids: selectedRowKeys,
         },
       }).then(() => {
-        handleRefresh({
+        this.handleRefresh({
           page:
             list.length === selectedRowKeys.length && pagination.current > 1
               ? pagination.current - 1

src/pages/user/model.js

@@ -22,20 +22,6 @@ export default modelExtend(pageModel, {
     selectedRowKeys: [],
   },
 
-  subscriptions: {
-    setup({ dispatch, history }) {
-      history.listen(location => {
-        if (pathMatchRegexp('/user', location.pathname)) {
-          const payload = location.query || { page: 1, pageSize: 10 }
-          dispatch({
-            type: 'query',
-            payload,
-          })
-        }
-      })
-    },
-  },
-
   effects: {
     *query({ payload = {} }, { call, put }) {
       const data = yield call(queryUserList, payload)

src/utils/request.js

@@ -33,11 +33,8 @@ export default function request(options) {
     message.error(e.message)
   }
 
-  options.url =
-    method.toLocaleLowerCase() === 'get'
-      ? `${url}${isEmpty(cloneData) ? '' : '?'}${qs.stringify(cloneData)}`
-      : url
-
+  options.url = url
+  options.params = cloneData
   options.cancelToken = new CancelToken(cancel => {
     window.cancelRequest.set(Symbol(Date.now()), {
       pathname: window.location.pathname,