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

Commit 5a6ae98

Browse files
mydearxymmydearxym
committed
refactor(sidebar): manager communities list make right
1 parent cd9b386 commit 5a6ae98

File tree

17 files changed

+212
-102
lines changed

17 files changed

+212
-102
lines changed

‎containers/Header/schema.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import gql from 'graphql-tag'
2+
import { F } from '../schemas'
23

34
const githubSigninRes = 'githubSignin'
45
const githubSignin = gql`
@@ -22,6 +23,12 @@ const sessionState = gql`
2223
geoCity
2324
nickname
2425
avatar
26+
editableCommunities {
27+
entries {
28+
${F.community}
29+
}
30+
totalCount
31+
}
2532
}
2633
}
2734
}

‎containers/Sidebar/CommunitiesRootMenuItem.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ import {
1818
import { ROUTE } from '../../utils'
1919
import * as logic from './logic'
2020

21-
const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
21+
const MenuChildren = ({ activeRaw, curRaw, activeThread, countsInfo }) => (
2222
<ChildrenWrapper active={activeRaw === curRaw}>
2323
<ChildrenItem
2424
active={ROUTE.COMMUNITIES === activeThread || activeThread === 'index'}
2525
onClick={logic.onRootMenuSelect.bind(this, 'communities', 'index')}
2626
>
2727
<ChildrenItemInner>
2828
<ChildrenTitle>社区</ChildrenTitle>
29-
<ChildrenNum>23</ChildrenNum>
29+
<ChildrenNum>{countsInfo.communitiesTotalCount}</ChildrenNum>
3030
</ChildrenItemInner>
3131
</ChildrenItem>
3232
<ChildrenItem
@@ -35,7 +35,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
3535
>
3636
<ChildrenItemInner>
3737
<ChildrenTitle>分类</ChildrenTitle>
38-
<ChildrenNum>22</ChildrenNum>
38+
<ChildrenNum>{countsInfo.categoriesTotalCount}</ChildrenNum>
3939
</ChildrenItemInner>
4040
</ChildrenItem>
4141
<ChildrenItem
@@ -44,7 +44,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
4444
>
4545
<ChildrenItemInner>
4646
<ChildrenTitle>标签</ChildrenTitle>
47-
<ChildrenNum>22</ChildrenNum>
47+
<ChildrenNum>{countsInfo.tagsTotalCount}</ChildrenNum>
4848
</ChildrenItemInner>
4949
</ChildrenItem>
5050
<ChildrenItem
@@ -53,7 +53,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
5353
>
5454
<ChildrenItemInner>
5555
<ChildrenTitle>编辑</ChildrenTitle>
56-
<ChildrenNum>22</ChildrenNum>
56+
<ChildrenNum>--</ChildrenNum>
5757
</ChildrenItemInner>
5858
</ChildrenItem>
5959
<ChildrenItem
@@ -62,7 +62,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
6262
>
6363
<ChildrenItemInner>
6464
<ChildrenTitle>Threads</ChildrenTitle>
65-
<ChildrenNum>11</ChildrenNum>
65+
<ChildrenNum>{countsInfo.threadsTotalCount}</ChildrenNum>
6666
</ChildrenItemInner>
6767
</ChildrenItem>
6868
<ChildrenItem
@@ -71,7 +71,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
7171
>
7272
<ChildrenItemInner>
7373
<ChildrenTitle>帖子</ChildrenTitle>
74-
<ChildrenNum>445</ChildrenNum>
74+
<ChildrenNum>{countsInfo.postsTotalCount}</ChildrenNum>
7575
</ChildrenItemInner>
7676
</ChildrenItem>
7777
<ChildrenItem
@@ -80,7 +80,7 @@ const MenuChildren = ({ activeRaw, curRaw, activeThread }) => (
8080
>
8181
<ChildrenItemInner>
8282
<ChildrenTitle>招聘</ChildrenTitle>
83-
<ChildrenNum>111</ChildrenNum>
83+
<ChildrenNum>--</ChildrenNum>
8484
</ChildrenItemInner>
8585
</ChildrenItem>
8686
</ChildrenWrapper>
@@ -103,14 +103,15 @@ const CommunitiesItemBar = ({ active }) => (
103103
</MenuItemEach>
104104
)
105105

106-
const CommunitiesRootMenuItem = ({ activeRaw, activeThread }) => (
106+
const CommunitiesRootMenuItem = ({ activeRaw, activeThread, countsInfo }) => (
107107
<MenuItemWrapper>
108108
<div>
109109
<CommunitiesItemBar active={activeRaw === ROUTE.COMMUNITIES} />
110110
<MenuChildren
111111
activeRaw={activeRaw}
112112
curRaw={ROUTE.COMMUNITIES}
113113
activeThread={activeThread}
114+
countsInfo={countsInfo}
114115
/>
115116
</div>
116117
</MenuItemWrapper>

‎containers/Sidebar/MenuList.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,26 @@ import { MenuItem } from './styles/menu'
88

99
import { uid } from '../../utils'
1010

11-
const MenuList = ({ items, activeRaw, activeThread }) => (
11+
const MenuList = ({ items, activeRaw, activeThread, countsInfo }) => (
1212
<MenuItem>
1313
<CommunitiesRootMenuItem
1414
activeRaw={activeRaw}
1515
activeThread={activeThread}
16+
countsInfo={countsInfo}
17+
/>
18+
<UsersRootMenuItem
19+
activeRaw={activeRaw}
20+
activeThread={activeThread}
21+
countsInfo={countsInfo}
1622
/>
17-
<UsersRootMenuItem activeRaw={activeRaw} activeThread={activeThread} />
1823

1924
{items.map(item => (
2025
<CommunityMenuItem
2126
key={uid.gen()}
2227
item={item}
2328
activeRaw={activeRaw}
2429
activeThread={activeThread}
30+
countsInfo={countsInfo}
2531
/>
2632
))}
2733
</MenuItem>

‎containers/Sidebar/SearchBox.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
import { ICON_CMD } from '../../config'
4+
5+
import { Wrapper, SearchLogo, Inputer } from './styles/search_box'
6+
import { searchOnChange } from './logic'
7+
8+
const SearchBox = ({ value }) => (
9+
<Wrapper>
10+
<SearchLogo src={`${ICON_CMD}/search2.svg`} />
11+
<Inputer value={value} onChange={searchOnChange} />
12+
</Wrapper>
13+
)
14+
15+
export default SearchBox

‎containers/Sidebar/index.js‎

Lines changed: 13 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,18 @@ import { inject, observer } from 'mobx-react'
88

99
import { ICON_CMD } from '../../config'
1010

11-
import CommunityMenuItem from './CommunityMenuItem'
12-
import CommunitiesRootMenuItem from './CommunitiesRootMenuItem'
13-
import UsersRootMenuItem from './UsersRootMenuItem'
11+
import MenuList from './MenuList'
12+
import SearchBox from './SearchBox'
1413

15-
import {
16-
Sidebar,
17-
Banner,
18-
Footer,
19-
BannerLogo,
20-
BannerTitle,
21-
SearchLogo,
22-
} from './styles'
14+
import { Sidebar, Banner, Footer, BannerTitle, BannerLogo } from './styles'
2315

24-
import { MenuItem } from './styles/menu'
25-
26-
import { uid, makeDebugger, storePlug } from '../../utils'
16+
import { makeDebugger, storePlug } from '../../utils'
2717
import * as logic from './logic'
2818

2919
/* eslint-disable no-unused-vars */
3020
const debug = makeDebugger('C:Sidebar:index')
3121
/* eslint-enable no-unused-vars */
3222

33-
const MenuList = ({ items, activeRaw, activeThread }) => {
34-
const listItems = (
35-
<div>
36-
<CommunitiesRootMenuItem
37-
activeRaw={activeRaw}
38-
activeThread={activeThread}
39-
/>
40-
<UsersRootMenuItem activeRaw={activeRaw} activeThread={activeThread} />
41-
42-
{items.map(item => (
43-
<CommunityMenuItem
44-
key={uid.gen()}
45-
item={item}
46-
activeRaw={activeRaw}
47-
activeThread={activeThread}
48-
/>
49-
))}
50-
</div>
51-
)
52-
return <MenuItem>{listItems}</MenuItem>
53-
}
54-
5523
class SidebarContainer extends React.Component {
5624
componentDidMount() {
5725
const { sidebar } = this.props
@@ -64,7 +32,13 @@ class SidebarContainer extends React.Component {
6432

6533
render() {
6634
const { sidebar } = this.props
67-
const { subscribedCommunities, activeRaw, activeThread } = sidebar
35+
const {
36+
subscribedCommunities,
37+
activeRaw,
38+
activeThread,
39+
countsInfo,
40+
searchValue,
41+
} = sidebar
6842
// onMouseLeave={logic.leaveSidebar}
6943
// onMouseLeave is not unreliable in chrome: https://github.com/facebook/react/issues/4492
7044

@@ -79,11 +53,11 @@ class SidebarContainer extends React.Component {
7953
<MenuList
8054
items={subscribedCommunities}
8155
activeRaw={activeRaw}
56+
countsInfo={countsInfo}
8257
activeThread={activeThread}
8358
/>
8459
<Footer>
85-
<SearchLogo src={`${ICON_CMD}/search2.svg`} />
86-
<BannerTitle>综合搜索等</BannerTitle>
60+
<SearchBox value={searchValue} />
8761
</Footer>
8862
</Sidebar>
8963
)

‎containers/Sidebar/logic.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ let sub$ = null
3030
const debug = makeDebugger('L:Sidebar')
3131
/* eslint-enable no-unused-vars */
3232

33-
export function pin() {
34-
store.markState({ pin: !store.pin })
35-
}
33+
export const pin = () => store.markState({ pin: !store.pin })
3634

3735
export function extendMenuBar(communityRaw) {
3836
switch (communityRaw) {
@@ -81,11 +79,31 @@ export function loadCommunities(page = 1) {
8179
sr71$.query(S.pagedCommunities, args)
8280
}
8381

82+
export const searchCommunities = title =>
83+
sr71$.query(S.searchCommunities, { title })
84+
85+
export const searchOnChange = e => {
86+
const searchValue = e.target.value
87+
store.markState({ searchValue })
88+
if (!R.isEmpty(searchValue)) {
89+
searchCommunities(searchValue)
90+
}
91+
}
92+
93+
// ###############################
94+
// Data & Error handlers
95+
// ###############################
8496
const DataSolver = [
8597
{
8698
match: asyncRes('pagedCommunities'),
8799
action: ({ pagedCommunities }) => store.loadCommunities(pagedCommunities),
88100
},
101+
{
102+
match: asyncRes('searchCommunities'),
103+
action: ({ searchCommunities: matchedCommunities }) => {
104+
store.markState({ matchedCommunities })
105+
},
106+
},
89107
]
90108

91109
const ErrSolver = [

‎containers/Sidebar/schema.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import gql from 'graphql-tag'
2+
import { F } from '../schemas'
23

34
const communities = gql`
45
query($filter: PagedFilter!) {
@@ -21,8 +22,20 @@ const communities = gql`
2122
}
2223
`
2324

25+
const searchCommunities = gql`
26+
query($title: String!) {
27+
searchCommunities(title: $title) {
28+
entries {
29+
${F.community}
30+
}
31+
totalCount
32+
}
33+
}
34+
`
35+
2436
const schema = {
2537
communities,
38+
searchCommunities,
2639
}
2740

2841
export default schema

‎containers/Sidebar/store.js‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
import { types as t, getParent } from 'mobx-state-tree'
77
import R from 'ramda'
8+
9+
import { PagedCommunities, emptyPagiData } from '../../stores/SharedModel'
10+
811
import { makeDebugger, markStates, ROUTE, stripMobx } from '../../utils'
912

1013
/* eslint-disable no-unused-vars */
@@ -36,6 +39,8 @@ const SidebarStore = t
3639
.model('SidebarStore', {
3740
// open: t.optional(t.boolean, false),
3841
pin: t.optional(t.boolean, true),
42+
searchValue: t.optional(t.string, ''),
43+
matchedCommunities: t.optional(PagedCommunities, emptyPagiData),
3944
// theme: t.string, // view staff
4045
// curSelectItem: t.string, // view staff
4146
// searchBox: t.string, // complex data
@@ -72,29 +77,54 @@ const SidebarStore = t
7277
return R.isEmpty(subPath) ? ROUTE.COMMUNITIES : subPath
7378
},
7479

80+
get communitiesTotalCount() {
81+
return self.root.communitiesContent.pagedCommunities.totalCount
82+
},
83+
get categoriesTotalCount() {
84+
return self.root.communitiesContent.pagedCategories.totalCount
85+
},
86+
get tagsTotalCount() {
87+
return self.root.communitiesContent.pagedTags.totalCount
88+
},
89+
get threadsTotalCount() {
90+
return self.root.communitiesContent.pagedThreads.totalCount
91+
},
92+
get postsTotalCount() {
93+
return self.root.communitiesContent.pagedPosts.totalCount
94+
},
95+
96+
get countsInfo() {
97+
const {
98+
communitiesTotalCount,
99+
categoriesTotalCount,
100+
tagsTotalCount,
101+
threadsTotalCount,
102+
postsTotalCount,
103+
} = self
104+
105+
return {
106+
communitiesTotalCount,
107+
categoriesTotalCount,
108+
tagsTotalCount,
109+
threadsTotalCount,
110+
postsTotalCount,
111+
}
112+
},
113+
75114
get subscribedCommunities() {
76-
/* const { entries } = self.root.account.subscribedCommunities */
77-
// TODO use managers communities
78-
const { entries } = self.root.communities
115+
if (!R.isEmpty(self.searchValue)) {
116+
const { entries } = self.matchedCommunities
117+
return stripMobx(entries)
118+
}
119+
120+
const { entries } = self.root.account.user.editableCommunities
79121
return stripMobx(entries)
80122
},
81123
}))
82124
.actions(self => ({
83-
load() {
84-
// const communities = self.root.communities.all
85-
},
86125
markRoute(query) {
87126
self.root.route.markRoute(query)
88127
},
89-
loadCommunities(data) {
90-
self.root.communities.load(data)
91-
},
92-
93-
/*
94-
loadSubscribedCommunities(data) {
95-
self.root.account.loadSubscribedCommunities(data)
96-
},
97-
*/
98128
markState(sobj) {
99129
markStates(sobj, self)
100130
},

0 commit comments

Comments
 (0)