refactor(users-page): ssr & clean up & fix jump

Author: mydearxym

containers/Sidebar/CommunitiesRootMenuItem.js

@@ -123,15 +123,13 @@ const CommunitiesItemBar = ({ active }) => (
 
 const CommunitiesRootMenuItem = ({ activeRaw, activeThread, countsInfo }) => (
   <MenuItemWrapper>
-    <div>
-      <CommunitiesItemBar active={activeRaw === ROUTE.COMMUNITIES} />
-      <MenuChildren
-        activeRaw={activeRaw}
-        curRaw={ROUTE.COMMUNITIES}
-        activeThread={activeThread}
-        countsInfo={countsInfo}
-      />
-    </div>
+    <CommunitiesItemBar active={activeRaw === ROUTE.COMMUNITIES} />
+    <MenuChildren
+      activeRaw={activeRaw}
+      curRaw={ROUTE.COMMUNITIES}
+      activeThread={activeThread}
+      countsInfo={countsInfo}
+    />
   </MenuItemWrapper>
 )
 

containers/Sidebar/UsersRootMenuItem.js

@@ -26,16 +26,16 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>注册用户</ChildrenTitle>
-        <ChildrenNum>23</ChildrenNum>
+        <ChildrenNum>--</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
     <ChildrenItem
-      active={ROUTE.PAYS === activeThread}
-      onClick={logic.onRootMenuSelect.bind(this, 'users', 'pays')}
+      active={ROUTE.SENIOR === activeThread}
+      onClick={logic.onRootMenuSelect.bind(this, 'users', ROUTE.SENIOR)}
     >
       <ChildrenItemInner>
-        <ChildrenTitle>衣食父母</ChildrenTitle>
-        <ChildrenNum>22</ChildrenNum>
+        <ChildrenTitle>高级用户</ChildrenTitle>
+        <ChildrenNum>--</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
   </ChildrenWrapper>
@@ -47,7 +47,7 @@ const UsersItemBar = ({ activeRaw, curRaw }) => (
     <div>
       <MenuRow
         active={activeRaw === curRaw}
-        onClick={logic.extendMenuBar.bind(this, ROUTE.USERS_RAW)}
+        onClick={logic.extendMenuBar.bind(this, ROUTE.USERS)}
       >
         <MenuCommunitiesIcon src={`${ICON_CMD}/users.svg`} />
         <div style={{ marginRight: 10 }} />
@@ -60,14 +60,12 @@ const UsersItemBar = ({ activeRaw, curRaw }) => (
 
 const UsersRootMenuItem = ({ activeRaw, activeThread }) => (
   <MenuItemWrapper>
-    <div>
-      <UsersItemBar activeRaw={activeRaw} curRaw={ROUTE.USERS_RAW} />
-      <MenuChildren
-        activeRaw={activeRaw}
-        curRaw={ROUTE.USERS_RAW}
-        activeThread={activeThread}
-      />
-    </div>
+    <UsersItemBar activeRaw={activeRaw} curRaw={ROUTE.USERS} />
+    <MenuChildren
+      activeRaw={activeRaw}
+      curRaw={ROUTE.USERS}
+      activeThread={activeThread}
+    />
   </MenuItemWrapper>
 )
 

containers/Sidebar/store.js

@@ -8,7 +8,7 @@ import R from 'ramda'
 
 import { PagedCommunities, emptyPagiData } from '../../stores/SharedModel'
 
-import { makeDebugger, markStates, ROUTE, stripMobx } from '../../utils'
+import { makeDebugger, markStates, stripMobx } from '../../utils'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('S:SidebarStore')
@@ -63,9 +63,10 @@ const SidebarStore = t
       return self.root.route.mainPath
     },
     get activeThread() {
-      const { subPath } = self.root.route
+      const { subPath, mainPath } = self.root.route
 
-      return R.isEmpty(subPath) ? ROUTE.COMMUNITIES : subPath
+      // return R.isEmpty(subPath) ? ROUTE.COMMUNITIES : subPath
+      return R.isEmpty(subPath) ? mainPath : subPath
     },
     get rootCountStatusData() {
       return stripMobx(self.rootCountStatus)

containers/UsersBanner/IndexBanner.js

@@ -1,67 +1,44 @@
 import React from 'react'
 
 import { ICON_CMD } from '../../config'
-import { Tag, Popover, BannerCountBrief } from '../../components'
+import { Popover, BannerCountBrief } from '../../components'
 
 import {
   BannerContentWrapper,
   Operation,
   OperationItem,
   OperationDivider,
   OperationTitle,
-  FilterTags,
   OperationIcon,
-  OperationIconChart,
 } from './styles/common_banner'
 
-import * as logic from './logic'
+// import * as logic from './logic'
 
-class IndexBanner extends React.Component {
-  componentDidMount() {
-    logic.loadUsers()
-  }
-
-  render() {
-    // const { totalCount } = this.props
-    const { filteredCount, totalCount } = this.props
-
-    return (
-      <BannerContentWrapper>
-        <BannerCountBrief
-          filteredCount={filteredCount}
-          totalCount={totalCount}
-          thread="用户"
-          unit="人"
-        />
-        <Operation>
-          <OperationItem>
-            <OperationIcon src={`${ICON_CMD}/filter2.svg`} />
-            <Popover
-              content={<div>兼容各个页面的 Filter 菜单</div>}
-              trigger="hover"
-            >
-              <OperationTitle>过滤</OperationTitle>
-            </Popover>
-            <FilterTags>
-              <Tag closable>最多xx</Tag>
-              <Tag closable>最少..</Tag>
-            </FilterTags>
-          </OperationItem>
-          <OperationDivider />
-          <OperationItem onClick={logic.onAdd}>
-            <OperationIconChart src={`${ICON_CMD}/plus.svg`} />
-            添加
-          </OperationItem>
-          <OperationDivider />
-          <OperationItem>
-            <OperationIcon src={`${ICON_CMD}/chart.svg`} />
-            {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            图表
-          </OperationItem>
-        </Operation>
-      </BannerContentWrapper>
-    )
-  }
-}
+const IndexBanner = ({ filteredCount, totalCount }) => (
+  <BannerContentWrapper>
+    <BannerCountBrief
+      filteredCount={filteredCount}
+      totalCount={totalCount}
+      thread="用户"
+      unit="人"
+    />
+    <Operation>
+      <OperationItem>
+        <OperationIcon src={`${ICON_CMD}/filter2.svg`} />
+        <Popover
+          content={<div>兼容各个页面的 Filter 菜单</div>}
+          trigger="hover"
+        >
+          <OperationTitle>过滤</OperationTitle>
+        </Popover>
+      </OperationItem>
+      <OperationDivider />
+      <OperationItem>
+        <OperationIcon src={`${ICON_CMD}/chart.svg`} />
+        图表
+      </OperationItem>
+    </Operation>
+  </BannerContentWrapper>
+)
 
 export default IndexBanner

containers/UsersBanner/PassportsBanner.js

@@ -14,34 +14,23 @@ import * as logic from './logic'
 
 import IndexBanner from './IndexBanner'
 import PaysBanner from './PaysBanner'
-import PassportsBanner from './PassportsBanner'
-import RolesBanner from './RolesBanner'
 
 import { BannerContainer } from './styles'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('C:UsersBanner')
 /* eslint-enable no-unused-vars */
 
-const renderChildBanner = (curRoute, store) => {
-  const { usersTotalCount, filteredCount } = store
+const renderChildBanner = (curRoute, totalCount, store) => {
+  const { filteredCount } = store
 
   switch (curRoute.subPath) {
     case ROUTE.PAYS: {
       return <PaysBanner totalCount={200} filteredCount={100} />
     }
-    case ROUTE.PASSPORTS: {
-      return <PassportsBanner totalCount={200} filteredCount={100} />
-    }
-    case ROUTE.ROLES: {
-      return <RolesBanner totalCount={200} filteredCount={100} />
-    }
     default: {
       return (
-        <IndexBanner
-          totalCount={usersTotalCount}
-          filteredCount={filteredCount}
-        />
+        <IndexBanner totalCount={totalCount} filteredCount={filteredCount} />
       )
     }
   }
@@ -55,11 +44,11 @@ class UsersBannerContainer extends React.Component {
 
   render() {
     const { usersBanner } = this.props
-    const { curRoute } = usersBanner
+    const { curRoute, totalCount } = usersBanner
 
     return (
       <BannerContainer>
-        {renderChildBanner(curRoute, usersBanner)}
+        {renderChildBanner(curRoute, totalCount, usersBanner)}
       </BannerContainer>
     )
   }