Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit1da3964

Browse files
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 parent2005ebb commit1da3964

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
importasyncSuitfrom'@/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
importtype{TStore}from'./store'
@@ -28,24 +28,20 @@ const loadCommunity = (): void => {
2828
sr71$.query(S.community,{ raw, userHasLogin})
2929
}
3030

31+
// 查看当前社区志愿者列表
3132
exportconstonShowEditorList=():void=>{
32-
consttype=TYPE.USER_LISTER_COMMUNITY_EDITORS
33-
constdata={
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
exportconstonShowSubscriberList=():void=>{
42-
consttype=TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS
43-
constdata={
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
exportconsttoggleDescExpand=():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-
constContent:FC<TProps>=({ visible, type, attUser})=>{
16+
constContent:FC<TProps>=({ visible, type, attUser, userListerType})=>{
1617
constref=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
importModeLineMenufrom'@/containers/unit/ModeLineMenu'
34
importtype{TUser}from'@/spec'
@@ -11,9 +12,16 @@ import {
1112
AccountEditor,
1213
// utils
1314
C11NSettingPanel,
15+
// userlister
16+
UserLister,
1417
}from'../dynamics'
1518

16-
constrenderContent=(type:string,attUser:TUser,mmType?)=>{
19+
constrenderContent=(
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<ModeLineMenutype={mmType}/>
3543

44+
caseTYPE.DRAWER.USER_LISTER:{
45+
return<UserListertype={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+
exportconstUserLister=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-
importReactfrom'react'
1+
import{FC,memo}from'react'
22

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

7+
importNoticeBarfrom'@/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-
constHeaderInfo=({ type, totalCount, brief, curCommunity})=>{
18+
typeTProps={
19+
type:string
20+
totalCount:number
21+
curCommunity:TCommunity
22+
}
23+
24+
constHeaderInfo:FC<TProps>=({ type, totalCount, curCommunity})=>{
1725
switch(type){
1826
caseTYPE.USER_LISTER_FAVORITES:
1927
return(
@@ -24,7 +32,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
2432
</Title>
2533
<DescLabel>
2634
<DescIconsrc={`${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
<DescIconsrc={`${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-
<EditorIconsrc={`${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-
exportdefaultReact.memo(HeaderInfo)
122+
exportdefaultmemo(HeaderInfo)
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+
importtype{TUser}from'@/spec'
4+
importLinkfrom'next/link'
5+
6+
import{useAccount}from'@/hooks'
7+
importFollowButtonfrom'@/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+
typeTProps={
25+
users:TUser[]
26+
}
27+
28+
constEditorLayout:FC<TProps>=({ users})=>{
29+
const{ c11n,user:account}=useAccount()
30+
const{ isLogin}=c11n
31+
32+
return(
33+
<Wrapper>
34+
{users.map((user)=>(
35+
<UserWrapperkey={user.login}>
36+
<UserAvatarsrc={user.avatar}/>
37+
<UserBrief>
38+
<Title>
39+
<Linkhref={`/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+
exportdefaultmemo(EditorLayout)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp