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

Commit 1da3964

Browse files
mydearxymmydearxym
authored
refactor(user-lister): rewrite with TS & redesign (#1206)
* chore(cpers-map): adjust ranking & bottom note for laptop * refactor(user-lister): re-org with drawer style
1 parent 2005ebb commit 1da3964

File tree

29 files changed

+640
-372
lines changed

29 files changed

+640
-372
lines changed

‎src/containers/digest/CommunityDigest/logic.ts‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
33
import { TYPE, EVENT, ERR } from '@/constant'
44

55
import asyncSuit from '@/utils/async'
6-
import { send, errRescue, singular } from '@/utils/helper'
6+
import { send, errRescue, singular, listUsers } from '@/utils/helper'
77
import { buildLog } from '@/utils/logger'
88

99
import type { TStore } from './store'
@@ -28,24 +28,20 @@ const loadCommunity = (): void => {
2828
sr71$.query(S.community, { raw, userHasLogin })
2929
}
3030

31+
// 查看当前社区志愿者列表
3132
export const onShowEditorList = (): void => {
32-
const type = TYPE.USER_LISTER_COMMUNITY_EDITORS
33-
const data = {
34-
id: store.curCommunity.id,
35-
brief: store.curCommunity.title,
36-
}
37-
38-
send(EVENT.USER_LISTER_OPEN, { type, data })
33+
listUsers(TYPE.USER_LISTER_COMMUNITY_EDITORS)
3934
}
4035

4136
export const onShowSubscriberList = (): void => {
42-
const type = TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS
43-
const data = {
44-
id: store.curCommunity.id,
45-
brief: store.curCommunity.title,
46-
}
47-
48-
send(EVENT.USER_LISTER_OPEN, { type, data })
37+
// const type = TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS
38+
// const data = {
39+
// id: store.curCommunity.id,
40+
// brief: store.curCommunity.title,
41+
// }
42+
// send(EVENT.USER_LISTER_OPEN, { type, data })
43+
44+
listUsers(TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS)
4945
}
5046

5147
export const toggleDescExpand = (): void => {

‎src/containers/thread/CperMapThread/styles/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export const MapWrapper = styled.div`
2020
/*
2121
* magic number, if set 100% the map will jump in laptop screen
2222
*/
23-
width: 1000px;
24-
height: 625px;
23+
width: 100%;
24+
height: 100%;
2525
min-height: 620px;
2626
${css.media.mobile`width: 250%;`};
2727
`

‎src/containers/thread/CperMapThread/styles/raning_board.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
1111
position: absolute;
1212
z-index: 1;
1313
left: 37px;
14-
bottom: 60px;
14+
bottom: 100px;
1515
border-radius: 5px;
1616
width: 150px;
1717
transition: width 0.2s linear;

‎src/containers/tool/Drawer/Content/DesktopView.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ type TProps = {
1010
visible: boolean
1111
type: string // TODO:
1212
attUser: any // TODO:
13+
userListerType: string
1314
}
1415

15-
const Content: FC<TProps> = ({ visible, type, attUser }) => {
16+
const Content: FC<TProps> = ({ visible, type, attUser, userListerType }) => {
1617
const ref = useRef(null)
1718

1819
/*
@@ -34,7 +35,7 @@ const Content: FC<TProps> = ({ visible, type, attUser }) => {
3435
shadowSize="small"
3536
showShadow={false}
3637
>
37-
{renderContent(type, attUser)}
38+
{renderContent(type, attUser, userListerType)}
3839
</CustomScroller>
3940
</Wrapper>
4041
)

‎src/containers/tool/Drawer/Content/renderContent.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { FC } from 'react'
12
import { TYPE } from '@/constant'
23
import ModeLineMenu from '@/containers/unit/ModeLineMenu'
34
import type { TUser } from '@/spec'
@@ -11,9 +12,16 @@ import {
1112
AccountEditor,
1213
// utils
1314
C11NSettingPanel,
15+
// userlister
16+
UserLister,
1417
} from '../dynamics'
1518

16-
const renderContent = (type: string, attUser: TUser, mmType?) => {
19+
const renderContent = (
20+
type: string,
21+
attUser: TUser,
22+
userListerType: string,
23+
mmType?,
24+
) => {
1725
if (!type) return <div />
1826

1927
switch (type) {
@@ -33,6 +41,10 @@ const renderContent = (type: string, attUser: TUser, mmType?) => {
3341
// @ts-ignore
3442
return <ModeLineMenu type={mmType} />
3543

44+
case TYPE.DRAWER.USER_LISTER: {
45+
return <UserLister type={userListerType} />
46+
}
47+
3648
default:
3749
// TYPE.DRAWER.[ARTICLE]_VIEW:
3850
return <ArticleViewer />

‎src/containers/tool/Drawer/dynamics.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ export const AccountEditor = dynamic(
4949
commonConfig,
5050
)
5151

52+
// user lister
53+
export const UserLister = dynamic(
54+
() => import('@/containers/user/UserLister'),
55+
commonConfig,
56+
)
57+
5258
// export const RepoEditor = dynamic(
5359
// () => import('@/containers/editor/RepoEditor'),
5460
// editorConfig,

‎src/containers/tool/Drawer/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
3333
slideVisible,
3434
type,
3535
attUserData,
36+
userListerType,
3637
mmType,
3738
rightOffset,
3839
optionsData,
@@ -60,6 +61,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
6061
visible={slideVisible}
6162
options={optionsData}
6263
attUser={attUserData}
64+
userListerType={userListerType}
6365
mmType={mmType}
6466
/>
6567
</Viewer>

‎src/containers/tool/Drawer/store.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,12 @@ const DrawerStore = T.model('DrawerStore', {
5353
//
5454
TYPE.DRAWER.C11N_SETTINGS,
5555
TYPE.DRAWER.MODELINE_MENU,
56+
TYPE.DRAWER.USER_LISTER,
5657
...ARTICLE_THREAD_CURD_TYPES,
5758
]),
5859
),
5960
attUser: T.maybeNull(User),
61+
userListerType: T.optional(T.string, ''),
6062

6163
// shortcut for modelineMenuType
6264
mmType: T.optional(
@@ -154,6 +156,9 @@ const DrawerStore = T.model('DrawerStore', {
154156
if (type === TYPE.DRAWER.MODELINE_MENU) {
155157
slf.mmType = data
156158
}
159+
if (type === TYPE.DRAWER.USER_LISTER) {
160+
slf.userListerType = data
161+
}
157162

158163
if (contains(thread, values(ARTICLE_THREAD))) {
159164
// article

‎src/containers/user/UserLister/HeaderInfo.js‎ renamed to ‎src/containers/user/UserLister/HeaderInfo.tsx‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
1-
import React from 'react'
1+
import { FC, memo } from 'react'
22

3+
import type { TCommunity } from '@/spec'
34
import { ICON_CMD, EMAIL_SUPPORT } from '@/config'
45
import { TYPE } from '@/constant'
56

7+
import NoticeBar from '@/widgets/NoticeBar'
8+
69
import {
710
Wrapper,
811
Title,
912
DescLabel,
1013
DescIcon,
11-
EditorIcon,
1214
DescText,
1315
DescLink,
1416
} from './styles/header_info'
1517

16-
const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
18+
type TProps = {
19+
type: string
20+
totalCount: number
21+
curCommunity: TCommunity
22+
}
23+
24+
const HeaderInfo: FC<TProps> = ({ type, totalCount, curCommunity }) => {
1725
switch (type) {
1826
case TYPE.USER_LISTER_FAVORITES:
1927
return (
@@ -24,7 +32,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
2432
</Title>
2533
<DescLabel>
2634
<DescIcon src={`${ICON_CMD}/paper.svg`} />
27-
<DescText> {brief}</DescText>
35+
<DescText> --</DescText>
2836
</DescLabel>
2937
</Wrapper>
3038
)
@@ -38,7 +46,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
3846
</Title>
3947
<DescLabel>
4048
<DescIcon src={`${ICON_CMD}/paper.svg`} />
41-
<DescText> {brief}</DescText>
49+
<DescText> --</DescText>
4250
</DescLabel>
4351
</Wrapper>
4452
)
@@ -51,7 +59,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
5159
人)
5260
</Title>
5361
<DescLabel>
54-
<DescText>关注 {brief} 的人 </DescText>
62+
<DescText>关注 -- 的人 </DescText>
5563
</DescLabel>
5664
</Wrapper>
5765
)
@@ -64,7 +72,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
6472
人)
6573
</Title>
6674
<DescLabel>
67-
<DescText>{brief} 关注的人 </DescText>
75+
<DescText>-- 关注的人 </DescText>
6876
</DescLabel>
6977
</Wrapper>
7078
)
@@ -73,11 +81,11 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
7381
return (
7482
<Wrapper>
7583
<Title>
76-
关注中 ({totalCount}
84+
已加入 ({totalCount}
7785
人)
7886
</Title>
7987
<DescLabel>
80-
<DescText>关注 {brief} 社区的人 </DescText>
88+
<DescText>他们加入了 {curCommunity.title} 社区 </DescText>
8189
</DescLabel>
8290
</Wrapper>
8391
)
@@ -86,20 +94,22 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
8694
return (
8795
<Wrapper>
8896
<Title>
89-
{brief} 社区编辑 ({totalCount}
97+
{curCommunity.title} 社区志愿者 ({totalCount}
9098
人)
9199
</Title>
100+
<NoticeBar
101+
type="info"
102+
content="志愿者为具有对应社区日常管理权限的用户，如果有你认为合适的人选，欢迎推荐或自荐 🙏🏻 。"
103+
bottom={15}
104+
left={-6}
105+
noBg
106+
/>
92107
<DescLabel>
93-
<EditorIcon src={`${ICON_CMD}/co_editor.svg`} />
94-
<DescText>
95-
{brief} 社区编辑面向所有用户开放，
96-
<DescLink
97-
href={`mailto:${EMAIL_SUPPORT}?subject=申请成为 ${curCommunity.raw} 社区编辑&body=感谢您的关注,成为社区编辑后,您将获得本社区范围内各种内容的删帖管理等权限,协助社区的健康发展. 因此本着对社区成员负责任的态度，我需要知道关于你的以下信息 (最终正文请删除本行): %0A%0A%0A你是谁? (包括但不限于 weibo / zhihu / jianshu / twitter 等社交账号) %0A%0A%0A你做过什么? (包括但不限于 github / stackoverflow / 个人网站(博客) 等技术社区账号) %0A%0A%0A你在 coderplanets 上的账号是?`}
98-
>
99-
申请成为社区编辑
100-
</DescLink>
101-
。
102-
</DescText>
108+
<DescLink
109+
href={`mailto:${EMAIL_SUPPORT}?subject=申请成为 ${curCommunity.raw} 社区编辑&body=感谢您的关注,成为社区编辑后,您将获得本社区范围内各种内容的删帖管理等权限,协助社区的健康发展. 因此本着对社区成员负责任的态度，我需要知道关于你的以下信息 (最终正文请删除本行): %0A%0A%0A你是谁? (包括但不限于 weibo / zhihu / jianshu / twitter 等社交账号) %0A%0A%0A你做过什么? (包括但不限于 github / stackoverflow / 个人网站(博客) 等技术社区账号) %0A%0A%0A你在 coderplanets 上的账号是?`}
110+
>
111+
申请成为社区志愿者
112+
</DescLink>
103113
</DescLabel>
104114
</Wrapper>
105115
)
@@ -109,4 +119,4 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
109119
}
110120
}
111121

112-
export default React.memo(HeaderInfo)
122+
export default memo(HeaderInfo)

‎src/containers/user/UserLister/List/EditorLayout.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { FC, memo } from 'react'
2+
3+
import type { TUser } from '@/spec'
4+
import Link from 'next/link'
5+
6+
import { useAccount } from '@/hooks'
7+
import FollowButton from '@/widgets/Buttons/FollowButton'
8+
9+
import {
10+
Wrapper,
11+
UserWrapper,
12+
UserAvatar,
13+
UserBrief,
14+
Title,
15+
Desc,
16+
Nickname,
17+
Location,
18+
CityIcon,
19+
City,
20+
Action,
21+
} from '../styles/list/editor_layout'
22+
import { onFollow, undoFollow } from '../logic'
23+
24+
type TProps = {
25+
users: TUser[]
26+
}
27+
28+
const EditorLayout: FC<TProps> = ({ users }) => {
29+
const { c11n, user: account } = useAccount()
30+
const { isLogin } = c11n
31+
32+
return (
33+
<Wrapper>
34+
{users.map((user) => (
35+
<UserWrapper key={user.login}>
36+
<UserAvatar src={user.avatar} />
37+
<UserBrief>
38+
<Title>
39+
<Link href={`/u/${user.login}`} passHref>
40+
<Nickname>{user.nickname}</Nickname>
41+
</Link>
42+
<Location>
43+
<CityIcon />
44+
<City>{user.location || user.geoCity || '--'}</City>
45+
</Location>
46+
</Title>
47+
<Desc>{user.bio}</Desc>
48+
<Action>
49+
{isLogin && account.id === user.id ? (
50+
<div>(本尊)</div>
51+
) : (
52+
<FollowButton
53+
size="tiny"
54+
hasFollowed={user.viewerHasFollowed}
55+
userId={user.id}
56+
onFollow={onFollow}
57+
onUndoFollow={undoFollow}
58+
/>
59+
)}
60+
</Action>
61+
</UserBrief>
62+
</UserWrapper>
63+
))}
64+
</Wrapper>
65+
)
66+
}
67+
68+
export default memo(EditorLayout)

0 commit comments

Comments
 (0)