refactor(article-filter-bar): redesign general selectors (#171)

* style(cat-selector): basic UI concept wip * style(cat-selector): basic UI concept wip * style(cat-selector): basic UI concept wip * style(cat-selector): userLogin opt for ssr * refactor(ramda): fix propEq args issue * refactor: fix some tooltip issue * refactor: fix some tooltip issue * refactor: state-selector make right * refactor: state-selector make right * refactor(filter): extraact ConditionSelector * refactor(filter): extraact ConditionSelector * refactor(filter): extraact ConditionSelector * refactor(filter): wip * refactor(filter): color to icon * refactor(filter): sort filter
groupher · Nov 14, 2023 · 95475d8 · 95475d8
1 parent 5114d89
commit 95475d8
Show file tree

Hide file tree

Showing 80 changed files with 614 additions and 1,142 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,6 @@
     "@urql/next": "^1.1.0",
     "chalk": "^2.4.1",
     "compatible-debug": "^1.0.0",
-    "cookies-next": "^2.1.1",
     "cross-env": "^7.0.2",
     "graphql": "^16.6.0",
     "markdown-to-jsx": "^7.2.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -45,7 +45,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <body>
         <StyledComponentsRegistry>
           <GraphQLProvider token={token}>
-            <RootStoreProvider>
+            <RootStoreProvider token={token}>
               <GlobalLayout>{children}</GlobalLayout>
             </RootStoreProvider>
           </GraphQLProvider>

diff --git a/src/app/providers/GraphQLProvider.tsx b/src/app/providers/GraphQLProvider.tsx
@@ -16,8 +16,7 @@ type TProps = {
 
 const GraphQLProvider: FC<TProps> = ({ children, token }) => {
   const [client, ssr] = useMemo(() => {
-    console.log('## use token: ', token)
-
+    // console.log('## use token: ', token)
     const ssr = ssrExchange()
     const client = createClient({
       url: GRAPHQL_ENDPOINT,

diff --git a/src/app/providers/RootStoreProvider.tsx b/src/app/providers/RootStoreProvider.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { FC, ReactNode } from 'react'
 import { usePathname, useParams } from 'next/navigation'
 import { Provider } from 'mobx-react'
 import { enableStaticRendering } from 'mobx-react-lite'
@@ -25,10 +26,17 @@ import {
 
 enableStaticRendering(typeof window === 'undefined')
 
-const StoreWrapper = ({ children }) => {
+type TProps = {
+  token: null | string
+  children: ReactNode
+}
+
+const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
   // console.log('## init in layout, load community info, dashboard info')
   const pathname = usePathname()
   const params = useParams()
+  const userHasLogin = !!token
+
   const communitySlug = parseCommunity(params.community as string)
 
   // console.log('## pathname: ', pathname)
@@ -41,31 +49,34 @@ const StoreWrapper = ({ children }) => {
   const { sesstion } = useSession()
 
   // const [result] = useQueryCommunity('home', { skip: pathname === '/home' })
-  const { community } = useCommunity(communitySlug, { skip })
+  const { community } = useCommunity(communitySlug, { skip, userHasLogin })
 
   const { pagedPosts } = usePagedPosts(
     { community: communitySlug },
-    { skip: !(activeThread === THREAD.POST && !params.id) },
+    { skip: !(activeThread === THREAD.POST && !params.id), userHasLogin },
   )
 
   const { post } = usePost(communitySlug, params.id as string, {
     skip: !(activeThread === THREAD.POST && params.id),
+    userHasLogin,
   })
 
   const { changelog } = useChangelog(communitySlug, params.id as string, {
     skip: !(activeThread === THREAD.CHANGELOG && params.id),
+    userHasLogin,
   })
 
   const { groupedKanbanPosts } = useGroupedKanbanPosts(communitySlug, {
     skip: activeThread !== THREAD.KANBAN,
+    userHasLogin,
   })
 
   const { pagedChangelogs } = usePagedChangelogs(
     { community: communitySlug },
-    { skip: activeThread !== THREAD.CHANGELOG },
+    { skip: activeThread !== THREAD.CHANGELOG, userHasLogin },
   )
 
-  const { tags } = useTags({ community: communitySlug }, { skip })
+  const { tags } = useTags({ community: communitySlug }, { skip, userHasLogin })
 
   const wallpaper = !skip ? parseWallpaper(community) : {}
   const dashboard = !skip ? parseDashboard(community, pathname) : {}
@@ -94,4 +105,4 @@ const StoreWrapper = ({ children }) => {
   return <Provider store={store}>{children}</Provider>
 }
 
-export default StoreWrapper
+export default RootStoreWrapper
diff --git a/src/app/queries/constant.ts b/src/app/queries/constant.ts
@@ -6,6 +6,7 @@ import type { TRequestPolicy } from './spec'
 export const GQ_OPTION = {
   skip: false,
   requestPolicy: 'cache-first' as TRequestPolicy,
+  userHasLogin: false,
 }
 
 export const TAGS_FILTER = {

diff --git a/src/app/queries/index.ts b/src/app/queries/index.ts
@@ -33,7 +33,10 @@ export const useSession = (): TSessionRes => {
     query: P.sessionState,
     variables: {},
     pause: false,
-    requestPolicy: 'network-only',
+    // NOTE: network-only will freeze the page, don't know why ...
+    // requestPolicy: 'network-only',
+    // NOTE: this warning calling warning in console
+    // requestPolicy: 'cache-and-network',
   })
 
   return {
@@ -43,8 +46,8 @@ export const useSession = (): TSessionRes => {
         curTheme: DEFAULT_THEME,
       },
       account: {
-        user: result.data.sessionState?.user || {},
-        isValidSession: result.data.sessionState?.isValid,
+        user: result.data?.sessionState?.user || {},
+        isValidSession: result.data?.sessionState?.isValid,
       },
     },
   }
@@ -57,7 +60,7 @@ export const useCommunity = (slug: string, _opt: TSSRQueryOpt = {}): TCommunityR
     query: P.community,
     variables: {
       slug,
-      userHasLogin: false,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
@@ -80,7 +83,7 @@ export const useTags = (filter: TTagsFilter = TAGS_FILTER, _opt: TSSRQueryOpt =
         community,
         thread: thread.toUpperCase(),
       },
-      userHasLogin: false,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
@@ -104,7 +107,7 @@ export const usePagedPosts = (
     query: P.pagedPosts,
     variables: {
       filter: { page, size, community },
-      userHasLogin: false,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
@@ -124,7 +127,7 @@ export const usePost = (community: string, id: TID, _opt: TSSRQueryOpt = {}): TP
     variables: {
       community,
       id,
-      userHasLogin: false,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
@@ -169,7 +172,7 @@ export const usePagedChangelogs = (
     query: P.pagedChangelogs,
     variables: {
       filter: { page, size, community },
-      userHasLogin: false,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
@@ -193,7 +196,7 @@ export const useChangelog = (
     variables: {
       community,
       id,
-      userHasLogin: false,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,

diff --git a/src/app/queries/spec.d.ts b/src/app/queries/spec.d.ts
@@ -45,6 +45,7 @@ export type TSSRQueryOpt = {
   skip?: boolean
   // cache-first is the default
   requestPolicy?: TRequestPolicy
+  userHasLogin?: boolean
 }
 
 export type TGQSSRResult = {

diff --git a/src/containers/content/CommunitiesContent/store.js b/src/containers/content/CommunitiesContent/store.js
@@ -104,7 +104,7 @@ const ExploreContentStore = T.model('ExploreContentStore', {
       self.root.authWarning(options)
     },
     toggleSubscribe(community) {
-      const index = findIndex(propEq('id', community.id), self.pagedCommunities.entries)
+      const index = findIndex(propEq(community.id, 'id'), self.pagedCommunities.entries)
       if (index === -1) return false
 
       if (self.pagedCommunities.entries[index].viewerHasSubscribed) {

diff --git a/src/containers/editor/ArticleEditor/index.tsx b/src/containers/editor/ArticleEditor/index.tsx
@@ -6,19 +6,17 @@ import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import type { TEditMode, TMetric } from '@/spec'
-import { ARTICLE_CAT_MODE } from '@/constant/gtd'
 import METRIC from '@/constant/metric'
+import { CONDITION_MODE } from '@/constant/mode'
 
 import { buildLog } from '@/logger'
 
+import RichEditor from '@/containers/editor/RichEditor'
 import { Space } from '@/widgets/Common'
+import ConditionSelector from '@/widgets/ConditionSelector'
 import ArchiveAlert from '@/widgets/ArchiveAlert'
 import NoticeBar from '@/widgets/NoticeBar'
-import CatSelector from '@/widgets/CatSelector'
 import TagSelector from '@/widgets/TagSelector'
-import StateSelector from '@/widgets/StateSelector'
-
-import RichEditor from '@/containers/editor/RichEditor'
 
 import ArticleCover from './ArticleCover'
 
@@ -70,13 +68,13 @@ const ArticleEditor: FC<TProps> = ({ metric = METRIC.ARTICLE_EDITOR }) => {
           <FuncRow>
             <TagSelector groupedTags={groupedTags} activeTag={activeTagData} />
             <Space left={20} />
-            <CatSelector
-              mode={ARTICLE_CAT_MODE.FULL}
-              activeCat={activeCat}
+            <ConditionSelector
+              mode={CONDITION_MODE.CAT}
+              selected={false}
+              active={activeCat}
               onSelect={catOnChange}
+              right={20}
             />
-            <Space left={20} />
-            <StateSelector />
           </FuncRow>
 
           {initEditor && (

diff --git a/src/containers/layout/GlobalLayout/logic.ts b/src/containers/layout/GlobalLayout/logic.ts
@@ -133,7 +133,6 @@ const ErrSolver = [
 export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
-    console.log('## global init hanlders')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 
     initAppVersion()

diff --git a/src/containers/thread/ArticlesThread/store.ts b/src/containers/thread/ArticlesThread/store.ts
@@ -150,7 +150,7 @@ const ArticlesThread = T.model('ArticlesThread', {
 
       const { entries } = slf.pagedArticlesData
       // @ts-ignore
-      const index = findIndex(propEq('id', id), entries)
+      const index = findIndex(propEq(id, 'id'), entries)
       if (index < 0) return null
 
       return index

diff --git a/src/containers/thread/DashboardThread/CMS/FilterBar/index.tsx b/src/containers/thread/DashboardThread/CMS/FilterBar/index.tsx
@@ -2,8 +2,8 @@ import { FC } from 'react'
 
 import { SpaceGrow } from '@/widgets/Common'
 import Button from '@/widgets/Buttons/Button'
-import StateSelector from '@/widgets/StateSelector'
-import CatSelector from '@/widgets/CatSelector'
+import { CONDITION_MODE } from '@/constant/mode'
+import ConditionSelector from '@/widgets/ConditionSelector'
 
 import ActionBar from './ActionBar'
 
@@ -51,8 +51,10 @@ const FilterBar: FC<TProps> = ({ checkboxActive, triggerCheckbox, selectedCount
           <SearchIcon />
           <Inputer placeholder="按标题搜索" />
         </InputerWrapper>
-        <CatSelector activeCat="ALL" right={12} onSelect={(cat) => console.log(cat)} />
-        <StateSelector mode="filter" right={20} />
+
+        <ConditionSelector mode={CONDITION_MODE.CAT} selected={false} right={20} />
+        <ConditionSelector mode={CONDITION_MODE.STATE} selected={false} right={20} />
+
         <DateRangeWrapper>日期范围(TODO)</DateRangeWrapper>
         <SpaceGrow />
         <Button size="small" ghost noBorder top={-2}>

diff --git a/src/containers/thread/DashboardThread/store/index.ts b/src/containers/thread/DashboardThread/store/index.ts
@@ -417,7 +417,7 @@ const DashboardThread = T.model('DashboardThread', {
       )
 
       const mappedThreads = curCommunity.threads.map((pThread) => {
-        const aliasItem = find(propEq('slug', pThread.slug))(nameAlias) as TNameAlias
+        const aliasItem = find(propEq(pThread.slug, 'slug'))(nameAlias) as TNameAlias
 
         return {
           ...pThread,

diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
@@ -52,7 +52,7 @@ const AbuseReport = T.model('AbuseReport', {
     },
     get activeItem(): TREPORT_ITEM {
       const { itemsData, checkedItemRaw } = self as TStore
-      const findItem = find(propEq('slug', checkedItemRaw), itemsData) as TREPORT_ITEM
+      const findItem = find(propEq(checkedItemRaw, 'slug'), itemsData) as TREPORT_ITEM
 
       return findItem || initItem
     },

diff --git a/src/containers/tool/MailBox/MailsPanel.js b/src/containers/tool/MailBox/MailsPanel.js
@@ -34,11 +34,11 @@ const mailTabs = [
 
 const MailsPannel = ({ activeRaw, mailStatus, pagedMentions }) => {
   if (mailStatus.mentionCount !== 0) {
-    const index = findIndex(propEq('slug', 'mentions'), mailTabs)
+    const index = findIndex(propEq('mentions', 'slug'), mailTabs)
     mailTabs[index].count = mailStatus.mentionCount
   }
   if (mailStatus.notificationCount !== 0) {
-    const index = findIndex(propEq('slug', 'sys_notifications'), mailTabs)
+    const index = findIndex(propEq('sys_notifications', 'slug'), mailTabs)
     mailTabs[index].count = mailStatus.notificationCount
   }