refactor: parse menu/filter tags

server/routes.js

@@ -62,7 +62,7 @@ router.route('/meetups/:slug?').get((req, res) => {
   return renderAndCache({ req, res, path: '/meetups' })
 })
 
-// 酷导游
+// 酷导航
 router.route('/cool-guide/:slug?').get((req, res) => {
   return renderAndCache({ req, res, path: '/cool-guide' })
 })

src/components/BuyMeChuanChuan/ChuanSelector.tsx

@@ -24,8 +24,12 @@ const ChuanSelector: FC<TProps> = ({ active, onSelect }) => {
       <Selectors>
         <By>x</By>
         {options.map((item) => (
-          <Circle key={item} active={item === 1} onClick={() => onSelect(item)}>
-            1
+          <Circle
+            key={item}
+            active={item === active}
+            onClick={() => onSelect(item)}
+          >
+            {item}
           </Circle>
         ))}
       </Selectors>

src/components/FiltersMenu/Filter/ExpandTag.tsx

@@ -0,0 +1,45 @@
+import { FC, memo } from 'react'
+
+import type { TTag } from '@/spec'
+import type { TProps as TFilter } from './index'
+import { Wrapper, Dot, Title } from '../styles/filter/tag'
+
+const isActive = (activeMap, expandMenuId, itemId) => {
+  if (expandMenuId === null) return false
+  return activeMap[expandMenuId].id === itemId
+}
+
+type TProps = Pick<
+  TFilter,
+  'expandMenuId' | 'onSelect' | 'revert' | 'activeMap'
+> & { tag: TTag }
+
+const ExpandTag: FC<TProps> = ({
+  tag,
+  expandMenuId,
+  activeMap,
+  onSelect,
+  revert,
+}) => {
+  return (
+    <Wrapper onClick={() => onSelect(expandMenuId, tag)}>
+      {!revert ? (
+        <>
+          <Dot active={isActive(activeMap, expandMenuId, tag.id)} />
+          <Title active={isActive(activeMap, expandMenuId, tag.id)}>
+            {tag.title}
+          </Title>
+        </>
+      ) : (
+        <>
+          <Title active={isActive(activeMap, expandMenuId, tag.id)} revert>
+            {tag.title}
+          </Title>
+          <Dot active={isActive(activeMap, expandMenuId, tag.id)} />
+        </>
+      )}
+    </Wrapper>
+  )
+}
+
+export default memo(ExpandTag)

src/components/FiltersMenu/Filter/SelectedTag.tsx

@@ -0,0 +1,34 @@
+import { FC, memo } from 'react'
+
+import type { TTag } from '@/spec'
+
+import type { TProps as TFilter } from './index'
+import { Wrapper, FoldDot, Title } from '../styles/filter/tag'
+
+type TProps = Pick<TFilter, 'expandMenuId' | 'onSelect' | 'revert'> & {
+  tag: TTag
+}
+
+const SelectedTag: FC<TProps> = ({ tag, expandMenuId, onSelect, revert }) => {
+  return (
+    <Wrapper onClick={() => onSelect(expandMenuId, tag)}>
+      {!revert ? (
+        <>
+          <FoldDot active={tag.title !== '全部'} />
+          <Title active={tag.title !== '全部'}>
+            {tag ? tag.title || '全部' : '全部'}
+          </Title>
+        </>
+      ) : (
+        <>
+          <Title active={tag.title !== '全部'} revert>
+            {tag ? tag.title || '全部' : '全部'}
+          </Title>
+          <FoldDot active={tag.title !== '全部'} />
+        </>
+      )}
+    </Wrapper>
+  )
+}
+
+export default memo(SelectedTag)

src/components/FiltersMenu/Filter/index.tsx

@@ -4,106 +4,61 @@
  *
  */
 
-import { memo } from 'react'
-import T from 'prop-types'
+import { FC, memo } from 'react'
 
-import {
-  Wrapper,
-  Item,
-  RadioWrapper,
-  RadioItem,
-  ActiveDot,
-  RadioTitle,
-} from '../styles/filter'
+import type { TID, TTag } from '@/spec'
 
-const isActive = (activeMap, expandMenuId, itemId) => {
-  if (!expandMenuId) return false
-  return activeMap[expandMenuId].id === itemId
+import ExpandTag from './ExpandTag'
+import SelectedTag from './SelectedTag'
+
+import { Wrapper, Item, TagsWrapper } from '../styles/filter'
+
+export type TProps = {
+  id: TID
+  expandMenuId: TID | null
+  activeMap: Record<string, TTag>
+  options: TTag[]
+  revert: boolean
+  onSelect: (expandMenuId: TID, tag: TTag) => void
 }
 
-const Filter = ({ id, expandMenuId, activeMap, options, onSelect, revert }) => {
+const Filter: FC<TProps> = ({
+  id,
+  expandMenuId = null,
+  activeMap,
+  options,
+  onSelect,
+  revert,
+}) => {
   return (
     <Wrapper revert={revert}>
       <Item revert={revert}>
         {expandMenuId === id && options ? (
-          <RadioWrapper revert={revert}>
+          <TagsWrapper revert={revert}>
             {options.map((item) => (
-              <RadioItem
+              <ExpandTag
                 key={item.id}
-                onClick={() => onSelect(expandMenuId, item)}
-              >
-                {!revert ? (
-                  <>
-                    <ActiveDot
-                      active={isActive(activeMap, expandMenuId, item.id)}
-                    />
-                    <RadioTitle
-                      active={isActive(activeMap, expandMenuId, item.id)}
-                    >
-                      {item.title}
-                    </RadioTitle>
-                  </>
-                ) : (
-                  <>
-                    <RadioTitle
-                      active={isActive(activeMap, expandMenuId, item.id)}
-                      revert
-                    >
-                      {item.title}
-                    </RadioTitle>
-                    <ActiveDot
-                      active={isActive(activeMap, expandMenuId, item.id)}
-                    />
-                  </>
-                )}
-              </RadioItem>
+                tag={item}
+                activeMap={activeMap}
+                expandMenuId={expandMenuId}
+                revert={revert}
+                onSelect={onSelect}
+              />
             ))}
-          </RadioWrapper>
+          </TagsWrapper>
         ) : (
-          <RadioWrapper revert={revert}>
-            <RadioItem>
-              {!revert ? (
-                <>
-                  <ActiveDot active />
-                  <RadioTitle active>
-                    {activeMap[id] ? activeMap[id].title || '全部' : '全部'}
-                  </RadioTitle>
-                </>
-              ) : (
-                <>
-                  <RadioTitle active revert>
-                    {activeMap[id] ? activeMap[id].title || '全部' : '全部'}
-                  </RadioTitle>
-                  <ActiveDot active />
-                </>
-              )}
-            </RadioItem>
-          </RadioWrapper>
+          <TagsWrapper revert={revert}>
+            <SelectedTag
+              tag={activeMap[id]}
+              expandMenuId={expandMenuId}
+              revert={revert}
+              onSelect={onSelect}
+            />
+          </TagsWrapper>
         )}
       </Item>
     </Wrapper>
   )
 }
 
-Filter.propTypes = {
-  id: T.string.isRequired,
-  expandMenuId: T.oneOfType([T.string, T.instanceOf(null)]),
-  activeMap: T.shape({
-    id: T.string,
-    title: T.string,
-  }).isRequired,
-  options: T.arrayOf(
-    T.shape({
-      id: T.string,
-      title: T.string,
-    }),
-  ).isRequired,
-  revert: T.bool.isRequired,
-  onSelect: T.func.isRequired,
-}
-
-Filter.defaultProps = {
-  expandMenuId: null,
-}
-
 export default memo(Filter)

src/components/FiltersMenu/Header.tsx

@@ -2,26 +2,25 @@ import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
 import Tooltip from '@/components/Tooltip'
+import { SpaceGrow } from '@/components/Common'
 
 import {
   Wrapper,
-  Title,
   OperatorsWrapper,
   Operator,
   ResetIcon,
   HelpHint,
 } from './styles/header'
 
 type TProps = {
-  title: string
   showReset: boolean
   onReset: () => void
 }
 
-const Header: FC<TProps> = ({ title, showReset, onReset }) => {
+const Header: FC<TProps> = ({ showReset, onReset }) => {
   return (
     <Wrapper>
-      <Title active={showReset}>{title}</Title>
+      <SpaceGrow />
       <OperatorsWrapper>
         <Tooltip
           content={<HelpHint>重置筛选条件</HelpHint>}
@@ -30,6 +29,7 @@ const Header: FC<TProps> = ({ title, showReset, onReset }) => {
         >
           <Operator show={showReset} onClick={onReset}>
             <ResetIcon src={`${ICON}/shape/reset.svg`} />
+            重置
           </Operator>
         </Tooltip>
       </OperatorsWrapper>

src/components/FiltersMenu/helper.ts

@@ -0,0 +1,52 @@
+import { keys, isEmpty, filter } from 'ramda'
+
+import type { TTag } from '@/spec'
+import { ICON_CMD } from '@/config'
+import { groupByKey } from '@/utils/helper'
+
+import type { TMenu } from './spec'
+
+export const tags2Options = (tags: TTag[]): TMenu => {
+  const groupedTags = groupByKey(tags, 'group')
+  const formated = []
+
+  keys(groupedTags).forEach((group, index) => {
+    formated.push({
+      id: index,
+      title: group,
+      icon: `${ICON_CMD}/navi/location.svg`,
+      options: [{ id: '', title: '全部' }, ...groupedTags[group]],
+    })
+  })
+
+  return formated
+}
+
+export const initActiveMap = (items: TMenu) => {
+  const menuMap = {}
+  for (let index = 0; index < items.length; index += 1) {
+    const element = items[index]
+
+    const content = element.options ? element.options[0] : element
+    menuMap[element.id] = { ...content }
+  }
+
+  return menuMap
+}
+
+export const getSelectedTags = (activeMap: Record<string, TTag>): TTag[] => {
+  const tagList = []
+
+  const selectedIdx = filter(
+    (key) => !isEmpty(activeMap[key].id),
+    keys(activeMap),
+  )
+
+  selectedIdx.forEach((idx) => {
+    if (activeMap[idx]) {
+      tagList.push(activeMap[idx])
+    }
+  })
+
+  return tagList
+}