refactor(jobs-thread): rethink on tags (#1034)

* refactor(meetups): convert to ts && fix warnings

* refactor(meetups): convert more js to ts

* refactor(filtersMenu): covert to ts && fix warnings

* refactor(jobs): use MenuFilters instead of tags

Author: mydearxym

src/components/FiltersMenu/Filter/index.js renamed to src/components/FiltersMenu/Filter/index.tsx

@@ -60,7 +60,7 @@ const Filter = ({ id, expandMenuId, activeMap, options, onSelect, revert }) => {
             ))}
           </RadioWrapper>
         ) : (
-          <RadioWrapper value="">
+          <RadioWrapper revert={revert}>
             <RadioItem>
               {!revert ? (
                 <>

src/components/FiltersMenu/Header.js renamed to src/components/FiltersMenu/Header.tsx

@@ -12,17 +12,24 @@ import {
   HelpHint,
 } from './styles/header'
 
-const Header = ({ title, showReset, reset }) => {
+type TProps = {
+  title: string
+  showReset: boolean
+  onReset: () => void
+}
+
+const Header: React.FC<TProps> = ({ title, showReset, onReset }) => {
   return (
     <Wrapper>
       <Title active={showReset}>{title}</Title>
       <OperatorsWrapper>
+        {/* @ts-ignore */}
         <Tooltip
           content={<HelpHint>重置筛选条件</HelpHint>}
           placement="bottom"
           delay={1000}
         >
-          <Operator show={showReset} onClick={reset}>
+          <Operator show={showReset} onClick={onReset}>
             <ResetIcon src={`${ICON}/shape/reset.svg`} />
           </Operator>
         </Tooltip>

src/components/FiltersMenu/index.js renamed to src/components/FiltersMenu/index.tsx

@@ -5,9 +5,9 @@
  */
 
 import React, { useState, useCallback } from 'react'
-import T from 'prop-types'
 import { merge, equals } from 'ramda'
 
+import type { TFiltersMenuItems } from '@/spec'
 import { buildLog } from '@/utils'
 
 import { SpaceGrow } from '@/components/Common'
@@ -31,15 +31,26 @@ const initActiveMap = (items) => {
   return menuMap
 }
 
-const FiltersMenu = ({
-  title,
+type TProps = {
+  title?: string
+  items?: TFiltersMenuItems
+  activeid?: string | null
+  noFilter?: boolean
+  onItemClick?: () => void
+  itemBgHighlight?: boolean
+  revert?: boolean
+  withDivider?: boolean
+}
+
+const FiltersMenu: React.FC<TProps> = ({
+  title = '',
   items,
-  activeid,
-  noFilter,
-  onItemClick,
-  itemBgHighlight,
-  revert,
-  withDivider,
+  activeid = null,
+  noFilter = false,
+  onItemClick = log,
+  itemBgHighlight = true,
+  revert = false,
+  withDivider = true,
 }) => {
   // const [expandMenuId, setExpandMenuId] = useState(null)
   const [expandMenuId, setExpandMenuId] = useState(activeid)
@@ -54,7 +65,7 @@ const FiltersMenu = ({
       <Header
         title={title}
         showReset={!equals(initActiveMap(items), activeMap)}
-        reset={handleReset}
+        onReset={handleReset}
       />
       {items.map((item, index) => (
         <ItemWrapper
@@ -108,37 +119,4 @@ const FiltersMenu = ({
   )
 }
 
-FiltersMenu.propTypes = {
-  title: T.string,
-  items: T.arrayOf(
-    T.shape({
-      id: T.string,
-      title: T.string,
-      icon: T.string,
-      options: T.arrayOf(
-        T.shape({
-          id: T.string,
-          title: T.string,
-        }),
-      ),
-    }),
-  ).isRequired,
-  activeid: T.oneOfType([T.string, T.instanceOf(null)]),
-  noFilter: T.bool,
-  onItemClick: T.func,
-  itemBgHighlight: T.bool,
-  revert: T.bool,
-  withDivider: T.bool,
-}
-
-FiltersMenu.defaultProps = {
-  title: '',
-  activeid: null,
-  noFilter: false,
-  onItemClick: log,
-  itemBgHighlight: true,
-  revert: false,
-  withDivider: true,
-}
-
 export default React.memo(FiltersMenu)

src/components/FiltersMenu/styles/filter/index.ts

@@ -13,7 +13,8 @@ export const Wrapper = styled.div<{ revert: boolean }>`
   padding: 4px 6px;
   padding-top: 0;
 `
-export const RadioWrapper = styled.div<{ revert: boolean }>`
+type RadioWrapper = { revert?: boolean }
+export const RadioWrapper = styled.div<RadioWrapper>`
   ${css.flexColumn()};
   align-items: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')};
   margin-top: 5px;
@@ -38,7 +39,7 @@ export const ActiveDot = styled.div<TActive>`
   opacity: ${({ active }) => (active ? 1 : 0)};
   transition: opacity 0.25s;
 `
-type TRadioTitle = TActive & { revert: boolean }
+type TRadioTitle = TActive & { revert?: boolean }
 export const RadioTitle = styled.div<TRadioTitle>`
   font-size: 13px;
   color: ${({ active }) =>

src/components/FiltersMenu/styles/header.ts

@@ -1,12 +1,10 @@
 import styled from 'styled-components'
 
-import type { TTestable, TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const Wrapper = styled.div`
   ${css.flex('align-center', 'justify-between')}
   width: 100%;
   margin-bottom: 8px;

src/containers/content/MeetupsContent/ActivityCard.js renamed to src/containers/content/MeetupsContent/ActivityCard.tsx

@@ -19,7 +19,19 @@ import {
   FinishedHole,
 } from './styles/activity_card'
 
-const ActivityCard = ({ item }) => {
+type TProps = {
+  item: {
+    id?: number
+    date: string
+    week: string
+    title: string
+    company: string
+    finished?: boolean
+    type?: string
+  }
+}
+
+const ActivityCard: React.FC<TProps> = ({ item }) => {
   return (
     <Wrapper finished={item.finished}>
       <DatetimeWrapper>

src/containers/content/MeetupsContent/Card/Date.js renamed to src/containers/content/MeetupsContent/Card/Date.tsx

@@ -1,23 +1,18 @@
 import React from 'react'
-import T from 'prop-types'
 
-import { GALLERY } from '@/constant'
+import type { TProps as TParentProps } from './index'
 import { Wrapper, Divider, WeekName, DateNum } from '../styles/card/date'
 
-const Date = ({ type }) => {
+type TProps = Omit<TParentProps, 'item'>
+
+const Date: React.FC<TProps> = ({ type }) => {
   return (
     <Wrapper type={type}>
       <WeekName>周五</WeekName>
       <Divider type={type} />
-      <DateNum>18&nbsp;/&nbsp;04</DateNum>
+      <DateNum size="small">18&nbsp;/&nbsp;04</DateNum>
     </Wrapper>
   )
 }
 
-Date.propTypes = {
-  type: T.oneOf([GALLERY.TEXT_ONLY, GALLERY.TEXT_WITH_IMAGE]).isRequired,
-}
-
-Date.defaultProps = {}
-
 export default React.memo(Date)

src/containers/content/MeetupsContent/Card/TextCard.js renamed to src/containers/content/MeetupsContent/Card/TextCard.tsx

@@ -6,6 +6,7 @@ import { ICON_CMD } from '@/config'
 import DotDivider from '@/components/DotDivider'
 import { Br } from '@/components/Common'
 
+import type { TProps as TParentProps } from './index'
 import Date from './Date'
 
 import {
@@ -19,7 +20,9 @@ import {
   Icon,
 } from '../styles/card/text_card'
 
-const Card = ({ item }) => {
+type TProps = Omit<TParentProps, 'type'>
+
+const TextCard: React.FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <Date type={GALLERY.TEXT_ONLY} />
@@ -46,4 +49,4 @@ const Card = ({ item }) => {
   )
 }
 
-export default React.memo(Card)
+export default React.memo(TextCard)

src/containers/content/MeetupsContent/Card/TextWithImgCard.js renamed to src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx

@@ -4,6 +4,7 @@ import { GALLERY } from '@/constant'
 import { ICON_CMD, ASSETS_ENDPOINT } from '@/config'
 import DotDivider from '@/components/DotDivider'
 
+import type { TProps as TParentProps } from './index'
 import Date from './Date'
 
 import {
@@ -21,7 +22,9 @@ import {
   Icon,
 } from '../styles/card/text_with_img_card'
 
-const Card = ({ item }) => {
+type TProps = Omit<TParentProps, 'type'>
+
+const TextWithImageCard: React.FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <ContentsWrapper>
@@ -54,4 +57,4 @@ const Card = ({ item }) => {
   )
 }
 
-export default React.memo(Card)
+export default React.memo(TextWithImageCard)