refactor(filter): sort filter

src/spec/article.d.ts

@@ -213,6 +213,7 @@ export type TArticleState =
   | TArticleCatReject
 
 export type TArticleCat = 'ALL' | 'BUG' | 'FEATURE' | 'QUESTION' | 'OTHER'
+export type TArticleSort = 'ALL' | 'PUBLISH' | 'UPVOTE' | 'COMMENT' | 'VIEWS'
 
 export type TArticlePubSelector = {
   cat?: TArticleCat | null

src/spec/index.ts

@@ -148,6 +148,7 @@ export type {
   TArticleState,
   TFAQSection,
   TArticleTitle,
+  TArticleSort,
 } from './article'
 
 export type {

src/spec/menu.d.ts

@@ -9,6 +9,11 @@ export type TMenu =
   | 'ARROW_TO_BOTTOM'
   | 'SETTING'
   | 'DELETE'
+  // sort
+  | 'PUBLISH'
+  | 'UPVOTE'
+  | 'COMMENT'
+  | 'VIEWS'
   // commont
   | 'TODO'
   | 'WIP'

src/spec/utils.d.ts

@@ -231,4 +231,4 @@ export type TUploadPreview = {
   radius: number
 }
 
-export type TConditionMode = 'state' | 'cat' | 'article' | 'tag'
+export type TConditionMode = 'state' | 'cat' | 'sort' | 'tag'

src/widgets/ArticlesFilter/DesktopView.tsx

@@ -4,15 +4,16 @@
  *
  */
 
-import { FC, Fragment, useState } from 'react'
+import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import dynamic from 'next/dynamic'
 
-import type { TArticleCat, TArticleState } from '@/spec'
+import type { TArticleCat, TArticleSort, TArticleState } from '@/spec'
 import { PUBLISH_MODE } from '@/constant/publish'
 import { CONDITION_MODE } from '@/constant/mode'
 
 import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd'
+import { ARTICLE_SORT } from '@/constant/sort'
 import TYPE from '@/constant/type'
 import { BANNER_LAYOUT } from '@/constant/layout'
 import useBannerLayout from '@/hooks/useBannerLayout'
@@ -24,10 +25,6 @@ import PublishButton from '@/widgets/Buttons/PublishButton'
 import ConditionSelector from '@/widgets/ConditionSelector'
 import SearchBox from '@/widgets/SearchBox'
 
-import SortFilter from './SortFilter'
-// import SelectedFilters from './SelectedFilters'
-// import FilterResult from './FilterResult'
-
 import type { TProps } from '.'
 import { Wrapper } from './styles'
 
@@ -46,34 +43,34 @@ const ArticlesFilter: FC<TProps> = ({
 }) => {
   const bannerLayout = useBannerLayout()
   const [activeCat, setActiveCat] = useState<TArticleCat>(ARTICLE_CAT.ALL)
+  const [activeSort, setActiveSort] = useState<TArticleSort>(ARTICLE_SORT.ALL)
   const [activeState, setActiveState] = useState<TArticleState>(ARTICLE_STATE.ALL)
 
-  const searchMode = false
-
   return (
     <Wrapper>
-      {!searchMode && (
-        <Fragment>
-          <SortFilter onSelect={onSelect} activeFilter={activeFilter} />
-          <ConditionSelector
-            mode={CONDITION_MODE.CAT}
-            active={activeCat}
-            onSelect={(cat: TArticleCat) => setActiveCat(cat)}
-            selected={activeCat !== ARTICLE_CAT.ALL}
-          />
-          <ConditionSelector
-            mode={CONDITION_MODE.STATE}
-            active={activeState}
-            onSelect={(state: TArticleState) => setActiveState(state)}
-            selected={activeState !== ARTICLE_STATE.ALL}
-          />
-          <Space right={10} />
-          <SpaceGrow />
-          <DesktopOnly>
-            {resState === TYPE.RES_STATE.LOADING && <LavaLampLoading right={28} left={10} />}
-          </DesktopOnly>
-        </Fragment>
-      )}
+      <ConditionSelector
+        mode={CONDITION_MODE.SORT}
+        active={activeSort}
+        onSelect={(sort: TArticleSort) => setActiveSort(sort)}
+        selected={activeSort !== ARTICLE_SORT.ALL}
+      />
+      <ConditionSelector
+        mode={CONDITION_MODE.CAT}
+        active={activeCat}
+        onSelect={(cat: TArticleCat) => setActiveCat(cat)}
+        selected={activeCat !== ARTICLE_CAT.ALL}
+      />
+      <ConditionSelector
+        mode={CONDITION_MODE.STATE}
+        active={activeState}
+        onSelect={(state: TArticleState) => setActiveState(state)}
+        selected={activeState !== ARTICLE_STATE.ALL}
+      />
+      <Space right={10} />
+      <SpaceGrow />
+      <DesktopOnly>
+        {resState === TYPE.RES_STATE.LOADING && <LavaLampLoading right={28} left={10} />}
+      </DesktopOnly>
       {bannerLayout === BANNER_LAYOUT.SIDEBAR && <SearchBox right={8} />}
       {bannerLayout === BANNER_LAYOUT.SIDEBAR && (
         <PublishButton

src/widgets/ArticlesFilter/MobileView.tsx

@@ -17,13 +17,8 @@ import { buildLog } from '@/logger'
 import { SpaceGrow } from '@/widgets/Common'
 
 import ConditionSelector from '@/widgets/ConditionSelector'
-import TagSelector from '@/widgets/TagSelector'
 import SearchBox from '@/widgets/SearchBox'
 
-import SortFilter from './SortFilter'
-// import SelectedFilters from './SelectedFilters'
-// import FilterResult from './FilterResult'
-
 import type { TProps } from '.'
 import { Wrapper } from './styles/mobile_view'
 
@@ -48,8 +43,6 @@ const ArticlesFilter: FC<TProps> = ({
     <Wrapper>
       {!searchMode && (
         <Fragment>
-          <SortFilter onSelect={onSelect} activeFilter={activeFilter} />
-          <TagSelector groupedTags={groupedTags} activeTag={activeTag} mode="mobile" />
           <ConditionSelector
             mode={CONDITION_MODE.CAT}
             selected={false}

src/widgets/ArticlesFilter/ModelineView.tsx

@@ -14,9 +14,7 @@ import TYPE from '@/constant/type'
 import { buildLog } from '@/logger'
 
 import { Space } from '@/widgets/Common'
-import TagSelector from '@/widgets/TagSelector'
 
-import SortFilter from './SortFilter'
 // import SelectedFilters from './SelectedFilters'
 // import FilterResult from './FilterResult'
 
@@ -39,9 +37,7 @@ const ArticlesFilter: FC<TProps> = ({
 
   return (
     <ModelineWrapper>
-      <TagSelector groupedTags={groupedTags} activeTag={activeTag} mode="modeline" />
       <Space right={6} />
-      <SortFilter onSelect={onSelect} activeFilter={activeFilter} placement="top-start" />
 
       {/* <SearchBox searchMode={searchMode} onSearch={onSearch} closeSearch={closeSearch} /> */}
     </ModelineWrapper>

src/widgets/ArticlesFilter/styles/index.ts

@@ -9,7 +9,8 @@ import Input from '@/widgets/Input'
 export const Wrapper = styled.div`
   ${css.row('align-center')};
   width: 100%;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
+  margin-left: -10px;
 
   ${css.media.mobile`
     display: none;

src/widgets/ConditionSelector/helper.ts

@@ -2,7 +2,7 @@ import { find } from 'ramda'
 
 import type { TConditionMode } from '@/spec'
 import { CONDITION_MODE } from '@/constant/mode'
-import { POST_STATE_MENU_ITEMS, POST_CAT_MENU_ITEMS } from '@/constant/menu'
+import { POST_STATE_MENU_ITEMS, POST_CAT_MENU_ITEMS, POST_SORT_MENU_ITEMS } from '@/constant/menu'
 
 import type { TMenuItem, TActiveCondition } from './spec'
 
@@ -16,6 +16,10 @@ export const getMenuItems = (mode: TConditionMode): TMenuItem[] => {
       return POST_CAT_MENU_ITEMS
     }
 
+    case CONDITION_MODE.SORT: {
+      return POST_SORT_MENU_ITEMS
+    }
+
     default: {
       return []
     }
@@ -36,6 +40,10 @@ export const getTitle = (mode: TConditionMode): string => {
       return '类别'
     }
 
+    case CONDITION_MODE.SORT: {
+      return '排序'
+    }
+
     default: {
       return '??'
     }

src/widgets/ConditionSelector/index.tsx

@@ -10,7 +10,7 @@ import ActiveLabel from './ActiveLabel'
 
 import type { TActiveCondition } from './spec'
 import { getMenuItems, getTitle, getActiveMenuItem } from './helper'
-import { FilterWrapper } from './styles'
+import { Wrapper } from './styles'
 
 type TProps = {
   mode: TConditionMode
@@ -34,7 +34,6 @@ const ConditionSelector: FC<TProps> = ({
   const [menuOpen, setMenuOpen] = useState(false)
   const ref = useRef(null)
 
-  const Wrapper = FilterWrapper
   const popWidth = 120
 
   const menuItems = getMenuItems(mode)
@@ -45,7 +44,7 @@ const ConditionSelector: FC<TProps> = ({
   const title = getTitle(mode)
 
   return (
-    <Wrapper $selected={selected} $menuOpen={menuOpen} {...restProps} ref={ref}>
+    <Wrapper ref={ref} $selected={selected} $menuOpen={menuOpen} {...restProps}>
       {!selected ? (
         <Menu
           offset={offset as [number, number]}

src/widgets/ConditionSelector/spec.d.ts

@@ -1,6 +1,6 @@
-import type { TArticleState, TArticleCat, TMenu } from '@/spec'
+import type { TArticleState, TArticleCat, TMenu, TArticleSort } from '@/spec'
 
-export type TActiveCondition = TArticleState | TArticleCat | 'ALL'
+export type TActiveCondition = TArticleState | TArticleCat | TArticleSort | 'ALL'
 
 export type TMenuItem = {
   key: string

src/widgets/ConditionSelector/styles/active_label.ts

@@ -14,6 +14,7 @@ export const Hint = styled.div`
 export const LabelWrapper = styled.div`
   ${css.row('align-center')};
   padding: 5px 6px;
+  padding-right: 8px;
   border-radius: 8px;
   background: ${theme('hoverActive')};
   margin-left: 3px;

src/widgets/ConditionSelector/styles/index.ts

@@ -5,7 +5,7 @@ import css, { theme } from '@/css'
 import { WithMargin } from '@/widgets/Common'
 
 type TWrapper = { $menuOpen?: boolean; $selected?: boolean }
-export const FilterWrapper = styled(WithMargin)<TWrapper>`
+export const Wrapper = styled(WithMargin)<TWrapper>`
   ${css.row('align-center')};
   color: ${theme('article.digest')};
   font-size: 13px;
@@ -23,23 +23,6 @@ export const FilterWrapper = styled(WithMargin)<TWrapper>`
     background: ${theme('hoverBg')};
   }
 `
-export const FullWrapper = styled(FilterWrapper)<TWrapper>`
-  border: 1px solid;
-  border-color: ${({ $menuOpen }) =>
-    $menuOpen ? theme('article.digest') : theme('button.ghostBorder')};
-
-  padding: 0 5px;
-  padding-left: 15px;
-  border-radius: 10px;
-
-  &:hover {
-    border-color: ${theme('article.digest')};
-    cursor: pointer;
-  }
-
-  transition: all 0.2s;
-`
-
 export const SelectItem = styled.div<TActive>`
   ${css.row('align-start')};
   padding: 4px 8px;