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

Commit 7d792b0

Browse files
mydearxymmydearxym
committed
feat(UserLister): add basic userLister for all users case
1 parent 6bf47ad commit 7d792b0

File tree

18 files changed

+443
-5
lines changed

18 files changed

+443
-5
lines changed

‎containers/Header/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { ICON_CMD } from '../../config/assets'
1212

1313
import MailBox from '../MailBox'
1414
import UpgradePackges from '../UpgradePackges'
15+
import UserLister from '../UserLister'
1516

1617
import { Affix, Navigator } from '../../components'
1718
import UserAccount from './UserAccount'
@@ -76,11 +77,15 @@ const Header = ({
7677
</RouterWrapper>
7778
<AddOns />
7879
<Operations>
80+
<Search onClick={logic.openUserLister}>
81+
<HeaderIcon src={`${ICON_CMD}/search2.svg`} />
82+
</Search>
7983
<Search onClick={logic.openDoraemon}>
8084
<HeaderIcon src={`${ICON_CMD}/search2.svg`} />
8185
</Search>
8286

8387
<MailBox />
88+
<UserLister />
8489
<UserAccount isLogin={isLogin} accountInfo={accountInfo} />
8590
</Operations>
8691
</HeaderWrapper>

‎containers/Header/logic.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ export function login() {
7474
export function openDoraemon() {
7575
store.openDoraemon()
7676
}
77+
// TODO: tmp
78+
export function openUserLister() {
79+
dispatchEvent(EVENT.USER_LISTER_OPEN)
80+
}
7781

7882
export function upgradeHepler() {
7983
debug('upgradeHepler')

‎containers/UserLister/UserList.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/*
2+
*
3+
* UserList
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
10+
import { Button, Icon } from 'antd'
11+
12+
import { Pagi } from '../../components'
13+
14+
import {
15+
TableWrapper,
16+
UserWrapper,
17+
UserAvatar,
18+
UserBrief,
19+
Nickname,
20+
Bio,
21+
Location,
22+
Action,
23+
} from './styles/user_list'
24+
25+
import { makeDebugger, uid } from '../../utils'
26+
27+
/* eslint-disable no-unused-vars */
28+
const debug = makeDebugger('c:UserList:index')
29+
/* eslint-enable no-unused-vars */
30+
31+
const UsersTable = ({ entries }) => (
32+
<TableWrapper>
33+
{entries.map(user => (
34+
<UserWrapper key={uid.gen()}>
35+
<UserAvatar src={user.avatar} />
36+
<UserBrief>
37+
<Nickname>{user.nickname}</Nickname>
38+
<Bio>{user.bio}</Bio>
39+
<Location>
40+
<Icon type="environment-o" />
41+
{user.location}
42+
</Location>
43+
</UserBrief>
44+
<Action>
45+
<Button size="small" type="primary" ghost>
46+
<Icon type="user-add" />
47+
关注
48+
</Button>
49+
</Action>
50+
</UserWrapper>
51+
))}
52+
</TableWrapper>
53+
)
54+
55+
const UserList = ({
56+
data: { entries, pageNumber, pageSize, totalCount },
57+
onPageChange,
58+
}) => (
59+
<React.Fragment>
60+
<UsersTable entries={entries} />
61+
<Pagi
62+
left="-15px"
63+
pageNumber={pageNumber}
64+
pageSize={pageSize}
65+
totalCount={totalCount}
66+
onChange={onPageChange}
67+
/>
68+
</React.Fragment>
69+
)
70+
71+
UserList.propTypes = {
72+
// https://www.npmjs.com/package/prop-types
73+
data: PropTypes.shape({
74+
entries: PropTypes.array,
75+
pageNumber: PropTypes.number,
76+
pageSize: PropTypes.number,
77+
totalCount: PropTypes.number,
78+
totalPages: PropTypes.number,
79+
}),
80+
onPageChange: PropTypes.func,
81+
}
82+
83+
UserList.defaultProps = {
84+
data: {
85+
entries: [],
86+
pageNumber: 1,
87+
pageSize: 20,
88+
totalCount: 0,
89+
totalPages: 0,
90+
},
91+
onPageChange: debug,
92+
}
93+
94+
export default UserList

‎containers/UserLister/index.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
*
3+
* UserLister
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import { inject, observer } from 'mobx-react'
9+
10+
import { Modal } from '../../components'
11+
import { Wrapper, Header, Title, Desc } from './styles'
12+
13+
import { makeDebugger, storePlug } from '../../utils'
14+
import UserList from './UserList'
15+
16+
import * as logic from './logic'
17+
/* eslint-disable no-unused-vars */
18+
const debug = makeDebugger('C:UserLister')
19+
/* eslint-enable no-unused-vars */
20+
21+
// NOTE: add me to ../containers/index
22+
class UserListerContainer extends React.Component {
23+
componentWillMount() {
24+
const { userLister } = this.props
25+
logic.init(userLister)
26+
}
27+
28+
render() {
29+
const { userLister } = this.props
30+
const { show, pagedUsersData } = userLister
31+
32+
return (
33+
<Modal width="700px" show={show} showCloseBtn onClose={logic.onClose}>
34+
<Wrapper>
35+
<Header>
36+
<Title>社区编辑</Title>
37+
<Desc>
38+
xxx 社区共有编辑/志愿者 14 人，同时对所有感兴趣的朋友开放, ...
39+
详情
40+
</Desc>
41+
</Header>
42+
<UserList data={pagedUsersData} />
43+
</Wrapper>
44+
</Modal>
45+
)
46+
}
47+
}
48+
49+
export default inject(storePlug('userLister'))(observer(UserListerContainer))

‎containers/UserLister/lang.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* UserLister Langs
3+
*
4+
* This contains all the text for the UserLister component.
5+
*/
6+
import { defineMessages } from 'react-intl'
7+
8+
export default defineMessages({
9+
header: {
10+
id: 'containers.UserLister.header',
11+
defaultMessage: 'This is the UserLister component !',
12+
},
13+
})

‎containers/UserLister/logic.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// import R from 'ramda'
2+
3+
import {
4+
makeDebugger,
5+
$solver,
6+
asyncRes,
7+
asyncErr,
8+
holdPage,
9+
unholdPage,
10+
ERR,
11+
EVENT,
12+
} from '../../utils'
13+
import SR71 from '../../utils/network/sr71'
14+
15+
import S from './schema'
16+
17+
const sr71$ = new SR71({
18+
resv_event: [EVENT.USER_LISTER_OPEN],
19+
})
20+
21+
let sub$ = null
22+
23+
/* eslint-disable no-unused-vars */
24+
const debug = makeDebugger('L:UserLister')
25+
/* eslint-enable no-unused-vars */
26+
27+
let store = null
28+
29+
export function onClose() {
30+
store.markState({ show: false })
31+
unholdPage()
32+
}
33+
34+
const loadUsers = () => {
35+
sr71$.query(S.pagedUsers, { filter: { page: 1, size: 20 } })
36+
}
37+
38+
// ###############################
39+
// Data & Error handlers
40+
// ###############################
41+
42+
const DataSolver = [
43+
{
44+
match: asyncRes(EVENT.USER_LISTER_OPEN),
45+
action: () => {
46+
loadUsers()
47+
store.markState({ show: true })
48+
holdPage()
49+
},
50+
},
51+
{
52+
match: asyncRes('pagedUsers'),
53+
action: ({ pagedUsers }) => store.markState({ pagedUsers }),
54+
},
55+
]
56+
const ErrSolver = [
57+
{
58+
match: asyncErr(ERR.CRAPHQL),
59+
action: ({ details }) => {
60+
debug('ERR.CRAPHQL -->', details)
61+
},
62+
},
63+
{
64+
match: asyncErr(ERR.TIMEOUT),
65+
action: ({ details }) => {
66+
debug('ERR.TIMEOUT -->', details)
67+
},
68+
},
69+
{
70+
match: asyncErr(ERR.NETWORK),
71+
action: ({ details }) => {
72+
debug('ERR.NETWORK -->', details)
73+
},
74+
},
75+
]
76+
77+
export function init(_store) {
78+
if (store) return false
79+
store = _store
80+
81+
debug(store)
82+
if (sub$) sub$.unsubscribe()
83+
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
84+
}

‎containers/UserLister/schema.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import gql from 'graphql-tag'
2+
3+
const pagedUsers = gql`
4+
query($filter: PagedUsersFilter!) {
5+
pagedUsers(filter: $filter) {
6+
entries {
7+
id
8+
nickname
9+
avatar
10+
location
11+
bio
12+
}
13+
totalCount
14+
pageSize
15+
pageNumber
16+
}
17+
}
18+
`
19+
20+
const schema = {
21+
pagedUsers,
22+
}
23+
24+
export default schema

‎containers/UserLister/store.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
* UserLister store
3+
*
4+
*/
5+
6+
import { types as t, getParent } from 'mobx-state-tree'
7+
// import R from 'ramda'
8+
9+
import { PagedUsers, emptyPagiData } from '../../stores/SharedModel'
10+
11+
import { markStates, makeDebugger, stripMobx } from '../../utils'
12+
/* eslint-disable no-unused-vars */
13+
const debug = makeDebugger('S:UserLister')
14+
/* eslint-enable no-unused-vars */
15+
16+
const UserLister = t
17+
.model('UserLister', {
18+
show: t.optional(t.boolean, false),
19+
pagedUsers: t.optional(PagedUsers, emptyPagiData),
20+
})
21+
.views(self => ({
22+
get root() {
23+
return getParent(self)
24+
},
25+
get pagedUsersData() {
26+
return stripMobx(self.pagedUsers)
27+
},
28+
}))
29+
.actions(self => ({
30+
markState(sobj) {
31+
markStates(sobj, self)
32+
},
33+
}))
34+
35+
export default UserLister

‎containers/UserLister/styles/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import styled from 'styled-components'
2+
3+
// import Img from '../../../components/Img'
4+
import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
padding: 20px;
8+
`
9+
export const Header = styled.div`
10+
display: flex;
11+
flex-direction: column;
12+
margin-bottom: 10px;
13+
`
14+
export const Title = styled.div`
15+
color: ${theme('thread.articleTitle')};
16+
font-size: 1rem;
17+
`
18+
export const Desc = styled.div`
19+
color: ${theme('thread.articleDigest')};
20+
font-size: 0.9rem;
21+
`

0 commit comments

Comments
 (0)