refactor(ssr): add video page add & ssr support

Author: mydearxym

containers/CommunitiesBanner/VideosBanner.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 VideosBanner = ({ 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 VideosBanner

containers/CommunitiesBanner/index.js

@@ -14,6 +14,7 @@ import ThreadsBanner from './ThreadsBanner'
 import PostsBanner from './PostsBanner'
 import JobsBanner from './JobsBanner'
 import ReposBanner from './ReposBanner'
+import VideosBanner from './VideosBanner'
 
 import { BannerContainer } from './styles'
 
@@ -28,7 +29,9 @@ const ChildBanner = ({
   categoriesTotalCount,
   threadsTotalCount,
   postsTotalCount,
+  jobsTotalCount,
   reposTotalCount,
+  videosTotalCount,
   restProps,
 }) => {
   const {
@@ -43,10 +46,11 @@ const ChildBanner = ({
     // posts
     filteredPostsCount,
     // jobs
-    jobsTotalCount,
     filteredJobsCount,
     // repo
     filteredReposCount,
+    // video
+    filteredVideosCount,
   } = restProps
 
   switch (curRoute.subPath) {
@@ -102,7 +106,12 @@ const ChildBanner = ({
       )
     }
     case ROUTE.VIDEOS: {
-      return <h3>VIDEOS Banner</h3>
+      return (
+        <VideosBanner
+          totalCount={videosTotalCount}
+          filteredCount={filteredVideosCount}
+        />
+      )
     }
     default: {
       return (
@@ -134,7 +143,9 @@ class CommunitiesBannerContainer extends React.Component {
       categoriesTotalCount,
       threadsTotalCount,
       postsTotalCount,
+      jobsTotalCount,
       reposTotalCount,
+      videosTotalCount,
     } = communitiesBanner
 
     return (
@@ -146,7 +157,9 @@ class CommunitiesBannerContainer extends React.Component {
           threadsTotalCount={threadsTotalCount}
           tagsTotalCount={tagsTotalCount}
           postsTotalCount={postsTotalCount}
+          jobsTotalCount={jobsTotalCount}
           reposTotalCount={reposTotalCount}
+          videosTotalCount={videosTotalCount}
           restProps={stripMobx(communitiesBanner)}
         />
       </BannerContainer>

containers/CommunitiesBanner/store.js

@@ -13,23 +13,15 @@ const debug = makeDebugger('S:CommunitiesBannerStore')
 
 const CommunitiesBannerStore = t
   .model('CommunitiesBannerStore', {
-    // communities: totalCount of all
-    // totalCount: t.optional(t.number, 0),
-    filteredTotalCount: t.maybeNull(t.number),
-    // categories
-    filterdCategoriesCount: t.maybeNull(t.number),
-    // tags
-    filterdTagsCount: t.maybeNull(t.number),
-    // threads
-    filterdThreadsCount: t.maybeNull(t.number),
-    // posts
-    // postsTotalCount: t.optional(t.number, 0),
-    filteredPostsCount: t.maybeNull(t.number),
-    // jobs
-    jobsTotalCount: t.optional(t.number, 0),
-    filteredJobsCount: t.maybeNull(t.number),
-    // repo
-    filteredReposCount: t.maybeNull(t.number),
+    filteredTotalCount: t.maybeNull(t.number), // communities
+    filterdCategoriesCount: t.maybeNull(t.number), // categories
+    filterdTagsCount: t.maybeNull(t.number), // tags
+    filterdThreadsCount: t.maybeNull(t.number), // threads
+
+    filteredPostsCount: t.maybeNull(t.number), // posts
+    filteredJobsCount: t.maybeNull(t.number), // jobs
+    filteredReposCount: t.maybeNull(t.number), // repo
+    filteredVideosCount: t.maybeNull(t.number), // video
   })
   .views(self => ({
     get root() {
@@ -50,9 +42,15 @@ const CommunitiesBannerStore = t
     get postsTotalCount() {
       return self.root.communitiesContent.pagedPosts.totalCount
     },
+    get jobsTotalCount() {
+      return self.root.communitiesContent.pagedJobs.totalCount
+    },
     get reposTotalCount() {
       return self.root.communitiesContent.pagedRepos.totalCount
     },
+    get videosTotalCount() {
+      return self.root.communitiesContent.pagedVideos.totalCount
+    },
     get curRoute() {
       return self.root.curRoute
     },

containers/CommunitiesContent/JobsContent.js

@@ -157,41 +157,27 @@ const columns = [
   },
 ]
 
-class JobsContent extends React.Component {
-  componentDidMount() {
-    logic.loadJobs()
-  }
-
-  render() {
-    const {
-      data,
-      restProps: { communitiesLoading },
-    } = this.props
-    return (
+const JobsContent = ({ data, restProps: { communitiesLoading } }) => (
+  <React.Fragment>
+    {data ? (
       <div>
-        {data ? (
-          <div>
-            <Table
-              columns={columns}
-              dataSource={data.entries}
-              scroll={{ x: 2000 }}
-              loading={TableLoading(communitiesLoading)}
-              pagination={false}
-            />
-            <Pagi
-              left="-10px"
-              pageNumber={data.pageNumber}
-              pageSize={data.pageSize}
-              totalCount={data.totalCount}
-              onChange={logic.loadJobs}
-            />
-          </div>
-        ) : (
-          <div />
-        )}
+        <Table
+          columns={columns}
+          dataSource={data.entries}
+          scroll={{ x: 2000 }}
+          loading={TableLoading(communitiesLoading)}
+          pagination={false}
+        />
+        <Pagi
+          left="-10px"
+          pageNumber={data.pageNumber}
+          pageSize={data.pageSize}
+          totalCount={data.totalCount}
+          onChange={logic.loadJobs}
+        />
       </div>
-    )
-  }
-}
+    ) : null}
+  </React.Fragment>
+)
 
 export default JobsContent