refactor(sidebar): count status in real number

Author: mydearxym

containers/CommunityContent/PostsContent.js

@@ -131,7 +131,7 @@ const columns = [
 
 class PostsContent extends React.Component {
   componentDidMount() {
-    logic.loadPosts()
+    // logic.loadPosts()
   }
 
   render() {

containers/CommunityContent/TagsContent.js

@@ -101,7 +101,7 @@ const columns = [
 
 class TagsContent extends React.Component {
   componentDidMount() {
-    logic.loadTags()
+    // logic.loadTags()
   }
 
   render() {

containers/CommunityContent/index.js

@@ -48,6 +48,10 @@ class CommunityContentContainer extends React.Component {
     logic.init(communityContent)
   }
 
+  componentWillUnmount() {
+    logic.uninit()
+  }
+
   render() {
     const { communityContent } = this.props
     const { route } = communityContent

containers/CommunityContent/logic.js

@@ -81,6 +81,13 @@ const ErrSolver = []
 export function init(selectedStore) {
   store = selectedStore
   debug(store)
-  if (sub$) sub$.unsubscribe()
+  if (sub$) return false
   sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 }
+
+export function uninit() {
+  if (!sub$) return false
+  debug('===== do uninit')
+  sub$.unsubscribe()
+  sub$ = null
+}

containers/Sidebar/CommunitiesRootMenuItem.js

@@ -26,7 +26,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>社区</ChildrenTitle>
-        <ChildrenNum>{countsInfo.communitiesTotalCount}</ChildrenNum>
+        <ChildrenNum>{countsInfo.communitiesCount}</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
     <ChildrenItem
@@ -35,7 +35,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>分类</ChildrenTitle>
-        <ChildrenNum>{countsInfo.categoriesTotalCount}</ChildrenNum>
+        <ChildrenNum>{countsInfo.categoriesCount}</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
     <ChildrenItem
@@ -44,7 +44,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>标签</ChildrenTitle>
-        <ChildrenNum>{countsInfo.tagsTotalCount}</ChildrenNum>
+        <ChildrenNum>{countsInfo.tagsCount}</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
     <ChildrenItem
@@ -62,7 +62,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>Threads</ChildrenTitle>
-        <ChildrenNum>{countsInfo.threadsTotalCount}</ChildrenNum>
+        <ChildrenNum>{countsInfo.threadsCount}</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
     <ChildrenItem
@@ -71,7 +71,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>帖子</ChildrenTitle>
-        <ChildrenNum>{countsInfo.postsTotalCount}</ChildrenNum>
+        <ChildrenNum>{countsInfo.postsCount}</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
     <ChildrenItem
@@ -80,7 +80,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
     >
       <ChildrenItemInner>
         <ChildrenTitle>招聘</ChildrenTitle>
-        <ChildrenNum>--</ChildrenNum>
+        <ChildrenNum>{countsInfo.jobsCount}</ChildrenNum>
       </ChildrenItemInner>
     </ChildrenItem>
   </ChildrenWrapper>
@@ -103,18 +103,21 @@ const CommunitiesItemBar = ({ active }) => (
   </MenuItemEach>
 )
 
-const CommunitiesRootMenuItem = ({ activeRaw, activeThread, countsInfo }) => (
-  <MenuItemWrapper>
-    <div>
-      <CommunitiesItemBar active={activeRaw === ROUTE.COMMUNITIES} />
-      <MenuChildren
-        activeRaw={activeRaw}
-        curRaw={ROUTE.COMMUNITIES}
-        activeThread={activeThread}
-        countsInfo={countsInfo}
-      />
-    </div>
-  </MenuItemWrapper>
-)
+const CommunitiesRootMenuItem = ({ activeRaw, activeThread, countsInfo }) => {
+  console.log('get fucking countsInfo: ', countsInfo)
+  return (
+    <MenuItemWrapper>
+      <div>
+        <CommunitiesItemBar active={activeRaw === ROUTE.COMMUNITIES} />
+        <MenuChildren
+          activeRaw={activeRaw}
+          curRaw={ROUTE.COMMUNITIES}
+          activeThread={activeThread}
+          countsInfo={countsInfo}
+        />
+      </div>
+    </MenuItemWrapper>
+  )
+}
 
 export default CommunitiesRootMenuItem

containers/Sidebar/MenuList.js

@@ -8,12 +8,18 @@ import { MenuItem } from './styles/menu'
 
 import { uid } from '../../utils'
 
-const MenuList = ({ items, activeRaw, activeThread, countsInfo }) => (
+const MenuList = ({
+  items,
+  activeRaw,
+  activeThread,
+  rootCountStatusData,
+  countsInfo,
+}) => (
   <MenuItem>
     <CommunitiesRootMenuItem
       activeRaw={activeRaw}
       activeThread={activeThread}
-      countsInfo={countsInfo}
+      countsInfo={rootCountStatusData}
     />
     <UsersRootMenuItem
       activeRaw={activeRaw}

containers/Sidebar/index.js

@@ -38,10 +38,13 @@ class SidebarContainer extends React.Component {
       activeThread,
       countsInfo,
       searchValue,
+      rootCountStatusData,
     } = sidebar
     //    onMouseLeave={logic.leaveSidebar}
     // onMouseLeave is not unreliable in chrome: https://github.com/facebook/react/issues/4492
 
+    console.log('rootCountStatusData: ', rootCountStatusData)
+
     return (
       <Sidebar>
         <Banner>
@@ -53,6 +56,7 @@ class SidebarContainer extends React.Component {
         <MenuList
           items={subscribedCommunities}
           activeRaw={activeRaw}
+          rootCountStatusData={rootCountStatusData}
           countsInfo={countsInfo}
           activeThread={activeThread}
         />

containers/Sidebar/logic.js

@@ -79,6 +79,8 @@ export function loadCommunities(page = 1) {
   sr71$.query(S.pagedCommunities, args)
 }
 
+export const loadCountStatus = () => sr71$.query(S.countStatus, {})
+
 export const searchCommunities = title =>
   sr71$.query(S.searchCommunities, { title })
 
@@ -104,6 +106,12 @@ const DataSolver = [
       store.markState({ matchedCommunities })
     },
   },
+  {
+    match: asyncRes('countStatus'),
+    action: ({ countStatus: rootCountStatus }) => {
+      store.markState({ rootCountStatus })
+    },
+  },
 ]
 
 const ErrSolver = [
@@ -129,8 +137,9 @@ const ErrSolver = [
 
 export function init(selectedStore) {
   store = selectedStore
-  if (sub$) return false
+  if (sub$) return loadCountStatus()
   sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+  loadCountStatus()
   // loadCommunities()
 }
 

containers/Sidebar/schema.js

@@ -33,9 +33,25 @@ const searchCommunities = gql`
   }
 `
 
+const countStatus = gql`
+  query {
+    countStatus {
+      communitiesCount
+      postsCount
+      jobsCount
+      videosCount
+      reposCount
+      categoriesCount
+      tagsCount
+      threadsCount
+    }
+  }
+`
+
 const schema = {
   communities,
   searchCommunities,
+  countStatus,
 }
 
 export default schema

containers/Sidebar/store.js

@@ -14,33 +14,24 @@ import { makeDebugger, markStates, ROUTE, stripMobx } from '../../utils'
 const debug = makeDebugger('S:SidebarStore')
 /* eslint-enable no-unused-vars */
 
-/*
-   const validParts = [
-   ROUTE.COMMUNITIES,
-   ROUTE.COMMUNITY,
-   ROUTE.POSTS,
-   ROUTE.JOBS,
-   ROUTE.ACTIVITIES,
-   ROUTE.CHEATSHEETS,
-   ROUTE.CATEGORIES,
-   ROUTE.EDITORS,
-   ROUTE.THREADS,
-   ROUTE.TAGS,
-   ROUTE.SUBSCRIBERS,
-
-   ROUTE.USERS,
-   ROUTE.PAYS,
-   ROUTE.PASSPORTS,
-   ROUTE.ROLES,
-   ]
- */
+const RootCountStatus = t.model('RootCountStatus', {
+  communitiesCount: t.optional(t.number, 0),
+  postsCount: t.optional(t.number, 0),
+  jobsCount: t.optional(t.number, 0),
+  videosCount: t.optional(t.number, 0),
+  reposCount: t.optional(t.number, 0),
+  categoriesCount: t.optional(t.number, 0),
+  tagsCount: t.optional(t.number, 0),
+  threadsCount: t.optional(t.number, 0),
+})
 
 const SidebarStore = t
   .model('SidebarStore', {
     // open: t.optional(t.boolean, false),
     pin: t.optional(t.boolean, true),
     searchValue: t.optional(t.string, ''),
     matchedCommunities: t.optional(PagedCommunities, emptyPagiData),
+    rootCountStatus: t.optional(RootCountStatus, {}),
     // theme: t.string, // view staff
     // curSelectItem: t.string, // view staff
     // searchBox: t.string, // complex data
@@ -76,6 +67,9 @@ const SidebarStore = t
 
       return R.isEmpty(subPath) ? ROUTE.COMMUNITIES : subPath
     },
+    get rootCountStatusData() {
+      return stripMobx(self.rootCountStatus)
+    },
 
     get communitiesTotalCount() {
       return self.root.communitiesContent.pagedCommunities.totalCount