chore(user): cover user & tabs to ts (#1086)

* chore(user): cover user & tabs to ts

* fix(server-schame): pin -> isPinned change

Author: mydearxym

src/components/ArticleItemPrefixLabel/ReadLabel.js renamed to src/components/ArticleItemPrefixLabel/ReadLabel.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ReadedLabel } from './styles'
 
-const ReadLabel = ({ entry, accountInfo, topOffset }) => {
+import type { TProps } from './index'
+
+const ReadLabel: FC<TProps> = ({ entry, accountInfo, topOffset = '20px' }) => {
   const { viewerHasViewed } = entry
   const {
     isLogin,

src/components/ArticleItemPrefixLabel/index.js

@@ -0,0 +1,37 @@
+/*
+ *
+ * ArticleItemPrefixLabel
+ *
+ */
+
+import React, { FC } from 'react'
+
+import type { TAccount } from '@/spec'
+import { buildLog } from '@/utils'
+import { PinIcon } from './styles'
+import ReadLabel from './ReadLabel'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleItemPrefixLabel:index')
+
+export type TProps = {
+  accountInfo: TAccount
+  topOffset?: string
+  entry: {
+    viewerHasViewed?: boolean
+    isPinned?: boolean
+  }
+}
+const ArticleItemPrefixLabel: FC<TProps> = ({
+  entry,
+  accountInfo,
+  topOffset = '22px',
+}) => {
+  if (entry.isPinned) return <PinIcon top={topOffset} />
+
+  return (
+    <ReadLabel entry={entry} accountInfo={accountInfo} topOffset={topOffset} />
+  )
+}
+
+export default React.memo(ArticleItemPrefixLabel)

src/components/ArticleItemPrefixLabel/index.tsx

@@ -4,9 +4,9 @@
  *
  */
 
-import React, { useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useRef, useState, useCallback } from 'react'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { buildLog, isString } from '@/utils'
 import { SIZE } from '@/constant'
 
@@ -20,12 +20,25 @@ const log = buildLog('c:Tabs:index')
 const temItems = [
   {
     title: '帖子',
-    // icon: `${ICON_CMD}/navi/fire.svg`,
+    raw: 'posts',
     localIcon: 'settings',
   },
 ]
 
-const Tabs = ({ size, onChange, items, activeKey }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const Tabs: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+}) => {
   const [tabWidthList, setTabWidthList] = useState([])
 
   const navRef = useRef(null)
@@ -69,29 +82,4 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
   )
 }
 
-Tabs.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-}
-
-Tabs.defaultProps = {
-  items: temItems,
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-}
-
 export default React.memo(Tabs)

src/components/Switcher/Tabs/CardView.js renamed to src/components/Switcher/Tabs/CardView.tsx

@@ -4,10 +4,10 @@
  *
  */
 
-import React, { useEffect, useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useEffect, useRef, useState, useCallback } from 'react'
 import { isEmpty, findIndex } from 'ramda'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { useDevice } from '@/hooks'
 import { SIZE } from '@/constant'
 import { buildLog, isString } from '@/utils'
@@ -23,6 +23,7 @@ const log = buildLog('c:Tabs:index')
 const temItems = [
   {
     title: '帖子',
+    raw: 'posts',
     // icon: `${ICON_CMD}/navi/fire.svg`,
     localIcon: 'settings',
   },
@@ -36,18 +37,33 @@ const temItems = [
  * @param {string} activeKey
  * @returns number
  */
-const getDefaultActiveTabIndex = (items, activeKey) => {
+const getDefaultActiveTabIndex = (
+  items: TTabItem[],
+  activeKey: string,
+): number => {
   if (isEmpty(activeKey)) return 0
   const index = findIndex((item) => {
-    return isString(item)
-      ? activeKey === item
-      : activeKey === (item.raw || item.title)
+    return activeKey === (item.raw || item.title)
   }, items)
 
   return index >= 0 ? index : 0
 }
 
-const Tabs = ({ size, onChange, items, activeKey, slipHeight }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const Tabs: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+  slipHeight = '2px',
+}) => {
   const { isMobile } = useDevice()
 
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
@@ -118,39 +134,12 @@ const Tabs = ({ size, onChange, items, activeKey, slipHeight }) => {
           slipHeight={slipHeight}
         >
           <RealBar
-            width={`${size === 'default' ? slipWidth : slipWidth - 6}px`}
+            width={`${size === SIZE.MEDIUM ? slipWidth : slipWidth - 6}px`}
           />
         </SlipBar>
       </Nav>
     </Wrapper>
   )
 }
 
-Tabs.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  slipHeight: T.oneOf(['1px', '2px']),
-}
-
-Tabs.defaultProps = {
-  items: temItems,
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-  slipHeight: '2px',
-}
-
 export default React.memo(Tabs)

src/components/Switcher/Tabs/DesktopView.js renamed to src/components/Switcher/Tabs/DesktopView.tsx

@@ -4,9 +4,9 @@
  *
  */
 
-import React, { useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useCallback } from 'react'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { buildLog, isString } from '@/utils'
 import { SIZE } from '@/constant'
 
@@ -23,7 +23,20 @@ const temItems = [
   },
 ]
 
-const Tabs = ({ size, onChange, items, activeKey }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const Tabs: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+}) => {
   const handleItemClick = useCallback(
     (item) => {
       onChange(isString(item) ? item : item.raw || item.title)
@@ -37,7 +50,6 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
         <TabItem
           key={isString(item) ? item : item.raw || item.title}
           active={activeKey === item.raw}
-          size={size}
           onClick={() => handleItemClick(item)}
         >
           {item.title}
@@ -47,29 +59,4 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
   )
 }
 
-Tabs.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-}
-
-Tabs.defaultProps = {
-  items: temItems,
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-}
-
 export default React.memo(Tabs)

src/components/Switcher/Tabs/DrawerView.js renamed to src/components/Switcher/Tabs/DrawerView.tsx

@@ -19,6 +19,12 @@ import {
   TabFavoritesIcon,
 } from '../styles/tabs/local_icon'
 
+// type TProps = {
+//   raw: string
+//   active: boolean
+//   small?: boolean
+// }
+
 const TabIcon = ({ raw, active, small }) => {
   switch (raw) {
     case 'tech':