refactor(tables): add repos table to community with ssr

Author: mydearxym

containers/CommunitiesContent/logic.js

@@ -225,15 +225,16 @@ export function unsetTag(threadId, tag) {
 }
 
 /* when error occured cancle all the loading state */
-const cancleLoading = () => {
+const cancleLoading = () =>
   store.markState({
     communitiesLoading: false,
     postsLoading: false,
     jobsLoading: false,
+    reposLoading: false,
+    videosLoading: false,
     tagsLoading: false,
     categoriessLoading: false,
   })
-}
 
 const DataSolver = [
   {

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

containers/CommunityBanner/index.js

@@ -14,6 +14,7 @@ import * as logic from './logic'
 
 import PostsBanner from './PostsBanner'
 import JobsBanner from './JobsBanner'
+import VideosBanner from './VideosBanner'
 import TagsBanner from './TagsBanner'
 import ThreadsBanner from './ThreadsBanner'
 import SubscribersBanner from './SubscribersBanner'
@@ -28,10 +29,15 @@ const ChildBanner = ({
   curRoute,
   postsTotalCount,
   jobsTotalCount,
+  videosTotalCount,
   tagsTotalCount,
   restProps,
 }) => {
-  const { filteredPostsCount, filteredJobsCount } = restProps
+  const {
+    filteredPostsCount,
+    filteredJobsCount,
+    filteredVideosCount,
+  } = restProps
 
   switch (curRoute.subPath) {
     case ROUTE.POSTS: {
@@ -50,6 +56,14 @@ const ChildBanner = ({
         />
       )
     }
+    case ROUTE.VIDEOS: {
+      return (
+        <VideosBanner
+          totalCount={videosTotalCount}
+          filteredCount={filteredVideosCount}
+        />
+      )
+    }
     case ROUTE.SUBSCRIBERS: {
       return <SubscribersBanner totalCount={100} filteredCount={10} />
     }
@@ -82,6 +96,7 @@ class CommunityBannerContainer extends React.Component {
       curRoute,
       postsTotalCount,
       jobsTotalCount,
+      videosTotalCount,
       tagsTotalCount,
     } = communityBanner
 
@@ -91,6 +106,7 @@ class CommunityBannerContainer extends React.Component {
           curRoute={curRoute}
           postsTotalCount={postsTotalCount}
           jobsTotalCount={jobsTotalCount}
+          videosTotalCount={videosTotalCount}
           tagsTotalCount={tagsTotalCount}
           restProps={stripMobx(communityBanner)}
         />

containers/CommunityBanner/store.js

@@ -16,6 +16,7 @@ const CommunityBannerStore = t
     // postsTotalCount: t.optional(t.number, 0),
     filteredPostsCount: t.maybeNull(t.number),
     filteredJobsCount: t.maybeNull(t.number),
+    filteredVideosCount: t.maybeNull(t.number),
     // tagsTotalCount: t.optional(t.number, 0),
   })
   .views(self => ({
@@ -28,6 +29,9 @@ const CommunityBannerStore = t
     get jobsTotalCount() {
       return self.root.communityContent.pagedJobs.totalCount
     },
+    get videosTotalCount() {
+      return self.root.communityContent.pagedVideos.totalCount
+    },
     get tagsTotalCount() {
       return self.root.communityContent.pagedTags.length
     },

containers/CommunityContent/VideosContent.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import VideosTable from '../../components/VideosTable'
+import * as logic from './logic'
+
+const VideosContent = ({ data, restProps: { videosLoading } }) => (
+  <VideosTable
+    data={data}
+    loading={videosLoading}
+    onDelete={logic.onDelete}
+    onEdit={logic.onEdit}
+  />
+)
+
+export default VideosContent

containers/CommunityContent/index.js

@@ -14,6 +14,7 @@ import { makeDebugger, storePlug, ROUTE } from '../../utils'
 import PostsContent from './PostsContent'
 import JobsContent from './JobsContent'
 import TagsContent from './TagsContent'
+import VideosContent from './VideosContent'
 
 import { Wrapper } from './styles'
 import * as logic from './logic'
@@ -26,6 +27,7 @@ const ChildContent = ({
   curRoute,
   pagedPostsData,
   pagedJobsData,
+  pagedVideosData,
   pagedTagsData,
   restProps,
 }) => {
@@ -40,7 +42,7 @@ const ChildContent = ({
       return <h3>ROUTE.REPOS</h3>
     }
     case ROUTE.VIDEOS: {
-      return <h3>ROUTE.VIDEOS</h3>
+      return <VideosContent data={pagedVideosData} restProps={restProps} />
     }
     case ROUTE.TAGS: {
       return <TagsContent data={pagedTagsData} restProps={restProps} />
@@ -70,16 +72,20 @@ class CommunityContentContainer extends React.Component {
       curRoute,
       pagedPostsData,
       pagedJobsData,
+      pagedVideosData,
       pagedTagsData,
     } = communityContent
     const restProps = { ...communityContent }
 
+    console.log('the fuck pagedVideosData: ', pagedVideosData)
+
     return (
       <Wrapper>
         <ChildContent
           curRoute={curRoute}
           pagedPostsData={pagedPostsData}
           pagedJobsData={pagedJobsData}
+          pagedVideosData={pagedVideosData}
           pagedTagsData={pagedTagsData}
           restProps={restProps}
         />

containers/CommunityContent/logic.js

@@ -50,6 +50,13 @@ export function loadJobs(page = 1) {
   sr71$.query(S.pagedJobs, commonFilter(page, community))
 }
 
+export function loadVideos(page = 1) {
+  scrollIntoEle(TYPE.APP_HEADER_ID)
+  store.markState({ videosLoading: true })
+  const { mainPath: community } = store.curRoute
+  sr71$.query(S.pagedVideos, commonFilter(page, community))
+}
+
 export function loadTags() {
   scrollIntoEle(TYPE.APP_HEADER_ID)
   store.markState({ tagsLoading: true })
@@ -69,6 +76,8 @@ const cancleLoading = () => {
     // communitiesLoading: false,
     postsLoading: false,
     jobsLoading: false,
+    videosLoading: false,
+    reposLoading: false,
     tagsLoading: false,
   })
 }
@@ -88,6 +97,13 @@ const DataSolver = [
       store.markState({ pagedJobs })
     },
   },
+  {
+    match: asyncRes('pagedVideos'),
+    action: ({ pagedVideos }) => {
+      cancleLoading()
+      store.markState({ pagedVideos })
+    },
+  },
   {
     match: asyncRes('partialTags'),
     action: ({ partialTags }) => {
@@ -102,9 +118,6 @@ const DataSolver = [
       debug('SIDEBAR_MENU_CHANGE ', res[EVENT.SIDEBAR_MENU_CHANGE].data)
 
       switch (subPath) {
-        case ROUTE.CATEGORIES: {
-          return console.log('todo')
-        }
         case ROUTE.TAGS: {
           return loadTags()
         }
@@ -121,7 +134,7 @@ const DataSolver = [
           return console.log('todo')
         }
         case ROUTE.VIDEOS: {
-          return console.log('todo')
+          return loadVideos()
         }
         default: {
           return console.log('todo')

containers/CommunityContent/store.js

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

utils/ssr_helper.js

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