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

Commit 3696d0e

Browse files
mydearxymmydearxym
committed
feat(UserFollow): follow/undoFollow, list followers/followings ...
1 parent f416433 commit 3696d0e

File tree

19 files changed

+263
-83
lines changed

19 files changed

+263
-83
lines changed

‎components/FocusLine/styles/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const Icon = styled(Img)`
2323
`
2424
export const Focus = styled.div`
2525
font-size: 1.1rem;
26-
color: ${theme('banner.title')};
26+
color: ${theme('contrastFg')};
2727
margin-left: 3px;
2828
margin-right: 3px;
2929
`

‎components/FollowButton/index.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ class FollowButton extends React.Component {
2020

2121
onFollow() {
2222
const { userId, onFollow } = this.props
23-
debug('onFollow :', userId)
2423

2524
this.fakeLoading()
2625
onFollow(userId)
@@ -29,8 +28,6 @@ class FollowButton extends React.Component {
2928
onUndoFollow() {
3029
const { userId, onUndoFollow } = this.props
3130

32-
debug('onUndoFollow :', userId)
33-
3431
this.fakeLoading()
3532
onUndoFollow(userId)
3633
}

‎components/UserBrief/styles/index.js

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,31 @@ import { theme } from '../../../utils'
66
export const Wrapper = styled.div`
77
display: flex;
88
`
9-
109
export const AvatarWrapper = styled.div`
1110
margin-right: 12px;
1211
display: flex;
1312
flex-direction: column;
1413
`
15-
1614
export const Avatar = styled(Img)`
17-
border-radius: 8px;
15+
border-radius: 4px;
1816
width: ${({ displayStyle }) =>
1917
displayStyle === 'default' ? '120px' : '70px'};
2018
height: ${({ displayStyle }) =>
2119
displayStyle === 'default' ? '120px' : '70px'};
2220
margin-top: 6px;
2321
margin-bottom: 10px;
2422
`
25-
2623
export const BriefTextWrapper = styled.div`
2724
display: flex;
2825
flex-direction: column;
2926
margin-left: 10px;
3027
`
31-
3228
export const UserTitle = styled.div`
3329
display: flex;
3430
font-size: 1.2rem;
3531
color: ${theme('banner.title')};
3632
margin-bottom: 5px;
3733
`
38-
3934
export const UserDesc = styled.div`
4035
color: ${theme('banner.desc')};
4136
display: ${({ hide }) => (hide ? 'none' : 'flex')};
@@ -66,7 +61,6 @@ export const DescIconLable = styled(Img)`
6661
margin-right: 10px;
6762
margin-top: 4px;
6863
`
69-
7064
export const BackgroundDivider = styled.div`
7165
width: 5px;
7266
height: 5px;
@@ -98,7 +92,6 @@ export const SocialSpliter = styled.div`
9892
export const SocialWrapper = styled.div`
9993
display: flex;
10094
`
101-
10295
export const SocialIcon = styled(Img)`
10396
fill: ${theme('banner.desc')};
10497
display: ${({ active }) => (active ? 'block' : 'none')};
@@ -118,7 +111,6 @@ export const SocialIcon = styled(Img)`
118111
export const EditWrapper = styled.div`
119112
display: ${({ show }) => (show ? 'block' : 'none')};
120113
`
121-
122114
export const EditIcon = styled(Img)`
123115
fill: ${theme('banner.desc')};
124116
width: 20px;

‎containers/UserContent/NumSection.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎containers/UserContent/NumbersInfo.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,33 @@
11
import React from 'react'
22

3-
import NumSection from './NumSection'
4-
import { Wrapper, Divider } from './styles/numbers_info'
3+
import {
4+
Wrapper,
5+
Divider,
6+
NumWrapper,
7+
NumTitle,
8+
NumNumber,
9+
RepTitle,
10+
RepNumber,
11+
} from './styles/numbers_info'
512

6-
const NumbersInfo = ({ user }) => (
13+
import { prettyNum } from '../../utils'
14+
15+
const NumbersInfo = ({ user, showFollowers, showFollowings }) => (
716
<Wrapper>
8-
<NumSection title="声望" num={user.achievement.reputation} />
17+
<NumWrapper>
18+
<RepTitle>声望</RepTitle>
19+
<RepNumber>{prettyNum(user.achievement.reputation)}</RepNumber>
20+
</NumWrapper>
921
<Divider />
10-
<NumSection title="关注者" num={user.followersCount} />
22+
<NumWrapper onClick={showFollowers.bind(this, user)}>
23+
<NumTitle>关注者</NumTitle>
24+
<NumNumber>{prettyNum(user.followersCount)}</NumNumber>
25+
</NumWrapper>
1126
<Divider />
12-
<NumSection title="关注中" num={user.followingsCount} />
27+
<NumWrapper onClick={showFollowings.bind(this, user)}>
28+
<NumTitle>关注中</NumTitle>
29+
<NumNumber>{prettyNum(user.followingsCount)}</NumNumber>
30+
</NumWrapper>
1331
</Wrapper>
1432
)
1533

‎containers/UserContent/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,16 @@ class UserContentContainer extends React.Component {
117117
hasFollowd={viewingUser.viewerHasFollowed}
118118
userId={viewingUser.id}
119119
size="default"
120+
onFollow={logic.followUser}
121+
undoFollowUser={logic.undoFollowUser}
120122
/>
121123
</CardWrapper>
122124
<CardWrapper>
123-
<NumbersInfo user={viewingUser} />
125+
<NumbersInfo
126+
user={viewingUser}
127+
showFollowings={logic.showFollowings}
128+
showFollowers={logic.showFollowers}
129+
/>
124130
</CardWrapper>
125131

126132
<AttactWrapper>

‎containers/UserContent/logic.js

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
// import R from 'ramda'
22

3-
import { makeDebugger, $solver } from '../../utils'
3+
import {
4+
makeDebugger,
5+
asyncRes,
6+
asyncErr,
7+
$solver,
8+
dispatchEvent,
9+
TYPE,
10+
EVENT,
11+
ERR,
12+
} from '../../utils'
413
import SR71 from '../../utils/network/sr71'
514

15+
import S from './schema'
16+
617
const sr71$ = new SR71()
718
let sub$ = null
819

@@ -12,6 +23,42 @@ const debug = makeDebugger('L:UserContent')
1223

1324
let store = null
1425

26+
export function followUser(userId) {
27+
if (!store.isLogin) {
28+
store.authWarning()
29+
}
30+
31+
sr71$.mutate(S.follow, { userId })
32+
}
33+
34+
export function undoFollowUser(userId) {
35+
if (!store.isLogin) {
36+
store.authWarning()
37+
}
38+
39+
sr71$.mutate(S.undoFollow, { userId })
40+
}
41+
42+
export function showFollowings(user) {
43+
const type = TYPE.USER_LISTER_FOLLOWINGS
44+
const data = {
45+
id: user.id,
46+
brief: user.nickname,
47+
}
48+
49+
dispatchEvent(EVENT.USER_LISTER_OPEN, { type, data })
50+
}
51+
52+
export function showFollowers(user) {
53+
const type = TYPE.USER_LISTER_FOLLOWERS
54+
const data = {
55+
id: user.id,
56+
brief: user.nickname,
57+
}
58+
59+
dispatchEvent(EVENT.USER_LISTER_OPEN, { type, data })
60+
}
61+
1562
export function tabChange(activeThread) {
1663
store.markState({ activeThread })
1764
store.markRoute({ tab: activeThread })
@@ -21,8 +68,35 @@ export function tabChange(activeThread) {
2168
// Data & Error handlers
2269
// ###############################
2370

24-
const DataSolver = []
25-
const ErrSolver = []
71+
const DataSolver = [
72+
{
73+
match: asyncRes('follow'),
74+
action: () => {
75+
debug('follow done ')
76+
},
77+
},
78+
]
79+
80+
const ErrSolver = [
81+
{
82+
match: asyncErr(ERR.CRAPHQL),
83+
action: ({ details }) => {
84+
debug('ERR.CRAPHQL -->', details)
85+
},
86+
},
87+
{
88+
match: asyncErr(ERR.TIMEOUT),
89+
action: ({ details }) => {
90+
debug('ERR.TIMEOUT -->', details)
91+
},
92+
},
93+
{
94+
match: asyncErr(ERR.NETWORK),
95+
action: ({ details }) => {
96+
debug('ERR.NETWORK -->', details)
97+
},
98+
},
99+
]
26100

27101
export function init(_store) {
28102
if (store) return false

‎containers/UserContent/schema.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import gql from 'graphql-tag'
2+
3+
const follow = gql`
4+
mutation($userId: ID!) {
5+
follow(userId: $userId) {
6+
id
7+
}
8+
}
9+
`
10+
const undoFollow = gql`
11+
mutation($userId: ID!) {
12+
undoFollow(userId: $userId) {
13+
id
14+
}
15+
}
16+
`
17+
18+
const schema = {
19+
follow,
20+
undoFollow,
21+
}
22+
23+
export default schema

‎containers/UserContent/store.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,17 @@ const UserContent = t
2222
get root() {
2323
return getParent(self)
2424
},
25-
25+
get isLogin() {
26+
return self.root.account.isLogin
27+
},
2628
get viewingUser() {
2729
return stripMobx(self.root.viewing.user)
2830
},
2931
}))
3032
.actions(self => ({
33+
authWarning(options = {}) {
34+
self.root.authWarning(options)
35+
},
3136
markState(sobj) {
3237
markStates(sobj, self)
3338
},

‎containers/UserContent/styles/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const AttactWrapper = styled.div`
4444
align-items: center;
4545
font-size: 0.8rem;
4646
color: ${theme('banner.desc')};
47-
margin-left: 15px;
47+
margin-left: 10px;
4848
`
4949

5050
export const AttactIcon = styled(Img)`

‎containers/UserContent/styles/num_section.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎containers/UserContent/styles/numbers_info.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,29 @@ export const Divider = styled.div`
1111
border-color: ${theme('banner.desc')};
1212
opacity: 0.4;
1313
`
14+
export const NumWrapper = styled.div`
15+
display: flex;
16+
flex-direction: column;
17+
text-align: center;
18+
`
19+
export const RepTitle = styled.div`
20+
font-size: 0.8rem;
21+
`
22+
export const NumTitle = styled(RepTitle)`
23+
${NumWrapper}:hover & {
24+
color: ${theme('contrastFg')};
25+
cursor: pointer;
26+
}
27+
`
28+
export const RepNumber = styled.div`
29+
font-size: 1.4rem;
30+
font-weight: bold;
31+
`
32+
export const NumNumber = styled(RepNumber)`
33+
font-size: 1.4rem;
34+
font-weight: bold;
35+
${NumWrapper}:hover & {
36+
color: ${theme('contrastFg')};
37+
cursor: pointer;
38+
}
39+
`

0 commit comments

Comments
 (0)