refactor(normal-community): add jobsTable

Author: mydearxym

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

containers/CommunityBanner/PostsBanner.js

@@ -30,6 +30,11 @@ class PostsBanner extends React.Component {
           totalCount={totalCount}
         />
         <Operation>
+          <OperationItem onClick={console.log}>
+            <OperationIconChart src={`${ICON_CMD}/refresh.svg`} />
+            刷新
+          </OperationItem>
+          <OperationDivider />
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/filter2.svg`} />
             <Popover

containers/CommunityBanner/index.js

@@ -13,6 +13,7 @@ import { makeDebugger, storePlug, stripMobx, ROUTE } from '../../utils'
 import * as logic from './logic'
 
 import PostsBanner from './PostsBanner'
+import JobsBanner from './JobsBanner'
 import TagsBanner from './TagsBanner'
 import ThreadsBanner from './ThreadsBanner'
 import SubscribersBanner from './SubscribersBanner'
@@ -26,10 +27,11 @@ const debug = makeDebugger('C:CommunityBanner')
 const ChildBanner = ({
   curRoute,
   postsTotalCount,
+  jobsTotalCount,
   tagsTotalCount,
   restProps,
 }) => {
-  const { filteredPostsCount } = restProps
+  const { filteredPostsCount, filteredJobsCount } = restProps
 
   switch (curRoute.subPath) {
     case ROUTE.POSTS: {
@@ -40,6 +42,14 @@ const ChildBanner = ({
         />
       )
     }
+    case ROUTE.JOBS: {
+      return (
+        <JobsBanner
+          totalCount={jobsTotalCount}
+          filteredCount={filteredJobsCount}
+        />
+      )
+    }
     case ROUTE.SUBSCRIBERS: {
       return <SubscribersBanner totalCount={100} filteredCount={10} />
     }
@@ -68,13 +78,19 @@ class CommunityBannerContainer extends React.Component {
 
   render() {
     const { communityBanner } = this.props
-    const { route, postsTotalCount, tagsTotalCount } = communityBanner
+    const {
+      curRoute,
+      postsTotalCount,
+      jobsTotalCount,
+      tagsTotalCount,
+    } = communityBanner
 
     return (
       <BannerContainer>
         <ChildBanner
-          curRoute={route}
+          curRoute={curRoute}
           postsTotalCount={postsTotalCount}
+          jobsTotalCount={jobsTotalCount}
           tagsTotalCount={tagsTotalCount}
           restProps={stripMobx(communityBanner)}
         />

containers/CommunityBanner/store.js

@@ -15,6 +15,7 @@ const CommunityBannerStore = t
   .model('CommunityBannerStore', {
     // postsTotalCount: t.optional(t.number, 0),
     filteredPostsCount: t.maybeNull(t.number),
+    filteredJobsCount: t.maybeNull(t.number),
     // tagsTotalCount: t.optional(t.number, 0),
   })
   .views(self => ({
@@ -24,10 +25,13 @@ const CommunityBannerStore = t
     get postsTotalCount() {
       return self.root.communityContent.pagedPosts.totalCount
     },
+    get jobsTotalCount() {
+      return self.root.communityContent.pagedJobs.totalCount
+    },
     get tagsTotalCount() {
       return self.root.communityContent.pagedTags.length
     },
-    get route() {
+    get curRoute() {
       const { mainPath, subPath } = self.root.route
       return {
         mainPath,

containers/CommunityContent/JobsContent.js

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

containers/CommunityContent/index.js

@@ -12,6 +12,7 @@ import { inject, observer } from 'mobx-react'
 import { makeDebugger, storePlug, ROUTE } from '../../utils'
 
 import PostsContent from './PostsContent'
+import JobsContent from './JobsContent'
 import TagsContent from './TagsContent'
 
 import { Wrapper } from './styles'
@@ -21,15 +22,19 @@ import * as logic from './logic'
 const debug = makeDebugger('C:CommunityContent')
 /* eslint-enable no-unused-vars */
 
-const renderChildContent = (curRoute, store, restProps) => {
-  const { pagedPostsData, pagedTagsData } = store
-
+const ChildContent = ({
+  curRoute,
+  pagedPostsData,
+  pagedJobsData,
+  pagedTagsData,
+  restProps,
+}) => {
   switch (curRoute.subPath) {
     case ROUTE.POSTS: {
       return <PostsContent data={pagedPostsData} restProps={restProps} />
     }
     case ROUTE.JOBS: {
-      return <h3>ROUTE.JOBS</h3>
+      return <JobsContent data={pagedJobsData} restProps={restProps} />
     }
     case ROUTE.REPOS: {
       return <h3>ROUTE.REPOS</h3>
@@ -61,12 +66,23 @@ class CommunityContentContainer extends React.Component {
 
   render() {
     const { communityContent } = this.props
-    const { curRoute } = communityContent
+    const {
+      curRoute,
+      pagedPostsData,
+      pagedJobsData,
+      pagedTagsData,
+    } = communityContent
     const restProps = { ...communityContent }
 
     return (
       <Wrapper>
-        {renderChildContent(curRoute, communityContent, restProps)}
+        <ChildContent
+          curRoute={curRoute}
+          pagedPostsData={pagedPostsData}
+          pagedJobsData={pagedJobsData}
+          pagedTagsData={pagedTagsData}
+          restProps={restProps}
+        />
       </Wrapper>
     )
   }

containers/CommunityContent/logic.js

@@ -43,6 +43,13 @@ export function loadPosts(page = 1) {
   sr71$.query(S.pagedPosts, commonFilter(page, community))
 }
 
+export function loadJobs(page = 1) {
+  scrollIntoEle(TYPE.APP_HEADER_ID)
+  store.markState({ jobsLoading: true })
+  const { mainPath: community } = store.curRoute
+  sr71$.query(S.pagedJobs, commonFilter(page, community))
+}
+
 export function loadTags() {
   scrollIntoEle(TYPE.APP_HEADER_ID)
   store.markState({ tagsLoading: true })
@@ -61,6 +68,7 @@ const cancleLoading = () => {
   store.markState({
     // communitiesLoading: false,
     postsLoading: false,
+    jobsLoading: false,
     tagsLoading: false,
   })
 }
@@ -73,6 +81,13 @@ const DataSolver = [
       store.markState({ pagedPosts })
     },
   },
+  {
+    match: asyncRes('pagedJobs'),
+    action: ({ pagedJobs }) => {
+      cancleLoading()
+      store.markState({ pagedJobs })
+    },
+  },
   {
     match: asyncRes('partialTags'),
     action: ({ partialTags }) => {
@@ -100,7 +115,7 @@ const DataSolver = [
           return loadPosts()
         }
         case ROUTE.JOBS: {
-          return console.log('todo')
+          return loadJobs()
         }
         case ROUTE.REPOS: {
           return console.log('todo')

containers/CommunityContent/store.js

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

utils/ssr_helper.js

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