chore(js-ts): Header unit (#1051)

Author: mydearxym

src/containers/unit/Header/AddOns.js renamed to src/containers/unit/Header/AddOns.tsx

@@ -6,14 +6,14 @@
 
 import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
-import T from 'prop-types'
 
 import { ICON } from '@/config'
 import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
 import Navigator from '@/components/Navigator'
 
+import type { TStore } from '../store'
 import {
   Wrapper,
   InnerWrapper,
@@ -29,19 +29,15 @@ const log = buildLog('C:Header')
 
 let MailBox
 
-const HeaderContainer = ({ header: store }) => {
-  useInit(store)
+type TProps = {
+  header?: TStore
+  metric?: string
+}
+
+const ArticleEditorHeader: React.FC<TProps> = ({ header: store, metric }) => {
+  useInit(store, metric)
 
-  const {
-    isOnline,
-    leftOffset,
-    accountInfo,
-    isLogin,
-    curCommunity,
-    accountInfo: {
-      customization: { bannerLayout },
-    },
-  } = store
+  const { isOnline, leftOffset, accountInfo, isLogin, curCommunity } = store
 
   useEffect(() => {
     if (isLogin) {
@@ -60,7 +56,7 @@ const HeaderContainer = ({ header: store }) => {
       leftOffset={leftOffset}
       noBorder
     >
-      <InnerWrapper layout={bannerLayout} metric={METRIC.ARTICLE_EDITOR}>
+      <InnerWrapper>
         <RouterWrapper>
           <Navigator
             curCommunity={curCommunity}
@@ -78,10 +74,4 @@ const HeaderContainer = ({ header: store }) => {
   )
 }
 
-HeaderContainer.propTypes = {
-  header: T.any.isRequired,
-}
-
-HeaderContainer.defaultProps = {}
-
-export default pluggedIn(HeaderContainer)
+export default pluggedIn(ArticleEditorHeader, 'header') as React.FC<TProps>

src/containers/unit/Header/DesktopView/ArticleEditorView.js renamed to src/containers/unit/Header/DesktopView/ArticleEditorView.tsx

@@ -6,14 +6,14 @@
 
 import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
-import T from 'prop-types'
 
 import { ICON } from '@/config'
 import { pluggedIn, buildLog } from '@/utils'
 
 import UserLister from '@/containers/user/UserLister'
 import Navigator from '@/components/Navigator'
 
+import type { TStore } from '../store'
 // import UserAccount from '../UserAccount'
 import {
   Wrapper,
@@ -30,13 +30,20 @@ const log = buildLog('C:Header')
 
 let MailBox
 
-const HeaderContainer = ({ header: store }) => {
-  useInit(store)
+type TProps = {
+  header?: TStore
+  metric?: string
+}
+
+const ArticleHeaderContainer: React.FC<TProps> = ({
+  header: store,
+  metric,
+}) => {
+  useInit(store, metric)
 
   const {
     isOnline,
     leftOffset,
-    accountInfo,
     isLogin,
     curCommunity,
     accountInfo: {
@@ -61,11 +68,11 @@ const HeaderContainer = ({ header: store }) => {
       leftOffset={leftOffset}
       noBorder
     >
-      <InnerWrapper layout={bannerLayout}>
+      <InnerWrapper>
         <RouterWrapper>
           <Navigator
             curCommunity={curCommunity}
-            layout={accountInfo.customization.bannerLayout}
+            layout={bannerLayout}
             isOnline={isOnline}
             // showLogoText
           />
@@ -76,18 +83,11 @@ const HeaderContainer = ({ header: store }) => {
           {/* <Cashier /> */}
           <UserInfoWrapper>
             <MoreIcon src={`${ICON}/shape/more-box.svg`} />
-            {/* <UserAccount isLogin={isLogin} accountInfo={accountInfo} /> */}
           </UserInfoWrapper>
         </Operations>
       </InnerWrapper>
     </Wrapper>
   )
 }
 
-HeaderContainer.propTypes = {
-  header: T.any.isRequired,
-}
-
-HeaderContainer.defaultProps = {}
-
-export default pluggedIn(HeaderContainer)
+export default pluggedIn(ArticleHeaderContainer, 'header') as React.FC<TProps>

src/containers/unit/Header/DesktopView/ArticleView.js renamed to src/containers/unit/Header/DesktopView/ArticleView.tsx

@@ -6,15 +6,14 @@
 
 import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
-import T from 'prop-types'
-import { values } from 'ramda'
 
 import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
 import UserLister from '@/containers/user/UserLister'
 import Navigator from '@/components/Navigator'
 
+import type { TStore } from '../store'
 import UserAccount from '../UserAccount'
 import AddOns from '../AddOns'
 
@@ -33,7 +32,16 @@ const log = buildLog('C:Header')
 
 let MailBox
 
-const HeaderContainer = ({ header: store, metric }) => {
+type TProps = {
+  // T.oneOf(values(METRIC)) TODO
+  metric?: string
+  header?: TStore
+}
+
+const CommunityHeaderContainer: React.FC<TProps> = ({
+  header: store,
+  metric = METRIC.COMMUNITY,
+}) => {
   log('header metric: ', metric)
   useInit(store, metric)
 
@@ -66,11 +74,11 @@ const HeaderContainer = ({ header: store, metric }) => {
       leftOffset={leftOffset}
       noBorder={hasNoBottomBorder}
     >
-      <InnerWrapper metric={metric} layout={bannerLayout}>
+      <InnerWrapper metric={metric}>
         <RouterWrapper>
           <Navigator
             curCommunity={curCommunity}
-            layout={accountInfo.customization.bannerLayout}
+            layout={bannerLayout}
             isOnline={isOnline}
             metric={metric}
           />
@@ -91,13 +99,4 @@ const HeaderContainer = ({ header: store, metric }) => {
   )
 }
 
-HeaderContainer.propTypes = {
-  metric: T.oneOf(values(METRIC)),
-  header: T.any.isRequired,
-}
-
-HeaderContainer.defaultProps = {
-  metric: METRIC.COMMUNITY,
-}
-
-export default pluggedIn(HeaderContainer)
+export default pluggedIn(CommunityHeaderContainer, 'header') as React.FC<TProps>

src/containers/unit/Header/DesktopView/CommunityVIew.js renamed to src/containers/unit/Header/DesktopView/CommunityVIew.tsx

@@ -6,21 +6,25 @@ import CommunityView from './CommunityVIew'
 import ArticleView from './ArticleView'
 import ArticleEditorView from './ArticleEditorView'
 
-const renderHeader = (metric) => {
+const renderHeader = (metric: string): React.ReactNode => {
   switch (metric) {
     case METRIC.ARTICLE: {
-      return <ArticleView />
+      return <ArticleView metric={metric} />
     }
     case METRIC.ARTICLE_EDITOR: {
-      return <ArticleEditorView />
+      return <ArticleEditorView metric={metric} />
     }
     default: {
       return <CommunityView metric={metric} />
     }
   }
 }
 
-const DesktopView = ({ metric }) => {
+type TProps = {
+  metric: string
+}
+
+const DesktopView: React.FC<TProps> = ({ metric }) => {
   return <React.Fragment>{renderHeader(metric)}</React.Fragment>
 }
 

src/containers/unit/Header/DesktopView/index.js renamed to src/containers/unit/Header/DesktopView/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 
+import type { TCommunity, TThread } from '@/spec'
 import { Trans } from '@/utils'
-import { SIZE } from '@/constant'
+// import { SIZE } from '@/constant'
 
-import { Tabs } from '@/components/Switcher'
+// import { Tabs } from '@/components/Switcher'
 import DotDivider from '@/components/DotDivider'
 
 import {
@@ -13,9 +14,18 @@ import {
   MiniTab,
 } from './styles/threads_nav'
 
-import { onThreadChange } from './logic'
+// import { onThreadChange } from './logic'
 
-const ThreadsNav = ({ activeInfo: { community, activeThread } }) => {
+type TProps = {
+  activeInfo: {
+    community: TCommunity
+    activeThread: TThread
+  }
+}
+
+const ThreadsNav: React.FC<TProps> = ({
+  activeInfo: { community, activeThread },
+}) => {
   return (
     <Wrapper>
       <CommunityLogo src={community.logo || ''} raw={community.raw} />
@@ -24,12 +34,13 @@ const ThreadsNav = ({ activeInfo: { community, activeThread } }) => {
         {Trans(activeThread)}
       </MobileHint>
       <MiniTab>
-        <Tabs
-          items={community.threads}
+        todo
+        {/* <Tabs
           size={SIZE.SMALL}
+          items={community.threads}
           onChange={onThreadChange}
           activeKey={activeThread}
-        />
+        /> */}
       </MiniTab>
     </Wrapper>
   )

src/containers/unit/Header/ThreadsNav.js renamed to src/containers/unit/Header/ThreadsNav.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
+import type { TAccount } from '@/spec'
 import { ICON } from '@/config'
 import { ROUTE } from '@/constant'
 import Tooltip from '@/components/Tooltip'
@@ -23,7 +24,12 @@ import {
   MembershipHint,
 } from './styles/user_account'
 
-const UserAccount = ({ isLogin, accountInfo }) => {
+type TProps = {
+  isLogin: boolean
+  accountInfo: TAccount
+}
+
+const UserAccount: React.FC<TProps> = ({ isLogin, accountInfo }) => {
   const router = useRouter()
 
   return (
@@ -40,9 +46,7 @@ const UserAccount = ({ isLogin, accountInfo }) => {
                 <LoginName>{accountInfo.login}</LoginName>
               </LoginBadge>
               <MenuDivider />
-              <MenuItem onClick={() => previewAccount('account')}>
-                主页面板
-              </MenuItem>
+              <MenuItem onClick={() => previewAccount()}>主页面板</MenuItem>
               <MenuLink
                 href={`/user/${accountInfo.login}`}
                 rel="noopener noreferrer"
@@ -87,7 +91,7 @@ const UserAccount = ({ isLogin, accountInfo }) => {
         </Wrapper>
       )}
 
-      <MembershipHint href={ROUTE.MEMBERSHIP}>
+      <MembershipHint>
         {/* 升&nbsp;级- */}
         <Button
           size="tiny"

src/containers/unit/Header/UserAccount.js renamed to src/containers/unit/Header/UserAccount.tsx

@@ -17,7 +17,7 @@ const HeaderContainer = ({ metric }) => {
   const { isMobile } = useDevice()
 
   return (
-    <Wrapper id={ANCHOR.GLOBAL_HEADER_ID}>
+    <Wrapper id={ANCHOR.GLOBAL_HEADER_ID} testid="">
       {!isMobile ? <DesktopView metric={metric} /> : <MobileWrapper />}
     </Wrapper>
   )