refactor(articles-thread): extract articles thread (#1108)

* refactor(articlesFilter): adjust props

* feat: add useMST hooks, awesome

* chore: missing inline doc

* chore(articles-thread): basic setup

* chore(articles-thread): drop PostsThread

* refactor(articlesFilter): wip

* fix(preview): edge case

* chore(types): add common used useMST store type

* refactor(useMST): split it into useAccount

* refactor(useAccount): improve type

* refactor(useAccount): imporve substore hooks

* chore(articles-thread): filter naming

* refactor: wip

* refactor(loadingEffect): rename to loading & ts

* refactor: wip

* refactor: wip

* refactor(articlesThread): adjust props

* refactor(articlesThread): make onPreview eventify

* chore(articlesThread): fmt

* chore(articlesThread): mv holygrail tabs to common layout

* refactor(community-content): re-org

* refactor(articlesThread): tab change wip

Author: mydearxym

server/routes.js

@@ -124,11 +124,6 @@ router.route('/:community/help-center').get((req, res) => {
   return renderAndCache({ req, res, path: '/help-center' })
 })
 
-// NOTE:  TMP: 博客
-router.route('/:community/blogs').get((req, res) => {
-  return renderAndCache({ req, res, path: '/home/blogs' })
-})
-
 // 社区主页
 router.route('/:community/:thread').get((req, res) => {
   if (

src/components/ArticleItemPrefixLabel/ReadLabel.tsx

@@ -1,15 +1,14 @@
 import { FC, memo } from 'react'
+import { useAccount } from '@/hooks'
 
 import { ReadedLabel } from './styles'
-
 import type { TProps } from './index'
 
-const ReadLabel: FC<TProps> = ({ entry, accountInfo, topOffset = '20px' }) => {
+const ReadLabel: FC<TProps> = ({ entry, topOffset = '20px' }) => {
+  const { c11n } = useAccount()
+  const { isLogin, markViewed } = c11n
+
   const { viewerHasViewed } = entry
-  const {
-    isLogin,
-    customization: { markViewed },
-  } = accountInfo
 
   if (!isLogin) return null
   if (markViewed && viewerHasViewed) {

src/components/ArticleItemPrefixLabel/index.tsx

@@ -6,7 +6,6 @@
 
 import { FC, memo } from 'react'
 
-import type { TAccount } from '@/spec'
 import { buildLog } from '@/utils'
 import { PinIcon } from './styles'
 import ReadLabel from './ReadLabel'
@@ -15,23 +14,16 @@ import ReadLabel from './ReadLabel'
 const log = buildLog('c:ArticleItemPrefixLabel:index')
 
 export type TProps = {
-  accountInfo: TAccount
   topOffset?: string
   entry: {
     viewerHasViewed?: boolean
     pin?: boolean
   }
 }
-const ArticleItemPrefixLabel: FC<TProps> = ({
-  entry,
-  accountInfo,
-  topOffset = '22px',
-}) => {
+const ArticleItemPrefixLabel: FC<TProps> = ({ entry, topOffset = '22px' }) => {
   if (entry.pin) return <PinIcon top={topOffset} />
 
-  return (
-    <ReadLabel entry={entry} accountInfo={accountInfo} topOffset={topOffset} />
-  )
+  return <ReadLabel entry={entry} topOffset={topOffset} />
 }
 
 export default memo(ArticleItemPrefixLabel)

src/components/ArticlesFilter/DesktopView.tsx

@@ -5,48 +5,66 @@
  */
 
 import { FC, memo } from 'react'
+import dynamic from 'next/dynamic'
 
-import type { TThread, TAccount, TArticleFilter } from '@/spec'
-import { THREAD } from '@/constant'
+import type { TArticleFilter, TResState } from '@/spec'
+
+import { TYPE } from '@/constant'
 import { buildLog } from '@/utils'
+import { useViewing } from '@/hooks'
 
 import FilterButton from './FilterButton'
-import SelectedTags from './SelectedTags'
+import SelectedFilters from './SelectedFilters'
 import FilterResult from './FilterResult'
 
 import { Wrapper, MainFilterWrapper } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ArticlesFilter:index')
 
+const LavaLampLoading = dynamic(
+  () => import('@/components/Loading/LavaLampLoading'),
+  {
+    /* eslint-disable react/display-name */
+    loading: () => <div />,
+    ssr: false,
+  },
+)
+
 type TProps = {
   activeFilter: TArticleFilter
   onSelect: (filter: TArticleFilter) => void
-  thread: TThread
-  accountInfo: TAccount
+  pageNumber?: number
   totalCount?: number
+  resState?: TResState
 }
 
 const ArticlesFilter: FC<TProps> = ({
-  thread = THREAD.POST,
   activeFilter = {},
   onSelect,
-  accountInfo: { isLogin },
+  pageNumber = 1,
   totalCount = 0,
-}) => (
-  <Wrapper>
-    <MainFilterWrapper>
-      <FilterButton
-        thread={thread}
-        onSelect={onSelect}
-        isLogin={isLogin}
-        activeFilter={activeFilter}
-      />
-
-      <SelectedTags onSelect={onSelect} activeFilter={activeFilter} />
-    </MainFilterWrapper>
-    <FilterResult totalCount={totalCount} />
-  </Wrapper>
-)
+  resState = TYPE.RES_STATE.DONE,
+}) => {
+  const { activeThread } = useViewing()
+
+  return (
+    <Wrapper>
+      <MainFilterWrapper>
+        <FilterButton
+          thread={activeThread}
+          onSelect={onSelect}
+          activeFilter={activeFilter}
+        />
+        <SelectedFilters onSelect={onSelect} activeFilter={activeFilter} />
+      </MainFilterWrapper>
+
+      {resState === TYPE.RES_STATE.LOADING && (
+        <LavaLampLoading top={2} right={28} />
+      )}
+      <FilterResult pageNumber={pageNumber} totalCount={totalCount} />
+    </Wrapper>
+  )
+}
 
 export default memo(ArticlesFilter)

src/components/ArticlesFilter/FilterButton.tsx

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic'
 
 import type { TThread, TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
+import { useAccount } from '@/hooks'
 
 import Tooltip from '@/components/Tooltip'
 
@@ -21,17 +22,13 @@ const FilterPanel = dynamic(() => import('./FilterPanel/index'), {
 
 type TProps = {
   thread: TThread
-  isLogin: boolean
   activeFilter: TArticleFilter
   onSelect: (filter: TArticleFilter) => void
 }
 
-const FilterButton: FC<TProps> = ({
-  thread,
-  onSelect,
-  isLogin,
-  activeFilter,
-}) => {
+const FilterButton: FC<TProps> = ({ thread, onSelect, activeFilter }) => {
+  const { isLogin } = useAccount()
+
   return (
     <Wrapper>
       <Tooltip

src/components/ArticlesFilter/FilterResult.tsx

@@ -1,14 +1,19 @@
 import { FC, memo } from 'react'
 
+import DotDivider from '@/components/DotDivider'
+
 import { Wrapper, ResultText } from './styles/filter_result'
 
 type TProps = {
   totalCount: number
+  pageNumber: number
 }
 
-const FilterResult: FC<TProps> = ({ totalCount }) => {
+const FilterResult: FC<TProps> = ({ pageNumber, totalCount }) => {
   return (
     <Wrapper>
+      <ResultText>第 {pageNumber} 页</ResultText>
+      <DotDivider space={8} />
       <ResultText>共 {totalCount} 条</ResultText>
     </Wrapper>
   )

src/components/ArticlesFilter/SelectedTags.tsx renamed to src/components/ArticlesFilter/SelectedFilters.tsx

@@ -5,7 +5,7 @@ import type { TArticleFilter } from '@/spec'
 import { isEmptyValue } from '@/utils'
 
 import Tag from '@/components/Tag'
-import { Wrapper, TagWrapper } from './styles/selected_tags'
+import { Wrapper, TagWrapper } from './styles/selected_filters'
 
 const filterDict = {
   TODAY: '今天',
@@ -51,7 +51,7 @@ type TProps = {
   activeFilter: TArticleFilter
 }
 
-const SelectedTags: FC<TProps> = ({ activeFilter, onSelect }) => (
+const SelectedFilters: FC<TProps> = ({ activeFilter, onSelect }) => (
   <Wrapper>
     {keys(activeFilter).map((filterKey) => (
       <FilterTag
@@ -64,4 +64,4 @@ const SelectedTags: FC<TProps> = ({ activeFilter, onSelect }) => (
   </Wrapper>
 )
 
-export default memo(SelectedTags)
+export default memo(SelectedFilters)

src/components/ArticlesFilter/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import { Fragment, memo } from 'react'
 
 import { useDevice } from '@/hooks'
 import { buildLog } from '@/utils'
@@ -17,9 +17,7 @@ const log = buildLog('c:ArticlesFilter:index')
 const ArticlesFilter = (props) => {
   const { isMobile } = useDevice()
 
-  return (
-    <React.Fragment>{!isMobile && <DesktopView {...props} />}</React.Fragment>
-  )
+  return <Fragment>{!isMobile && <DesktopView {...props} />}</Fragment>
 }
 
-export default React.memo(ArticlesFilter)
+export default memo(ArticlesFilter)

src/components/ArticlesFilter/styles/filter_result.ts

@@ -7,5 +7,4 @@ export const Wrapper = styled.div`
 `
 export const ResultText = styled.div`
   color: ${theme('thread.filterResultHint')};
-  margin-right: 3px;
 `