Jul 10, 2021 · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021
diff --git a/server/routes.js b/server/routes.js
  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 (
diff --git a/src/components/ArticleItemPrefixLabel/ReadLabel.tsx b/src/components/ArticleItemPrefixLabel/ReadLabel.tsx
 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) {
diff --git a/src/components/ArticleItemPrefixLabel/index.tsx b/src/components/ArticleItemPrefixLabel/index.tsx

 import { FC, memo } from 'react'

 import type { TAccount } from '@/spec'
 import { buildLog } from '@/utils'
 import { PinIcon } from './styles'
 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)
diff --git a/src/components/ArticlesFilter/DesktopView.tsx b/src/components/ArticlesFilter/DesktopView.tsx
 */

 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'
 importSelectedTags from './SelectedTags'
 importSelectedFilters 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)
diff --git a/src/components/ArticlesFilter/FilterButton.tsx b/src/components/ArticlesFilter/FilterButton.tsx

 import type { TThread, TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { useAccount } from '@/hooks'

 import Tooltip from '@/components/Tooltip'


 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
diff --git a/src/components/ArticlesFilter/FilterResult.tsx b/src/components/ArticlesFilter/FilterResult.tsx
 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>
  )
diff --git a/...omponents/ArticlesFilter/SelectedTags.tsx → ...onents/ArticlesFilter/SelectedFilters.tsx b/...omponents/ArticlesFilter/SelectedTags.tsx → ...onents/ArticlesFilter/SelectedFilters.tsx
 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: '今天',
  activeFilter: TArticleFilter
 }

 constSelectedTags: FC<TProps> = ({ activeFilter, onSelect }) => (
 constSelectedFilters: FC<TProps> = ({ activeFilter, onSelect }) => (
  <Wrapper>
    {keys(activeFilter).map((filterKey) => (
      <FilterTag
  </Wrapper>
 )

 export default memo(SelectedTags)
 export default memo(SelectedFilters)
diff --git a/src/components/ArticlesFilter/index.tsx b/src/components/ArticlesFilter/index.tsx
 *
 */

 importReact from 'react'
 import{ Fragment, memo } from 'react'

 import { useDevice } from '@/hooks'
 import { buildLog } from '@/utils'
 const ArticlesFilter = (props) => {
  const { isMobile } = useDevice()

  return (
    <React.Fragment>{!isMobile && <DesktopView {...props} />}</React.Fragment>
  )
  return <Fragment>{!isMobile && <DesktopView {...props} />}</Fragment>
 }

 export defaultReact.memo(ArticlesFilter)
 export default memo(ArticlesFilter)
diff --git a/src/components/ArticlesFilter/styles/filter_result.ts b/src/components/ArticlesFilter/styles/filter_result.ts
 `
 export const ResultText = styled.div`
  color: ${theme('thread.filterResultHint')};
  margin-right: 3px;
 `
diff --git a/...ts/ArticlesFilter/styles/selected_tags.ts → ...ArticlesFilter/styles/selected_filters.ts b/...ts/ArticlesFilter/styles/selected_tags.ts → ...ArticlesFilter/styles/selected_filters.ts
diff --git a/src/components/Buttons/DropdownButton/index.tsx b/src/components/Buttons/DropdownButton/index.tsx
  MoreIcon,
 } from '../styles/dropdown_button'

 const log = buildLog('C:PostsThread')
 const log = buildLog('C:DropdownButton')

 export type TOption = {
  title: string
diff --git a/src/components/JobItem/index.js b/src/components/JobItem/index.js
      opacity={getOpacity(entry, active, accountInfo)}
      divider={contentDivider}
    >
      <ArticleItemPrefixLabel
        entry={entry}
        accountInfo={accountInfo}
        topOffset="9px"
      />
      <ArticleItemPrefixLabel entry={entry} topOffset="9px" />
      <DigestView
        entry={entry}
        onPreview={onPreview}
diff --git a/...s/LoadingEffects/ArticleContentLoading.js → ...ponents/Loading/ArticleContentLoading.tsx b/...s/LoadingEffects/ArticleContentLoading.js → ...ponents/Loading/ArticleContentLoading.tsx
 import React from 'react'
 import T from 'prop-types'
 import { Fragment, FC, memo } from 'react'
 import { range } from 'ramda'
 import styled, { useTheme } from 'styled-components'
 import ContentLoader from 'react-content-loader'
  </ContentLoader>
 )

 const ArticleContentLoading = ({ num }) => {
  const theme = useTheme()

  return range(0, num).map((item) => (
    <LoadingWrapper key={item}>
      <LoadingItem theme={theme} />
    </LoadingWrapper>
  ))
 type TProps = {
  num?: number
 }

 ArticleContentLoading.propTypes = {
  num: T.number,
 }
 const ArticleContentLoading: FC<TProps> = ({ num = 1 }) => {
  const theme = useTheme()

 ArticleContentLoading.defaultProps = {
  num: 1,
  return (
    <Fragment>
      {range(0, num).map((item) => (
        <LoadingWrapper key={item}>
          <LoadingItem theme={theme} />
        </LoadingWrapper>
      ))}
    </Fragment>
  )
 }

 export default ArticleContentLoading
 export defaultmemo(ArticleContentLoading)
diff --git a/...nents/LoadingEffects/CheatSheetLoading.js → src/components/Loading/CheatSheetLoading.tsx b/...nents/LoadingEffects/CheatSheetLoading.js → src/components/Loading/CheatSheetLoading.tsx
 import React from 'react'
 import T from 'prop-types'
 import { FC, memo } from 'react'
 import { range } from 'ramda'
 import ContentLoader from 'react-content-loader'
 import { useTheme } from 'styled-components'
 import { Wrapper, CheatsheetCard } from './styles'

 /* eslint-disable-next-line */
 const log = buildLog('c:LoadingEffects:index')
 const log = buildLog('c:Loading:index')

 const LoadingBlock = ({ theme }) => (
  <CheatsheetCard>
  </CheatsheetCard>
 )

 const CheatSheetLoading = ({ column }) => {
 type TProps = {
  column: number
 }

 const CheatSheetLoading: FC<TProps> = ({ column = 4 }) => {
  const theme = useTheme()

  return (
  )
 }

 CheatSheetLoading.propTypes = {
  column: T.number,
 }

 CheatSheetLoading.defaultProps = {
  column: 4,
 }

 export default CheatSheetLoading
 export default memo(CheatSheetLoading)
diff --git a/...mponents/LoadingEffects/CommentLoading.js → src/components/Loading/CommentLoading.tsx b/...mponents/LoadingEffects/CommentLoading.js → src/components/Loading/CommentLoading.tsx
 importReact from 'react'
 import{ FC, memo } from 'react'
 import styled, { useTheme } from 'styled-components'
 import ContentLoader from 'react-content-loader'

 import type { TThemeMap } from '@/spec'

 // Config-page: http://danilowoz.com/create-react-content-loader/
 const LoadingWrapper = styled.div`
  width: 100%;
  overflow: hidden;
 `

 const CommentLoading = () => {
  const theme = useTheme()
 const CommentLoading: FC = () => {
  const theme = useTheme() as TThemeMap

  return (
    <LoadingWrapper>
  )
 }

 export default CommentLoading
 export defaultmemo(CommentLoading)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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) {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'
Expand All		@@ -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)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'
		importSelectedTags from './SelectedTags'
		importSelectedFilters 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)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'

Expand All		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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>
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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: '今天',
Expand DownExpand Up		@@ -51,7 +51,7 @@ type TProps = {
		activeFilter: TArticleFilter
		}

		constSelectedTags: FC<TProps> = ({ activeFilter, onSelect }) => (
		constSelectedFilters: FC<TProps> = ({ activeFilter, onSelect }) => (
		<Wrapper>
		{keys(activeFilter).map((filterKey) => (
		<FilterTag
Expand All		@@ -64,4 +64,4 @@ const SelectedTags: FC<TProps> = ({ activeFilter, onSelect }) => (
		</Wrapper>
		)

		export default memo(SelectedTags)
		export default memo(SelectedFilters)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,7 @@
		*
		*/

		importReact from 'react'
		import{ Fragment, memo } from 'react'

		import { useDevice } from '@/hooks'
		import { buildLog } from '@/utils'
Expand All		@@ -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 defaultReact.memo(ArticlesFilter)
		export default memo(ArticlesFilter)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,5 +7,4 @@ export const Wrapper = styled.div`
		`
		export const ResultText = styled.div`
		color: ${theme('thread.filterResultHint')};
		margin-right: 3px;
		`
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,7 +16,7 @@ import {
		MoreIcon,
		} from '../styles/dropdown_button'

		const log = buildLog('C:PostsThread')
		const log = buildLog('C:DropdownButton')

		export type TOption = {
		title: string
Expand Down