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

Commit 8ad7cc2

Browse files
mydearxymmydearxym
committed
feat(ssr): improve store pass down
1 parent 8afe539 commit 8ad7cc2

File tree

9 files changed

+89
-184
lines changed

9 files changed

+89
-184
lines changed

‎containers/CommunitiesBanner/IndexBanner.js‎

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

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

19-
class IndexBanner extends React.Component {
20-
componentDidMount() {
21-
logic.loadCommunities()
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-
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-
</FilterTags>
46-
</OperationItem>
47-
<OperationDivider />
48-
<OperationItem onClick={logic.onSearch}>
49-
<OperationIconChart src={`${ICON_CMD}/search2.svg`} />
50-
搜索
51-
</OperationItem>
52-
<OperationDivider />
53-
<OperationItem onClick={logic.onAdd.bind(this, 'communities')}>
54-
<OperationIconChart src={`${ICON_CMD}/plus.svg`} />
55-
添加
56-
</OperationItem>
57-
<OperationDivider />
58-
<OperationItem>
59-
<OperationIcon src={`${ICON_CMD}/chart.svg`} />
60-
{/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
61-
图表
62-
</OperationItem>
63-
</Operation>
64-
</BannerContentWrapper>
65-
)
66-
}
67-
}
19+
const IndexBanner = ({ filteredCount, totalCount }) => (
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+
</FilterTags>
39+
</OperationItem>
40+
<OperationDivider />
41+
<OperationItem onClick={logic.onSearch}>
42+
<OperationIconChart src={`${ICON_CMD}/search2.svg`} />
43+
搜索
44+
</OperationItem>
45+
<OperationDivider />
46+
<OperationItem onClick={logic.onAdd.bind(this, 'communities')}>
47+
<OperationIconChart src={`${ICON_CMD}/plus.svg`} />
48+
添加
49+
</OperationItem>
50+
<OperationDivider />
51+
<OperationItem>
52+
<OperationIcon src={`${ICON_CMD}/chart.svg`} />
53+
{/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
54+
图表
55+
</OperationItem>
56+
</Operation>
57+
</BannerContentWrapper>
58+
)
6859

6960
export default IndexBanner

‎containers/CommunitiesBanner/index.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,9 @@ import { BannerContainer } from './styles'
2020
const debug = makeDebugger('C:CommunitiesBanner')
2121
/* eslint-enable no-unused-vars */
2222

23-
const ChildBanner = ({ curRoute, store }) => {
23+
const ChildBanner = ({ curRoute, totalCount, restProps }) => {
2424
const {
2525
// communities
26-
totalCount,
2726
filteredTotalCount,
2827
// tags
2928
tagsTotalCount,
@@ -40,7 +39,7 @@ const ChildBanner = ({ curRoute, store }) => {
4039
// jobs
4140
jobsTotalCount,
4241
filteredJobsCount,
43-
} = store
42+
} = restProps
4443

4544
switch (curRoute.subPath) {
4645
case ROUTE.CATEGORIES: {
@@ -110,13 +109,18 @@ class CommunitiesBannerContainer extends React.Component {
110109

111110
render() {
112111
const { communitiesBanner } = this.props
113-
const { curRoute } = communitiesBanner
112+
const { curRoute, totalCount } = communitiesBanner
114113

115114
// console.log('totalCount --> ', communitiesBanner.totalCount)
116-
console.log('the fucking curRoute: ', curRoute)
115+
console.log('the fucking totalCount: ', totalCount)
116+
117117
return (
118118
<BannerContainer>
119-
<ChildBanner curRoute={curRoute} store={stripMobx(communitiesBanner)} />
119+
<ChildBanner
120+
curRoute={curRoute}
121+
totalCount={totalCount}
122+
restProps={stripMobx(communitiesBanner)}
123+
/>
120124
</BannerContainer>
121125
)
122126
}

‎containers/CommunitiesBanner/store.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const debug = makeDebugger('S:CommunitiesBannerStore')
1414
const CommunitiesBannerStore = t
1515
.model('CommunitiesBannerStore', {
1616
// communities: totalCount of all
17-
totalCount: t.optional(t.number, 0),
17+
// totalCount: t.optional(t.number, 0),
1818
filteredTotalCount: t.maybeNull(t.number),
1919
// categories
2020
categoriesTotalCount: t.optional(t.number, 0),
@@ -36,6 +36,9 @@ const CommunitiesBannerStore = t
3636
get root() {
3737
return getParent(self)
3838
},
39+
get totalCount() {
40+
return self.root.communitiesContent.pagedCommunities.totalCount
41+
},
3942
get curRoute() {
4043
return self.root.curRoute
4144
},

‎containers/CommunitiesContent/CategoriesContent.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,10 @@ class CategoriesContent extends React.Component {
104104
}
105105

106106
render() {
107-
const { data, restProps: { categoriesLoading } } = this.props
107+
const {
108+
data,
109+
restProps: { categoriesLoading },
110+
} = this.props
108111

109112
return (
110113
<div>

‎containers/CommunitiesContent/store.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,24 @@ import {
1313
PagedThreads,
1414
PagedCategories,
1515
PagedCommunities,
16+
emptyPagiData,
1617
} from '../../stores/SharedModel'
1718
import { markStates, makeDebugger, stripMobx } from '../../utils'
19+
1820
/* eslint-disable no-unused-vars */
1921
const debug = makeDebugger('S:CommunitiesContentStore')
2022
/* eslint-enable no-unused-vars */
2123

2224
const CommunitiesContentStore = t
2325
.model('CommunitiesContentStore', {
2426
// all the communities
25-
pagedCommunities: t.maybeNull(PagedCommunities),
26-
pagedCategories: t.maybeNull(PagedCategories),
27-
pagedTags: t.maybeNull(PagedTags),
28-
pagedThreads: t.maybeNull(PagedThreads),
27+
pagedCommunities: t.optional(PagedCommunities, emptyPagiData),
28+
pagedCategories: t.optional(PagedCategories, emptyPagiData),
29+
pagedTags: t.optional(PagedTags, emptyPagiData),
30+
pagedThreads: t.optional(PagedThreads, emptyPagiData),
2931

30-
pagedPosts: t.maybeNull(PagedPosts),
31-
pagedJobs: t.maybeNull(PagedJobs),
32+
pagedPosts: t.optional(PagedPosts, emptyPagiData),
33+
pagedJobs: t.optional(PagedJobs, emptyPagiData),
3234

3335
communitiesLoading: t.optional(t.boolean, false),
3436
tagsLoading: t.optional(t.boolean, false),

‎containers/Header/index.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import React from 'react'
88
import R from 'ramda'
99
import { inject, observer } from 'mobx-react'
10-
import keydown from 'react-keydown'
1110
import { Affix } from 'antd'
1211

1312
import { ICON_CMD, ICON_BASE } from '../../config/assets'
@@ -163,14 +162,6 @@ class HeaderContainer extends React.Component {
163162
logic.uninit()
164163
}
165164

166-
/* eslint-disable class-methods-use-this */
167-
@keydown(['ctrl+p'])
168-
openDoraemon() {
169-
// debug('openDoraemon')
170-
logic.openDoraemon()
171-
}
172-
/* eslint-enable class-methods-use-this */
173-
174165
render() {
175166
const { header } = this.props
176167

‎containers/Header/store.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,6 @@ const HeaderStore = t
6969
updateAccount(sobj) {
7070
self.root.account.updateAccount(sobj)
7171
},
72-
openDoraemon() {
73-
self.root.openDoraemon()
74-
},
7572
openPreview(type) {
7673
self.root.openPreview(type)
7774
},

‎pages/communities/index.js‎ renamed to ‎pages/communities.js‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
import React from 'react'
22
import { Provider } from 'mobx-react'
33

4-
import GAWraper from '../../components/GAWraper'
5-
import initRootStore from '../../stores/init'
6-
import ThemeWrapper from '../../containers/ThemeWrapper'
7-
import MultiLanguage from '../../containers/MultiLanguage'
8-
import Sidebar from '../../containers/Sidebar'
9-
import Preview from '../../containers/Preview'
10-
import Doraemon from '../../containers/Doraemon'
11-
import Route from '../../containers/Route'
12-
import BodyLayout from '../../containers/BodyLayout'
13-
import Header from '../../containers/Header'
14-
import CommunitiesBanner from '../../containers/CommunitiesBanner'
15-
import CommunitiesContent from '../../containers/CommunitiesContent'
4+
import GAWraper from '../components/GAWraper'
5+
import initRootStore from '../stores/init'
6+
import ThemeWrapper from '../containers/ThemeWrapper'
7+
import MultiLanguage from '../containers/MultiLanguage'
8+
import Sidebar from '../containers/Sidebar'
9+
import Preview from '../containers/Preview'
10+
import Doraemon from '../containers/Doraemon'
11+
import Route from '../containers/Route'
12+
import BodyLayout from '../containers/BodyLayout'
13+
import Header from '../containers/Header'
14+
import CommunitiesBanner from '../containers/CommunitiesBanner'
15+
import CommunitiesContent from '../containers/CommunitiesContent'
1616

17-
import { P } from '../../containers/schemas'
17+
import { P } from '../containers/schemas'
1818

1919
import {
2020
makeGQClient,
2121
// Global,
2222
// queryStringToJSON,
2323
/* mergeRouteQuery */
24-
// getSubPath,
24+
getMainPath,
25+
getSubPath,
2526
BStore,
26-
} from '../../utils'
27-
import Footer from '../../components/Footer'
27+
} from '../utils'
28+
import Footer from '../components/Footer'
2829

2930
// try to fix safari bug
3031
// see https://github.com/yahoo/react-intl/issues/422
@@ -41,6 +42,9 @@ async function fetchData(props) {
4142
const token = BStore.cookie.from_req(props.req, 'jwtToken')
4243
const gqClient = makeGQClient(token)
4344

45+
const subpath = getSubPath(props)
46+
console.log('subpath --> ', subpath)
47+
4448
const pagedCommunities = gqClient.request(P.pagedCommunities, {
4549
filter: { page: 1, size: 30 },
4650
})
@@ -57,16 +61,15 @@ export default class Index extends React.Component {
5761
// if (!isServer) return {}
5862

5963
console.log('## communities ## index page ..')
64+
const subPath = getSubPath(props)
65+
const mainPath = getMainPath(props)
6066

6167
const { pagedCommunities } = await fetchData(props)
6268

6369
return {
64-
// version: store.version,
65-
// messages,
66-
// locale,
70+
route: { mainPath, subPath },
6771
communities: pagedCommunities,
6872
communitiesContent: { pagedCommunities },
69-
communitiesBanner: { totalCount: pagedCommunities.totalCount },
7073
}
7174
}
7275

0 commit comments

Comments
 (0)