refactor(ssr): support repos page

Author: mydearxym

containers/CommunitiesBanner/ReposBanner.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { ICON_CMD } from '../../config'
+import { Popover, BannerCountBrief } from '../../components'
+
+import {
+  BannerContentWrapper,
+  Operation,
+  OperationItem,
+  OperationDivider,
+  OperationTitle,
+  OperationIcon,
+  OperationIconChart,
+} from './styles/common_banner'
+
+import * as logic from './logic'
+
+const ReposBanner = ({ 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 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>
+)
+
+export default ReposBanner

containers/CommunitiesBanner/index.js

@@ -13,6 +13,7 @@ import ThreadsBanner from './ThreadsBanner'
 
 import PostsBanner from './PostsBanner'
 import JobsBanner from './JobsBanner'
+import ReposBanner from './ReposBanner'
 
 import { BannerContainer } from './styles'
 
@@ -27,6 +28,7 @@ const ChildBanner = ({
   categoriesTotalCount,
   threadsTotalCount,
   postsTotalCount,
+  reposTotalCount,
   restProps,
 }) => {
   const {
@@ -43,6 +45,8 @@ const ChildBanner = ({
     // jobs
     jobsTotalCount,
     filteredJobsCount,
+    // repo
+    filteredReposCount,
   } = restProps
 
   switch (curRoute.subPath) {
@@ -90,7 +94,12 @@ const ChildBanner = ({
       )
     }
     case ROUTE.REPOS: {
-      return <h3>REPOS Banner</h3>
+      return (
+        <ReposBanner
+          totalCount={reposTotalCount}
+          filteredCount={filteredReposCount}
+        />
+      )
     }
     case ROUTE.VIDEOS: {
       return <h3>VIDEOS Banner</h3>
@@ -125,6 +134,7 @@ class CommunitiesBannerContainer extends React.Component {
       categoriesTotalCount,
       threadsTotalCount,
       postsTotalCount,
+      reposTotalCount,
     } = communitiesBanner
 
     return (
@@ -136,6 +146,7 @@ class CommunitiesBannerContainer extends React.Component {
           threadsTotalCount={threadsTotalCount}
           tagsTotalCount={tagsTotalCount}
           postsTotalCount={postsTotalCount}
+          reposTotalCount={reposTotalCount}
           restProps={stripMobx(communitiesBanner)}
         />
       </BannerContainer>

containers/CommunitiesBanner/store.js

@@ -28,6 +28,8 @@ const CommunitiesBannerStore = t
     // jobs
     jobsTotalCount: t.optional(t.number, 0),
     filteredJobsCount: t.maybeNull(t.number),
+    // repo
+    filteredReposCount: t.maybeNull(t.number),
   })
   .views(self => ({
     get root() {
@@ -48,6 +50,9 @@ const CommunitiesBannerStore = t
     get postsTotalCount() {
       return self.root.communitiesContent.pagedPosts.totalCount
     },
+    get reposTotalCount() {
+      return self.root.communitiesContent.pagedRepos.totalCount
+    },
     get curRoute() {
       return self.root.curRoute
     },

utils/ssr_helper.js

@@ -16,6 +16,9 @@ export const ssrPagedSchema = subpath => {
     case ROUTE.POSTS: {
       return P.pagedPosts
     }
+    case ROUTE.REPOS: {
+      return P.pagedRepos
+    }
     default: {
       return P.pagedCommunities
     }
@@ -44,6 +47,11 @@ export const ssrPagedContents = (mainPath, subPath, resp) => {
         communitiesContent: { pagedPosts: resp.pagedPosts },
       }
     }
+    case ROUTE.REPOS: {
+      return {
+        communitiesContent: { pagedRepos: resp.pagedRepos },
+      }
+    }
     default: {
       return {
         communitiesContent: { pagedCommunities: resp.pagedCommunities },