refactor(dashboard): passport editor improve (#185)

* style: adjust padding & size

* style: adjust padding & size

* refactor: move moderators sort logic to store

* style: adjust themes

* chore: wip

* chore: move dashbaord offset to hooks

* chore: rm community getter

* chore: mv articleNavi to hooks

src/app/queries/helper.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import { reject, includes, values, isEmpty, mergeRight } from 'ramda'
+import { reject, includes, values, isEmpty, mergeRight, startsWith } from 'ramda'
 import { useParams, useSearchParams, usePathname } from 'next/navigation'
 
 import type {
@@ -43,6 +43,12 @@ export const commonRes = (result): TGQSSRResult => {
   }
 }
 
+export const useIsStaticQuery = (): boolean => {
+  const pathname = usePathname()
+
+  return startsWith('/_next/static', pathname)
+}
+
 export const useCommunityParam = (): string => {
   const params = useParams()
 
@@ -103,9 +109,10 @@ export const parseCommunity = (communityPath: string): string => {
 /**
  * parse active thread from pathname
  */
-export const parseThread = (pathname: string): TThread => {
+export const parseThread = (pathname: string): TThread | '' => {
   const _thread = pathname.split('/')[2] as TThread
-  if (!includes(_thread, values(THREAD))) return THREAD.POST
+
+  if (!includes(_thread, values(THREAD))) return THREAD.DASHBOARD
 
   return _thread
 }
@@ -219,8 +226,6 @@ export const parseDashboard = (community: TCommunity, pathname: string): TParseD
     mediaReports,
   } = dashboard
 
-  // console.log('## parseDashboardThread: ', parseDashboardThread(pathname))
-
   const fieldsObj = removeEmptyValuesFromObject({
     enable,
     nameAlias: parseDashboardAlias(nameAlias),

src/app/queries/index.ts

@@ -10,7 +10,7 @@ import { usePathname, useSearchParams } from 'next/navigation'
 import type { TCommunity } from '@/spec'
 import { P } from '@/schemas'
 import { DEFAULT_THEME } from '@/config'
-import { THREAD } from '@/constant/thread'
+import { THREAD, ARTICLE_THREAD } from '@/constant/thread'
 import URL_PARAM from '@/constant/url_param'
 import { ARTICLE_CAT, ARTICLE_STATE, ARTICLE_ORDER } from '@/constant/gtd'
 
@@ -34,6 +34,7 @@ import {
   useArticleParams,
   useCommunityParam,
   useThreadParam,
+  useIsStaticQuery,
   useIdParam,
   //
   parseWallpaper,
@@ -43,10 +44,12 @@ import {
 export { parseCommunity, useThreadParam } from './helper'
 
 export const useSession = (): TSessionRes => {
+  const isStaticQuery = useIsStaticQuery()
+
   const [result] = useQuery({
     query: P.sessionState,
     variables: {},
-    pause: false,
+    pause: isStaticQuery,
     // NOTE: network-only will freeze the page, don't know why ...
     // requestPolicy: 'network-only',
     // NOTE: this warning calling warning in console
@@ -69,14 +72,15 @@ export const useSession = (): TSessionRes => {
 
 export const useCommunity = (userHasLogin: boolean): TCommunityRes => {
   const slug = useCommunityParam()
+  const isStaticQuery = useIsStaticQuery()
 
   const [result] = useQuery({
     query: P.community,
     variables: {
       slug,
       userHasLogin,
     },
-    // pause: opt.skip,
+    pause: isStaticQuery,
   })
 
   return {
@@ -87,15 +91,15 @@ export const useCommunity = (userHasLogin: boolean): TCommunityRes => {
 
 export const useTags = (): TTagsRes => {
   const community = useCommunityParam()
-  const _thread = useThreadParam()
-  const thread = _thread.toUpperCase()
+  const isStaticQuery = useIsStaticQuery()
+  const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.pagedArticleTags,
     variables: {
-      filter: { community, thread },
+      filter: { community, thread: thread.toUpperCase() },
     },
-    // pause: opt.skip,
+    pause: !(!isStaticQuery && includes(thread, values(ARTICLE_THREAD))),
   })
 
   return {
@@ -107,12 +111,13 @@ export const useTags = (): TTagsRes => {
 export const usePagedPosts = (userHasLogin: boolean): TPagedPostsRes => {
   const filter = usePagedArticlesParams()
   const thread = useThreadParam()
+  const isStaticQuery = useIsStaticQuery()
   const id = useIdParam()
 
   const [result] = useQuery({
     query: P.pagedPosts,
     variables: { filter, userHasLogin },
-    pause: !(thread === THREAD.POST && !id),
+    pause: !(!isStaticQuery && thread === THREAD.POST && !id),
   })
 
   return {
@@ -123,12 +128,13 @@ export const usePagedPosts = (userHasLogin: boolean): TPagedPostsRes => {
 
 export const usePagedChangelogs = (userHasLogin: boolean): TPagedChangelogsRes => {
   const filter = usePagedArticlesParams()
+  const isStaticQuery = useIsStaticQuery()
   const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.pagedChangelogs,
     variables: { filter, userHasLogin },
-    pause: thread !== THREAD.CHANGELOG,
+    pause: !(!isStaticQuery && thread === THREAD.CHANGELOG),
   })
 
   return {
@@ -139,12 +145,13 @@ export const usePagedChangelogs = (userHasLogin: boolean): TPagedChangelogsRes =
 
 export const usePost = (userHasLogin: boolean): TPostRes => {
   const { community, id } = useArticleParams()
+  const isStaticQuery = useIsStaticQuery()
   const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.post,
     variables: { community, id, userHasLogin },
-    pause: !(thread === THREAD.POST && id),
+    pause: !(!isStaticQuery && thread === THREAD.POST && id),
   })
 
   return {
@@ -155,12 +162,13 @@ export const usePost = (userHasLogin: boolean): TPostRes => {
 
 export const useChangelog = (userHasLogin: boolean): TChangelogRes => {
   const { community, id } = useArticleParams()
+  const isStaticQuery = useIsStaticQuery()
   const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.changelog,
     variables: { community, id, userHasLogin },
-    pause: !(thread === THREAD.CHANGELOG && id),
+    pause: !(!isStaticQuery && thread === THREAD.CHANGELOG && id),
   })
 
   return {
@@ -171,12 +179,13 @@ export const useChangelog = (userHasLogin: boolean): TChangelogRes => {
 
 export const useGroupedKanbanPosts = (userHasLogin: boolean): TGroupedKanbanPostsRes => {
   const community = useCommunityParam()
+  const isStaticQuery = useIsStaticQuery()
   const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.groupedKanbanPosts,
     variables: { community, userHasLogin },
-    pause: thread !== THREAD.KANBAN,
+    pause: !(!isStaticQuery && thread === THREAD.KANBAN),
   })
 
   return {
@@ -189,16 +198,21 @@ export const useGroupedKanbanPosts = (userHasLogin: boolean): TGroupedKanbanPost
  * wallpaper related settings for all page
  */
 export const useWallpaper = (community: TCommunity): TParsedWallpaper => {
-  return parseWallpaper(community)
+  const isStaticQuery = useIsStaticQuery()
+
+  // @ts-ignore
+  return !isStaticQuery ? parseWallpaper(community) : {}
 }
 
 /**
  * general dashboard settings for all page
  */
 export const useDashboard = (community: TCommunity): TParseDashboard => {
+  const isStaticQuery = useIsStaticQuery()
   const pathname = usePathname()
 
-  return parseDashboard(community, pathname)
+  // @ts-ignore
+  return !isStaticQuery ? parseDashboard(community, pathname) : {}
 }
 
 /**

src/containers/editor/PassportEditor/Selects.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 
 import { keys, includes } from 'ramda'
 
+import { Trans } from '@/i18n/dashboard'
 import Checker from '@/widgets/Checker'
 
 import { Wrapper, Item, ReadonlyItem, CheckIcon, RootCheckIcon, ItemTitle } from './styles/selects'
@@ -30,7 +31,7 @@ const Selects: FC<TProps> = ({ rules, moderatorRules, selectedRules, readonly =
             <ReadonlyItem key={ruleKey}>
               {isRootRule ? <RootCheckIcon /> : <CheckIcon />}
 
-              <ItemTitle>{ruleKey}</ItemTitle>
+              <ItemTitle>{Trans(ruleKey)}</ItemTitle>
             </ReadonlyItem>
           )
         })}
@@ -48,7 +49,7 @@ const Selects: FC<TProps> = ({ rules, moderatorRules, selectedRules, readonly =
               size="small"
               onChange={(checked) => toggleCheck(ruleKey, checked)}
             >
-              <ItemTitle>{ruleKey}</ItemTitle>
+              <ItemTitle>{Trans(ruleKey)}</ItemTitle>
             </Checker>
           </Item>
         )

src/containers/editor/PassportEditor/index.tsx

@@ -34,6 +34,8 @@ const PassportEditor: FC = () => {
   const rules = isActiveModeratorRoot ? allRootRules : allModeratorRules
   const readonly = isActiveModeratorRoot || !isCurUserModeratorRoot
 
+  if (!activeModerator) return null
+
   return (
     <Wrapper $testid="passport-editor">
       {!isActiveModeratorRoot ? <h3>权限设置</h3> : <RootSign>ROOT</RootSign>}

src/containers/editor/PassportEditor/logic.ts

@@ -82,7 +82,6 @@ const DataSolver = [
       }
     },
   },
-
   {
     match: asyncRes('allPassportRules'),
     action: ({ allPassportRules }) => {

src/containers/editor/PassportEditor/store.ts

@@ -27,7 +27,7 @@ const PassportEditor = T.model('PassportEditor', {
     get activeModerator(): TUser {
       const root = getParent(self) as TRootStore
 
-      return toJS(root.dashboardThread.activeModerator)
+      return toJS(root.dashboardThread?.activeModerator)
     },
     get isCurUserModeratorRoot(): boolean {
       const slf = self as TStore
@@ -45,7 +45,7 @@ const PassportEditor = T.model('PassportEditor', {
       const curModerators = curCommunity.moderators
       const curRoot = find((moderator) => moderator.role === 'root', curModerators)
 
-      return curRoot.user.login === activeModerator.login
+      return curRoot.user.login === activeModerator?.login
     },
     get allRootRules(): string {
       const root = getParent(self) as TRootStore

src/containers/editor/PassportEditor/styles/selects.ts

@@ -28,7 +28,7 @@ export const RootCheckIcon = styled(RootCheckSVG)`
   fill: ${theme('rainbow.green')};
   margin-right: 5px;
 `
-
 export const ItemTitle = styled.div`
+  color: ${theme('article.title')};
   ${css.lineClamp(1)};
 `

src/containers/thread/DashboardThread/Admin/List.tsx

@@ -2,23 +2,25 @@ import { FC, memo } from 'react'
 
 import type { TModerator, TUser } from '@/spec'
 
-import { sortByIndex } from '@/helper'
 import { callPassportEditor } from '@/signal'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import { SpaceGrow } from '@/widgets/Common'
-import DropdownButton from '@/widgets/Buttons/DropdownButton'
+import Button from '@/widgets/Buttons/Button'
 import AdminAvatar from '@/widgets/AdminAvatar'
 
 import {
   Wrapper,
   User,
   SettingIcon,
   Intro,
-  Title,
+  Header,
   Name,
   Login,
   Bio,
   RootSign,
+  AllPassportText,
+  ArrowIcon,
 } from '../styles/admin/list'
 import { setActiveSettingAdmin } from '../logic'
 
@@ -28,36 +30,43 @@ type TProps = {
 }
 
 const List: FC<TProps> = ({ moderators, activeModerator }) => {
-  // @ts-ignore
-  const sortedModerators = sortByIndex(moderators, 'passportItemCount').reverse() as TModerator[]
+  const primaryColor = usePrimaryColor()
 
   return (
     <Wrapper>
-      {sortedModerators.map((item) => {
+      {moderators.map((item) => {
         const { user, passportItemCount, role } = item
         const active = user.login === activeModerator?.login
 
         return (
           <User key={user.login} $active={active} $noActive={activeModerator === null}>
             {active && <SettingIcon />}
 
-            <AdminAvatar user={user} right={14} top={5} />
+            <AdminAvatar user={user} right={16} top={5} />
             <Intro>
-              <Title>
+              <Header>
                 <Name>{user.nickname}</Name>
                 <Login>@{user.login}</Login>
-                {role === 'root' && <RootSign>ROOT</RootSign>}
+                {role === 'root' && <RootSign $color={primaryColor}>ROOT</RootSign>}
                 <SpaceGrow />
-                <DropdownButton
-                  top={2}
+                <Button
+                  top={1}
                   onClick={() => {
                     setActiveSettingAdmin(user)
                     callPassportEditor()
                   }}
+                  ghost
+                  noBorder
+                  size="small"
                 >
-                  {role === 'root' ? <>全部权限</> : <>{passportItemCount} 项权限</>}
-                </DropdownButton>
-              </Title>
+                  {role === 'root' ? (
+                    <AllPassportText $color={primaryColor}>全部权限</AllPassportText>
+                  ) : (
+                    <>{passportItemCount} 项权限</>
+                  )}
+                  <ArrowIcon $color={primaryColor} $isRoot={role === 'root'} />
+                </Button>
+              </Header>
               <Bio>{user.bio}</Bio>
             </Intro>
           </User>