Skip to content
This repository was archived by the owner on Nov 1, 2021. It is now read-only.

Commit 4911eb1

Browse files
mydearxymmydearxym
committed
refactor: community posts & tags with standar workflow
1 parent 10cb079 commit 4911eb1

File tree

19 files changed

+199
-279
lines changed

19 files changed

+199
-279
lines changed

‎containers/CommunitiesBanner/TagsBanner.js‎

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,40 @@ import {
1616

1717
import * as logic from './logic'
1818

19-
class TagsBanner extends React.Component {
20-
componentDidMount() {
21-
logic.loadTags()
22-
}
23-
24-
render() {
25-
const { filteredCount, totalCount } = this.props
26-
return (
27-
<BannerContentWrapper>
28-
<BannerCountBrief
29-
filteredCount={filteredCount}
30-
totalCount={totalCount}
31-
thread="标签"
32-
/>
33-
<Operation>
34-
<OperationItem>
35-
<OperationIcon src={`${ICON_CMD}/filter2.svg`} />
36-
<Popover
37-
content={<div>兼容各个页面的 Filter 菜单</div>}
38-
trigger="hover"
39-
>
40-
<OperationTitle>过滤</OperationTitle>
41-
</Popover>
42-
<FilterTags>
43-
<Tag closable>最多xx</Tag>
44-
<Tag closable>最少..</Tag>
45-
</FilterTags>
46-
</OperationItem>
47-
<OperationDivider />
48-
<OperationItem onClick={logic.onAdd.bind(this, 'tags')}>
49-
<OperationIconChart src={`${ICON_CMD}/plus.svg`} />
50-
添加
51-
</OperationItem>
52-
<OperationDivider />
53-
<OperationItem>
54-
<OperationIcon src={`${ICON_CMD}/chart.svg`} />
55-
{/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
56-
图表
57-
</OperationItem>
58-
</Operation>
59-
</BannerContentWrapper>
60-
)
61-
}
62-
}
19+
const TagsBanner = ({ filteredCount, totalCount }) => (
20+
<BannerContentWrapper>
21+
<BannerCountBrief
22+
filteredCount={filteredCount}
23+
totalCount={totalCount}
24+
thread="标签"
25+
/>
26+
<Operation>
27+
<OperationItem>
28+
<OperationIcon src={`${ICON_CMD}/filter2.svg`} />
29+
<Popover
30+
content={<div>兼容各个页面的 Filter 菜单</div>}
31+
trigger="hover"
32+
>
33+
<OperationTitle>过滤</OperationTitle>
34+
</Popover>
35+
<FilterTags>
36+
<Tag closable>最多xx</Tag>
37+
<Tag closable>最少..</Tag>
38+
</FilterTags>
39+
</OperationItem>
40+
<OperationDivider />
41+
<OperationItem onClick={logic.onAdd.bind(this, 'tags')}>
42+
<OperationIconChart src={`${ICON_CMD}/plus.svg`} />
43+
添加
44+
</OperationItem>
45+
<OperationDivider />
46+
<OperationItem>
47+
<OperationIcon src={`${ICON_CMD}/chart.svg`} />
48+
{/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
49+
图表
50+
</OperationItem>
51+
</Operation>
52+
</BannerContentWrapper>
53+
)
6354

6455
export default TagsBanner

‎containers/CommunityBanner/TagsBanner.js‎

Lines changed: 36 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -16,50 +16,41 @@ import {
1616

1717
import * as logic from './logic'
1818

19-
class TagsBanner extends React.Component {
20-
componentDidMount() {
21-
logic.loadTags()
22-
}
23-
24-
render() {
25-
const { totalCount, filteredCount } = this.props
26-
return (
27-
<BannerContentWrapper>
28-
<BannerCountBrief
29-
filteredCount={filteredCount}
30-
totalCount={totalCount}
31-
thread="标签"
32-
unit="个"
33-
/>
34-
<Operation>
35-
<OperationItem>
36-
<OperationIcon src={`${ICON_CMD}/filter2.svg`} />
37-
<Popover
38-
content={<div>兼容各个页面的 Filter 菜单</div>}
39-
trigger="hover"
40-
>
41-
<OperationTitle>过滤</OperationTitle>
42-
</Popover>
43-
<FilterTags>
44-
<Tag closable>最多xx</Tag>
45-
<Tag closable>最少..</Tag>
46-
</FilterTags>
47-
</OperationItem>
48-
<OperationDivider />
49-
<OperationItem onClick={logic.onAdd}>
50-
<OperationIconChart src={`${ICON_CMD}/plus.svg`} />
51-
添加
52-
</OperationItem>
53-
<OperationDivider />
54-
<OperationItem>
55-
<OperationIcon src={`${ICON_CMD}/chart.svg`} />
56-
{/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
57-
图表
58-
</OperationItem>
59-
</Operation>
60-
</BannerContentWrapper>
61-
)
62-
}
63-
}
19+
const TagsBanner = ({ totalCount, filteredCount }) => (
20+
<BannerContentWrapper>
21+
<BannerCountBrief
22+
filteredCount={filteredCount}
23+
totalCount={totalCount}
24+
thread="标签"
25+
unit="个"
26+
/>
27+
<Operation>
28+
<OperationItem>
29+
<OperationIcon src={`${ICON_CMD}/filter2.svg`} />
30+
<Popover
31+
content={<div>兼容各个页面的 Filter 菜单</div>}
32+
trigger="hover"
33+
>
34+
<OperationTitle>过滤</OperationTitle>
35+
</Popover>
36+
<FilterTags>
37+
<Tag closable>最多xx</Tag>
38+
<Tag closable>最少..</Tag>
39+
</FilterTags>
40+
</OperationItem>
41+
<OperationDivider />
42+
<OperationItem onClick={logic.onAdd}>
43+
<OperationIconChart src={`${ICON_CMD}/plus.svg`} />
44+
添加
45+
</OperationItem>
46+
<OperationDivider />
47+
<OperationItem>
48+
<OperationIcon src={`${ICON_CMD}/chart.svg`} />
49+
{/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
50+
图表
51+
</OperationItem>
52+
</Operation>
53+
</BannerContentWrapper>
54+
)
6455

6556
export default TagsBanner

‎containers/CommunityBanner/index.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { inject, observer } from 'mobx-react'
99

1010
// import Link from 'next/link'
1111

12-
import { makeDebugger, storePlug, ROUTE } from '../../utils'
12+
import { makeDebugger, storePlug, stripMobx, ROUTE } from '../../utils'
1313
import * as logic from './logic'
1414

1515
import PostsBanner from './PostsBanner'
@@ -23,17 +23,15 @@ import { BannerContainer } from './styles'
2323
const debug = makeDebugger('C:CommunityBanner')
2424
/* eslint-enable no-unused-vars */
2525

26-
const renderChildBanner = (route, store) => {
27-
const {
28-
/* totalCount, */
29-
/* curTotalCount, */
30-
tagsTotalCount,
31-
postsTotalCount,
32-
filteredPostsCount,
33-
/* curPostsTotalCount, */
34-
} = store
26+
const ChildBanner = ({
27+
curRoute,
28+
postsTotalCount,
29+
tagsTotalCount,
30+
restProps,
31+
}) => {
32+
const { filteredPostsCount } = restProps
3533

36-
switch (route.subPath) {
34+
switch (curRoute.subPath) {
3735
case ROUTE.POSTS: {
3836
return (
3937
<PostsBanner
@@ -70,11 +68,16 @@ class CommunityBannerContainer extends React.Component {
7068

7169
render() {
7270
const { communityBanner } = this.props
73-
const { route } = communityBanner
71+
const { route, postsTotalCount, tagsTotalCount } = communityBanner
7472

7573
return (
7674
<BannerContainer>
77-
{renderChildBanner(route, communityBanner)}
75+
<ChildBanner
76+
curRoute={route}
77+
postsTotalCount={postsTotalCount}
78+
tagsTotalCount={tagsTotalCount}
79+
restProps={stripMobx(communityBanner)}
80+
/>
7881
</BannerContainer>
7982
)
8083
}

‎containers/CommunityBanner/logic.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ export function loadPosts() {
1818
sr71$.query(S.pagedPosts, { filter: {} })
1919
}
2020

21-
export function loadTags() {
22-
sr71$.query(S.pagedTags, { filter: {} })
23-
}
24-
2521
// TODO: should be loadSubscribers
2622
export function loadUsers() {}
2723

‎containers/CommunityBanner/store.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,20 @@ const debug = makeDebugger('S:CommunityBannerStore')
1313

1414
const CommunityBannerStore = t
1515
.model('CommunityBannerStore', {
16-
postsTotalCount: t.optional(t.number, 0),
16+
// postsTotalCount: t.optional(t.number, 0),
1717
filteredPostsCount: t.maybeNull(t.number),
18-
tagsTotalCount: t.optional(t.number, 0),
18+
// tagsTotalCount: t.optional(t.number, 0),
1919
})
2020
.views(self => ({
2121
get root() {
2222
return getParent(self)
2323
},
24+
get postsTotalCount() {
25+
return self.root.communityContent.pagedPosts.totalCount
26+
},
27+
get tagsTotalCount() {
28+
return self.root.communityContent.pagedTags.length
29+
},
2430
get route() {
2531
const { mainPath, subPath } = self.root.route
2632
return {

0 commit comments

Comments
 (0)