refactor(tables): add reposTable to community & ssr

Author: mydearxym

containers/CommunityBanner/ReposBanner.js

@@ -0,0 +1,50 @@
+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} />
+    <Operation>
+      <OperationItem onClick={console.log}>
+        <OperationIconChart src={`${ICON_CMD}/refresh.svg`} />
+        刷新
+      </OperationItem>
+      <OperationDivider />
+      <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`} />
+        图表
+      </OperationItem>
+    </Operation>
+  </BannerContentWrapper>
+)
+
+export default ReposBanner

containers/CommunityBanner/index.js

@@ -15,6 +15,7 @@ import * as logic from './logic'
 import PostsBanner from './PostsBanner'
 import JobsBanner from './JobsBanner'
 import VideosBanner from './VideosBanner'
+import ReposBanner from './ReposBanner'
 import TagsBanner from './TagsBanner'
 import ThreadsBanner from './ThreadsBanner'
 import SubscribersBanner from './SubscribersBanner'
@@ -30,13 +31,15 @@ const ChildBanner = ({
   postsTotalCount,
   jobsTotalCount,
   videosTotalCount,
+  reposTotalCount,
   tagsTotalCount,
   restProps,
 }) => {
   const {
     filteredPostsCount,
     filteredJobsCount,
     filteredVideosCount,
+    filteredReposCount,
   } = restProps
 
   switch (curRoute.subPath) {
@@ -64,6 +67,14 @@ const ChildBanner = ({
         />
       )
     }
+    case ROUTE.REPOS: {
+      return (
+        <ReposBanner
+          totalCount={reposTotalCount}
+          filteredCount={filteredReposCount}
+        />
+      )
+    }
     case ROUTE.SUBSCRIBERS: {
       return <SubscribersBanner totalCount={100} filteredCount={10} />
     }
@@ -97,6 +108,7 @@ class CommunityBannerContainer extends React.Component {
       postsTotalCount,
       jobsTotalCount,
       videosTotalCount,
+      reposTotalCount,
       tagsTotalCount,
     } = communityBanner
 
@@ -107,6 +119,7 @@ class CommunityBannerContainer extends React.Component {
           postsTotalCount={postsTotalCount}
           jobsTotalCount={jobsTotalCount}
           videosTotalCount={videosTotalCount}
+          reposTotalCount={reposTotalCount}
           tagsTotalCount={tagsTotalCount}
           restProps={stripMobx(communityBanner)}
         />

containers/CommunityBanner/store.js

@@ -17,6 +17,7 @@ const CommunityBannerStore = t
     filteredPostsCount: t.maybeNull(t.number),
     filteredJobsCount: t.maybeNull(t.number),
     filteredVideosCount: t.maybeNull(t.number),
+    filteredReposCount: t.maybeNull(t.number),
     // tagsTotalCount: t.optional(t.number, 0),
   })
   .views(self => ({
@@ -32,6 +33,9 @@ const CommunityBannerStore = t
     get videosTotalCount() {
       return self.root.communityContent.pagedVideos.totalCount
     },
+    get reposTotalCount() {
+      return self.root.communityContent.pagedRepos.totalCount
+    },
     get tagsTotalCount() {
       return self.root.communityContent.pagedTags.length
     },

containers/CommunityContent/ReposContent.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import ReposTable from '../../components/ReposTable'
+
+// import { OperationWrapper } from './styles'
+import * as logic from './logic'
+
+/* eslint-disable react/display-name */
+const ReposContent = ({ data, restProps: { reposLoading } }) => (
+  <ReposTable
+    data={data}
+    loading={reposLoading}
+    onDelete={logic.onDelete}
+    onEdit={logic.onEdit}
+  />
+)
+
+export default ReposContent

containers/CommunityContent/index.js

@@ -15,6 +15,7 @@ import PostsContent from './PostsContent'
 import JobsContent from './JobsContent'
 import TagsContent from './TagsContent'
 import VideosContent from './VideosContent'
+import ReposContent from './ReposContent'
 
 import { Wrapper } from './styles'
 import * as logic from './logic'
@@ -28,6 +29,7 @@ const ChildContent = ({
   pagedPostsData,
   pagedJobsData,
   pagedVideosData,
+  pagedReposData,
   pagedTagsData,
   restProps,
 }) => {
@@ -39,7 +41,7 @@ const ChildContent = ({
       return <JobsContent data={pagedJobsData} restProps={restProps} />
     }
     case ROUTE.REPOS: {
-      return <h3>ROUTE.REPOS</h3>
+      return <ReposContent data={pagedReposData} restProps={restProps} />
     }
     case ROUTE.VIDEOS: {
       return <VideosContent data={pagedVideosData} restProps={restProps} />
@@ -73,19 +75,19 @@ class CommunityContentContainer extends React.Component {
       pagedPostsData,
       pagedJobsData,
       pagedVideosData,
+      pagedReposData,
       pagedTagsData,
     } = communityContent
     const restProps = { ...communityContent }
 
-    console.log('the fuck pagedVideosData: ', pagedVideosData)
-
     return (
       <Wrapper>
         <ChildContent
           curRoute={curRoute}
           pagedPostsData={pagedPostsData}
           pagedJobsData={pagedJobsData}
           pagedVideosData={pagedVideosData}
+          pagedReposData={pagedReposData}
           pagedTagsData={pagedTagsData}
           restProps={restProps}
         />

containers/CommunityContent/logic.js

@@ -57,6 +57,13 @@ export function loadVideos(page = 1) {
   sr71$.query(S.pagedVideos, commonFilter(page, community))
 }
 
+export function loadRepos(page = 1) {
+  scrollIntoEle(TYPE.APP_HEADER_ID)
+  store.markState({ reposLoading: true })
+  const { mainPath: community } = store.curRoute
+  sr71$.query(S.pagedRepos, commonFilter(page, community))
+}
+
 export function loadTags() {
   scrollIntoEle(TYPE.APP_HEADER_ID)
   store.markState({ tagsLoading: true })
@@ -104,6 +111,13 @@ const DataSolver = [
       store.markState({ pagedVideos })
     },
   },
+  {
+    match: asyncRes('pagedRepos'),
+    action: ({ pagedRepos }) => {
+      cancleLoading()
+      store.markState({ pagedRepos })
+    },
+  },
   {
     match: asyncRes('partialTags'),
     action: ({ partialTags }) => {
@@ -131,7 +145,7 @@ const DataSolver = [
           return loadJobs()
         }
         case ROUTE.REPOS: {
-          return console.log('todo')
+          return loadRepos()
         }
         case ROUTE.VIDEOS: {
           return loadVideos()

containers/CommunityContent/store.js

@@ -60,6 +60,9 @@ const CommunityContentStore = t
     get pagedVideosData() {
       return stripMobx(self.pagedVideos)
     },
+    get pagedReposData() {
+      return stripMobx(self.pagedRepos)
+    },
     get pagedTagsData() {
       return { entries: stripMobx(self.pagedTags) }
     },

utils/ssr_helper.js

@@ -64,6 +64,11 @@ const ssrCommunityContents = (subPath, resp) => {
         communityContent: { pagedVideos: resp.pagedVideos },
       }
     }
+    case ROUTE.REPOS: {
+      return {
+        communityContent: { pagedRepos: resp.pagedRepos },
+      }
+    }
     case ROUTE.TAGS: {
       return {
         communityContent: { pagedTags: resp.partialTags },