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.

refactor(user-lister): rewrite with TS & redesign#1206

Merged
mydearxym merged 2 commits intodevfromthe-new-userlister
Nov 30, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 11 additions & 15 deletionssrc/containers/digest/CommunityDigest/logic.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { useEffect } from 'react'
import { TYPE, EVENT, ERR } from '@/constant'

import asyncSuit from '@/utils/async'
import { send, errRescue, singular } from '@/utils/helper'
import { send, errRescue, singular, listUsers } from '@/utils/helper'
import { buildLog } from '@/utils/logger'

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

// 查看当前社区志愿者列表
export const onShowEditorList = (): void => {
const type = TYPE.USER_LISTER_COMMUNITY_EDITORS
const data = {
id: store.curCommunity.id,
brief: store.curCommunity.title,
}

send(EVENT.USER_LISTER_OPEN, { type, data })
listUsers(TYPE.USER_LISTER_COMMUNITY_EDITORS)
}

export const onShowSubscriberList = (): void => {
const type = TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS
const data = {
id: store.curCommunity.id,
brief: store.curCommunity.title,
}

send(EVENT.USER_LISTER_OPEN, { type, data })
// const type = TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS
// const data = {
// id: store.curCommunity.id,
// brief: store.curCommunity.title,
// }
// send(EVENT.USER_LISTER_OPEN, { type, data })

listUsers(TYPE.USER_LISTER_COMMUNITY_SUBSCRIBERS)
}

export const toggleDescExpand = (): void => {
Expand Down
4 changes: 2 additions & 2 deletionssrc/containers/thread/CperMapThread/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,8 +20,8 @@ export const MapWrapper = styled.div`
/*
* magic number, if set 100% the map will jump in laptop screen
*/
width:1000px;
height:625px;
width:100%;
height:100%;
min-height: 620px;
${css.media.mobile`width: 250%;`};
`
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
position: absolute;
z-index: 1;
left: 37px;
bottom:60px;
bottom:100px;
border-radius: 5px;
width: 150px;
transition: width 0.2s linear;
Expand Down
5 changes: 3 additions & 2 deletionssrc/containers/tool/Drawer/Content/DesktopView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,9 +10,10 @@ type TProps = {
visible: boolean
type: string // TODO:
attUser: any // TODO:
userListerType: string
}

const Content: FC<TProps> = ({ visible, type, attUser }) => {
const Content: FC<TProps> = ({ visible, type, attUser, userListerType }) => {
const ref = useRef(null)

/*
Expand All@@ -34,7 +35,7 @@ const Content: FC<TProps> = ({ visible, type, attUser }) => {
shadowSize="small"
showShadow={false}
>
{renderContent(type, attUser)}
{renderContent(type, attUser, userListerType)}
</CustomScroller>
</Wrapper>
)
Expand Down
14 changes: 13 additions & 1 deletionsrc/containers/tool/Drawer/Content/renderContent.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FC } from 'react'
import { TYPE } from '@/constant'
import ModeLineMenu from '@/containers/unit/ModeLineMenu'
import type { TUser } from '@/spec'
Expand All@@ -11,9 +12,16 @@ import {
AccountEditor,
// utils
C11NSettingPanel,
// userlister
UserLister,
} from '../dynamics'

const renderContent = (type: string, attUser: TUser, mmType?) => {
const renderContent = (
type: string,
attUser: TUser,
userListerType: string,
mmType?,
) => {
if (!type) return <div />

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

case TYPE.DRAWER.USER_LISTER: {
return <UserLister type={userListerType} />
}

default:
// TYPE.DRAWER.[ARTICLE]_VIEW:
return <ArticleViewer />
Expand Down
6 changes: 6 additions & 0 deletionssrc/containers/tool/Drawer/dynamics.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -49,6 +49,12 @@ export const AccountEditor = dynamic(
commonConfig,
)

// user lister
export const UserLister = dynamic(
() => import('@/containers/user/UserLister'),
commonConfig,
)

// export const RepoEditor = dynamic(
// () => import('@/containers/editor/RepoEditor'),
// editorConfig,
Expand Down
2 changes: 2 additions & 0 deletionssrc/containers/tool/Drawer/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,6 +33,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
slideVisible,
type,
attUserData,
userListerType,
mmType,
rightOffset,
optionsData,
Expand DownExpand Up@@ -60,6 +61,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
visible={slideVisible}
options={optionsData}
attUser={attUserData}
userListerType={userListerType}
mmType={mmType}
/>
</Viewer>
Expand Down
5 changes: 5 additions & 0 deletionssrc/containers/tool/Drawer/store.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -53,10 +53,12 @@ const DrawerStore = T.model('DrawerStore', {
//
TYPE.DRAWER.C11N_SETTINGS,
TYPE.DRAWER.MODELINE_MENU,
TYPE.DRAWER.USER_LISTER,
...ARTICLE_THREAD_CURD_TYPES,
]),
),
attUser: T.maybeNull(User),
userListerType: T.optional(T.string, ''),

// shortcut for modelineMenuType
mmType: T.optional(
Expand DownExpand Up@@ -154,6 +156,9 @@ const DrawerStore = T.model('DrawerStore', {
if (type === TYPE.DRAWER.MODELINE_MENU) {
slf.mmType = data
}
if (type === TYPE.DRAWER.USER_LISTER) {
slf.userListerType = data
}

if (contains(thread, values(ARTICLE_THREAD))) {
// article
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
importReact from 'react'
import{ FC, memo } from 'react'

import type { TCommunity } from '@/spec'
import { ICON_CMD, EMAIL_SUPPORT } from '@/config'
import { TYPE } from '@/constant'

import NoticeBar from '@/widgets/NoticeBar'

import {
Wrapper,
Title,
DescLabel,
DescIcon,
EditorIcon,
DescText,
DescLink,
} from './styles/header_info'

const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
type TProps = {
type: string
totalCount: number
curCommunity: TCommunity
}

const HeaderInfo: FC<TProps> = ({ type, totalCount, curCommunity }) => {
switch (type) {
case TYPE.USER_LISTER_FAVORITES:
return (
Expand All@@ -24,7 +32,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
</Title>
<DescLabel>
<DescIcon src={`${ICON_CMD}/paper.svg`} />
<DescText>{brief}</DescText>
<DescText>--</DescText>
</DescLabel>
</Wrapper>
)
Expand All@@ -38,7 +46,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
</Title>
<DescLabel>
<DescIcon src={`${ICON_CMD}/paper.svg`} />
<DescText>{brief}</DescText>
<DescText>--</DescText>
</DescLabel>
</Wrapper>
)
Expand All@@ -51,7 +59,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
人)
</Title>
<DescLabel>
<DescText>关注{brief} 的人 </DescText>
<DescText>关注-- 的人 </DescText>
</DescLabel>
</Wrapper>
)
Expand All@@ -64,7 +72,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
人)
</Title>
<DescLabel>
<DescText>{brief} 关注的人 </DescText>
<DescText>-- 关注的人 </DescText>
</DescLabel>
</Wrapper>
)
Expand All@@ -73,11 +81,11 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
return (
<Wrapper>
<Title>
关注中 ({totalCount}
已加入 ({totalCount}
人)
</Title>
<DescLabel>
<DescText>关注 {brief} 社区的人 </DescText>
<DescText>他们加入了 {curCommunity.title} 社区 </DescText>
</DescLabel>
</Wrapper>
)
Expand All@@ -86,20 +94,22 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
return (
<Wrapper>
<Title>
{brief} 社区编辑 ({totalCount}
{curCommunity.title} 社区志愿者 ({totalCount}
人)
</Title>
<NoticeBar
type="info"
content="志愿者为具有对应社区日常管理权限的用户，如果有你认为合适的人选，欢迎推荐或自荐 🙏🏻 。"
bottom={15}
left={-6}
noBg
/>
<DescLabel>
<EditorIcon src={`${ICON_CMD}/co_editor.svg`} />
<DescText>
{brief} 社区编辑面向所有用户开放，
<DescLink
href={`mailto:${EMAIL_SUPPORT}?subject=申请成为 ${curCommunity.raw} 社区编辑&body=感谢您的关注,成为社区编辑后,您将获得本社区范围内各种内容的删帖管理等权限,协助社区的健康发展. 因此本着对社区成员负责任的态度，我需要知道关于你的以下信息 (最终正文请删除本行): %0A%0A%0A你是谁? (包括但不限于 weibo / zhihu / jianshu / twitter 等社交账号) %0A%0A%0A你做过什么? (包括但不限于 github / stackoverflow / 个人网站(博客) 等技术社区账号) %0A%0A%0A你在 coderplanets 上的账号是?`}
>
申请成为社区编辑
</DescLink>
。
</DescText>
<DescLink
href={`mailto:${EMAIL_SUPPORT}?subject=申请成为 ${curCommunity.raw} 社区编辑&body=感谢您的关注,成为社区编辑后,您将获得本社区范围内各种内容的删帖管理等权限,协助社区的健康发展. 因此本着对社区成员负责任的态度，我需要知道关于你的以下信息 (最终正文请删除本行): %0A%0A%0A你是谁? (包括但不限于 weibo / zhihu / jianshu / twitter 等社交账号) %0A%0A%0A你做过什么? (包括但不限于 github / stackoverflow / 个人网站(博客) 等技术社区账号) %0A%0A%0A你在 coderplanets 上的账号是?`}
>
申请成为社区志愿者
</DescLink>
</DescLabel>
</Wrapper>
)
Expand All@@ -109,4 +119,4 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
}
}

export defaultReact.memo(HeaderInfo)
export default memo(HeaderInfo)
68 changes: 68 additions & 0 deletionssrc/containers/user/UserLister/List/EditorLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
import { FC, memo } from 'react'

import type { TUser } from '@/spec'
import Link from 'next/link'

import { useAccount } from '@/hooks'
import FollowButton from '@/widgets/Buttons/FollowButton'

import {
Wrapper,
UserWrapper,
UserAvatar,
UserBrief,
Title,
Desc,
Nickname,
Location,
CityIcon,
City,
Action,
} from '../styles/list/editor_layout'
import { onFollow, undoFollow } from '../logic'

type TProps = {
users: TUser[]
}

const EditorLayout: FC<TProps> = ({ users }) => {
const { c11n, user: account } = useAccount()
const { isLogin } = c11n

return (
<Wrapper>
{users.map((user) => (
<UserWrapper key={user.login}>
<UserAvatar src={user.avatar} />
<UserBrief>
<Title>
<Link href={`/u/${user.login}`} passHref>
<Nickname>{user.nickname}</Nickname>
</Link>
<Location>
<CityIcon />
<City>{user.location || user.geoCity || '--'}</City>
</Location>
</Title>
<Desc>{user.bio}</Desc>
<Action>
{isLogin && account.id === user.id ? (
<div>(本尊)</div>
) : (
<FollowButton
size="tiny"
hasFollowed={user.viewerHasFollowed}
userId={user.id}
onFollow={onFollow}
onUndoFollow={undoFollow}
/>
)}
</Action>
</UserBrief>
</UserWrapper>
))}
</Wrapper>
)
}

export default memo(EditorLayout)
Loading
[8]ページ先頭
©2009-2025 Movatter.jp