refactor: move thread logic to sidebar (#1107)

* refactor(tagslist): add type & adjust text

* refactor(tagslist): types

* fix(tags): hashtag color not right

* style: taga, header, footer adjust

* chore: threadsidebar tags with adjust

* refactor(common-thread-logic): extract general logic

* refactor(common-thread-logic): clean up

* refactor(common-thread-logic): move route sync to drawer

* refactor(common-thread-logic): move resetViewing to drawer

* refactor(contentFilter): rename to ArticlesFilter

* refactor(articlesFilter): drop faq concept

* chore: missing type

Author: mydearxym

config/label_pool.ts

@@ -9,63 +9,6 @@ const LABEL_POOL = {
   city: {
     iconSrc: `${ICON_CMD}/city_map.svg`,
   },
-  salary: {
-    iconSrc: `${ICON_CMD}/money_yuan.svg`,
-    data: [
-      '2k以下',
-      '2k-5k',
-      '5k-10k',
-      '10k-15k',
-      '15k-25k',
-      '25k-50k',
-      '50k以上',
-    ],
-  },
-  exp: {
-    iconSrc: `${ICON_CMD}/footer_exp.svg`,
-    data: ['不限', '应届', '3年以下', '3-5年', '5-10年', '10年以上'],
-  },
-  education: {
-    iconSrc: `${ICON_CMD}/profile_education.svg`,
-    data: ['不限', '大专', '本科', '硕士', '博士'],
-  },
-  finance: {
-    data: [
-      '未融资',
-      '天使轮',
-      'A轮',
-      'B轮',
-      'C轮',
-      'D轮以上',
-      '已上市',
-      '不需融资',
-    ],
-    iconSrc: `${ICON_CMD}/stock2.svg`,
-  },
-  scale: {
-    iconSrc: `${ICON_CMD}/footer_scale.svg`,
-    data: [
-      '少于15人',
-      '15-50人',
-      '50-150人',
-      '150-500人',
-      '500-2000人',
-      '2000人以上',
-    ],
-  },
-  field: {
-    iconSrc: `${ICON_CMD}/footer_field.svg`,
-    data: [
-      '互联网',
-      '电子商务',
-      '金融',
-      '企业服务',
-      '教育',
-      '游戏',
-      'O2O',
-      '区块链',
-    ],
-  },
 }
 
 export default LABEL_POOL

server/routes.js

@@ -57,7 +57,7 @@ router.route('/recipes/:slug?').get((req, res) => {
   return renderAndCache({ req, res, path: '/recipes' })
 })
 
-// 活动
+// 小聚
 router.route('/meetups/:slug?').get((req, res) => {
   return renderAndCache({ req, res, path: '/meetups' })
 })

src/components/ArticlesFilter/DesktopView.tsx

@@ -0,0 +1,52 @@
+/*
+ *
+ * ArticlesFilter
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TThread, TAccount, TArticleFilter } from '@/spec'
+import { THREAD } from '@/constant'
+import { buildLog } from '@/utils'
+
+import FilterButton from './FilterButton'
+import SelectedTags from './SelectedTags'
+import FilterResult from './FilterResult'
+
+import { Wrapper, MainFilterWrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticlesFilter:index')
+
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+  thread: TThread
+  accountInfo: TAccount
+  totalCount?: number
+}
+
+const ArticlesFilter: FC<TProps> = ({
+  thread = THREAD.POST,
+  activeFilter = {},
+  onSelect,
+  accountInfo: { isLogin },
+  totalCount = 0,
+}) => (
+  <Wrapper>
+    <MainFilterWrapper>
+      <FilterButton
+        thread={thread}
+        onSelect={onSelect}
+        isLogin={isLogin}
+        activeFilter={activeFilter}
+      />
+
+      <SelectedTags onSelect={onSelect} activeFilter={activeFilter} />
+    </MainFilterWrapper>
+    <FilterResult totalCount={totalCount} />
+  </Wrapper>
+)
+
+export default memo(ArticlesFilter)

src/components/ContentFilter/FilterButton.js renamed to src/components/ArticlesFilter/FilterButton.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
+import { FC, memo } from 'react'
 import dynamic from 'next/dynamic'
 
+import type { TThread, TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 
 import Tooltip from '@/components/Tooltip'
@@ -18,7 +19,19 @@ const FilterPanel = dynamic(() => import('./FilterPanel/index'), {
   ssr: false,
 })
 
-const FilterButton = ({ thread, onSelect, isLogin, activeFilter }) => {
+type TProps = {
+  thread: TThread
+  isLogin: boolean
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+}
+
+const FilterButton: FC<TProps> = ({
+  thread,
+  onSelect,
+  isLogin,
+  activeFilter,
+}) => {
   return (
     <Wrapper>
       <Tooltip
@@ -38,7 +51,7 @@ const FilterButton = ({ thread, onSelect, isLogin, activeFilter }) => {
       >
         <ButtonWrapper size="small" type="primary" ghost>
           <InnerBtnWrapper>
-            综合排序
+            默认排序
             <FilterIcon src={`${ICON_CMD}/dropdown_arrow.svg`} />
           </InnerBtnWrapper>
         </ButtonWrapper>
@@ -47,4 +60,4 @@ const FilterButton = ({ thread, onSelect, isLogin, activeFilter }) => {
   )
 }
 
-export default React.memo(FilterButton)
+export default memo(FilterButton)

src/components/ContentFilter/FilterPanel/LengthFilter.js renamed to src/components/ArticlesFilter/FilterPanel/LengthFilter.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { FILTER } from '@/constant'
 
@@ -12,7 +13,12 @@ import {
   SelectItem,
 } from '../styles'
 
-const LengthFilter = ({ activeFilter, onSelect }) => (
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+}
+
+const LengthFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
   <ColumnWrapper>
     <SelectLabel>
       <SelectIcon src={`${ICON_CMD}/ruler.svg`} reverse />
@@ -34,4 +40,4 @@ const LengthFilter = ({ activeFilter, onSelect }) => (
   </ColumnWrapper>
 )
 
-export default React.memo(LengthFilter)
+export default memo(LengthFilter)

src/components/ContentFilter/FilterPanel/RepoSortFilter.js renamed to src/components/ArticlesFilter/FilterPanel/RepoSortFilter.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { FILTER } from '@/constant'
 
@@ -13,7 +14,12 @@ import {
   SelectItem,
 } from '../styles'
 
-const RepoSortFilter = ({ activeFilter, onSelect }) => (
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+}
+
+const RepoSortFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
   <ColumnWrapper>
     <SelectLabel>
       <SelectIcon src={`${ICON_CMD}/click.svg`} />
@@ -64,4 +70,4 @@ const RepoSortFilter = ({ activeFilter, onSelect }) => (
   </ColumnWrapper>
 )
 
-export default React.memo(RepoSortFilter)
+export default memo(RepoSortFilter)

src/components/ContentFilter/FilterPanel/SortFilter.js renamed to src/components/ArticlesFilter/FilterPanel/SortFilter.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { FILTER } from '@/constant'
 
@@ -12,7 +13,12 @@ import {
   SelectItem,
 } from '../styles'
 
-const SortFilter = ({ activeFilter, onSelect }) => (
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+}
+
+const SortFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
   <ColumnWrapper>
     <SelectLabel>
       <SelectIcon src={`${ICON_CMD}/click.svg`} />
@@ -47,4 +53,4 @@ const SortFilter = ({ activeFilter, onSelect }) => (
   </ColumnWrapper>
 )
 
-export default React.memo(SortFilter)
+export default memo(SortFilter)

src/components/ContentFilter/FilterPanel/TimeFilter.js renamed to src/components/ArticlesFilter/FilterPanel/TimeFilter.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { FILTER } from '@/constant'
 
@@ -12,7 +13,12 @@ import {
   SelectItem,
 } from '../styles'
 
-const TimeFilter = ({ activeFilter, onSelect }) => (
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+}
+
+const TimeFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
   <ColumnWrapper>
     <SelectLabel>
       <SelectIcon src={`${ICON_CMD}/duration.svg`} />
@@ -46,4 +52,4 @@ const TimeFilter = ({ activeFilter, onSelect }) => (
   </ColumnWrapper>
 )
 
-export default React.memo(TimeFilter)
+export default memo(TimeFilter)

src/components/ContentFilter/FilterPanel/ViewedFilter.js renamed to src/components/ArticlesFilter/FilterPanel/ViewedFilter.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { FILTER } from '@/constant'
 
@@ -12,7 +13,12 @@ import {
   SelectItem,
 } from '../styles'
 
-const ViewedFilter = ({ activeFilter, onSelect }) => (
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+}
+
+const ViewedFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
   <ColumnWrapper>
     <SelectLabel>
       <SelectIcon src={`${ICON_CMD}/user_been_views.svg`} />
@@ -44,4 +50,4 @@ const ViewedFilter = ({ activeFilter, onSelect }) => (
   </ColumnWrapper>
 )
 
-export default React.memo(ViewedFilter)
+export default memo(ViewedFilter)

src/components/ContentFilter/FilterPanel/index.js renamed to src/components/ArticlesFilter/FilterPanel/index.tsx

@@ -1,23 +1,29 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TThread, TArticleFilter } from '@/spec'
 import { THREAD } from '@/constant'
 
 import TimeFilter from './TimeFilter'
 import SortFilter from './SortFilter'
 import RepoSortFilter from './RepoSortFilter'
 import LengthFilter from './LengthFilter'
 import ViewedFilter from './ViewedFilter'
-// job
-import JobSalaryFilter from './JobSalaryFilter'
-import JobExpFilter from './JobExpFilter'
-import JobEducationFilter from './JobEducationFilter'
-import JobFieldFilter from './JobFieldFilter'
-import JobFinanceFilter from './JobFinanceFilter'
-import JobScaleFilter from './JobScaleFilter'
 
 import { FilterPanelWrapper } from '../styles'
 
-const FilterPanel = ({ thread, activeFilter, onSelect, isLogin }) => {
+type TProps = {
+  activeFilter: TArticleFilter
+  onSelect: (filter: TArticleFilter) => void
+  thread: TThread
+  isLogin?: boolean
+}
+
+const FilterPanel: FC<TProps> = ({
+  thread,
+  activeFilter,
+  onSelect,
+  isLogin,
+}) => {
   switch (thread) {
     case THREAD.POST:
       return (
@@ -47,12 +53,6 @@ const FilterPanel = ({ thread, activeFilter, onSelect, isLogin }) => {
         <FilterPanelWrapper>
           <TimeFilter activeFilter={activeFilter} onSelect={onSelect} />
           <SortFilter activeFilter={activeFilter} onSelect={onSelect} />
-          <JobSalaryFilter activeFilter={activeFilter} onSelect={onSelect} />
-          <JobExpFilter activeFilter={activeFilter} onSelect={onSelect} />
-          <JobEducationFilter activeFilter={activeFilter} onSelect={onSelect} />
-          <JobFieldFilter activeFilter={activeFilter} onSelect={onSelect} />
-          <JobFinanceFilter activeFilter={activeFilter} onSelect={onSelect} />
-          <JobScaleFilter activeFilter={activeFilter} onSelect={onSelect} />
           {isLogin && (
             <ViewedFilter activeFilter={activeFilter} onSelect={onSelect} />
           )}
@@ -70,4 +70,4 @@ const FilterPanel = ({ thread, activeFilter, onSelect, isLogin }) => {
   }
 }
 
-export default React.memo(FilterPanel)
+export default memo(FilterPanel)