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

src/containers/digest/CommunityDigest/logic.ts

@@ -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'
@@ -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 => {

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

@@ -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%;`};
 `

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

@@ -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;

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

@@ -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)
 
   /*
@@ -34,7 +35,7 @@ const Content: FC<TProps> = ({ visible, type, attUser }) => {
         shadowSize="small"
         showShadow={false}
       >
-        {renderContent(type, attUser)}
+        {renderContent(type, attUser, userListerType)}
       </CustomScroller>
     </Wrapper>
   )

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

@@ -1,3 +1,4 @@
+import { FC } from 'react'
 import { TYPE } from '@/constant'
 import ModeLineMenu from '@/containers/unit/ModeLineMenu'
 import type { TUser } from '@/spec'
@@ -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) {
@@ -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 />

src/containers/tool/Drawer/dynamics.tsx

@@ -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,

src/containers/tool/Drawer/index.tsx

@@ -33,6 +33,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
     slideVisible,
     type,
     attUserData,
+    userListerType,
     mmType,
     rightOffset,
     optionsData,
@@ -60,6 +61,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
         visible={slideVisible}
         options={optionsData}
         attUser={attUserData}
+        userListerType={userListerType}
         mmType={mmType}
       />
     </Viewer>

src/containers/tool/Drawer/store.ts

@@ -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(
@@ -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

src/containers/user/UserLister/HeaderInfo.js → src/containers/user/UserLister/HeaderInfo.tsx

@@ -1,19 +1,27 @@
-import React 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 (
@@ -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>
       )
@@ -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>
       )
@@ -51,7 +59,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
             人)
           </Title>
           <DescLabel>
-            <DescText>关注 {brief} 的人 </DescText>
+            <DescText>关注 -- 的人 </DescText>
           </DescLabel>
         </Wrapper>
       )
@@ -64,7 +72,7 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
             人)
           </Title>
           <DescLabel>
-            <DescText>{brief} 关注的人 </DescText>
+            <DescText>-- 关注的人 </DescText>
           </DescLabel>
         </Wrapper>
       )
@@ -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>
       )
@@ -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>
       )
@@ -109,4 +119,4 @@ const HeaderInfo = ({ type, totalCount, brief, curCommunity }) => {
   }
 }
 
-export default React.memo(HeaderInfo)
+export default memo(HeaderInfo)

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

@@ -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)