From 80ab859804eaeab9bda38b47eed3fa75a5bfa91b Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 5 Apr 2021 20:06:07 +0800
Subject: [PATCH] chore(js-ts): Header unit

---
 .../unit/Header/{AddOns.js => AddOns.tsx}     |  0
 ...cleEditorView.js => ArticleEditorView.tsx} | 32 +++++++------------
 .../{ArticleView.js => ArticleView.tsx}       | 28 ++++++++--------
 .../{CommunityVIew.js => CommunityVIew.tsx}   | 29 ++++++++---------
 .../DesktopView/{index.js => index.tsx}       | 12 ++++---
 .../Header/{ThreadsNav.js => ThreadsNav.tsx}  | 25 +++++++++++----
 .../{UserAccount.js => UserAccount.tsx}       | 14 +++++---
 .../unit/Header/{index.js => index.tsx}       |  2 +-
 .../unit/Header/{logic.js => logic.ts}        | 27 ++++++++++------
 src/containers/unit/Header/styles/index.ts    |  3 +-
 src/spec/index.ts                             |  4 +++
 11 files changed, 98 insertions(+), 78 deletions(-)
 rename src/containers/unit/Header/{AddOns.js => AddOns.tsx} (100%)
 rename src/containers/unit/Header/DesktopView/{ArticleEditorView.js => ArticleEditorView.tsx} (73%)
 rename src/containers/unit/Header/DesktopView/{ArticleView.js => ArticleView.tsx} (78%)
 rename src/containers/unit/Header/DesktopView/{CommunityVIew.js => CommunityVIew.tsx} (81%)
 rename src/containers/unit/Header/DesktopView/{index.js => index.tsx} (65%)
 rename src/containers/unit/Header/{ThreadsNav.js => ThreadsNav.tsx} (60%)
 rename src/containers/unit/Header/{UserAccount.js => UserAccount.tsx} (90%)
 rename src/containers/unit/Header/{index.js => index.tsx} (89%)
 rename src/containers/unit/Header/{logic.js => logic.ts} (79%)

diff --git a/src/containers/unit/Header/AddOns.js b/src/containers/unit/Header/AddOns.tsx
similarity index 100%
rename from src/containers/unit/Header/AddOns.js
rename to src/containers/unit/Header/AddOns.tsx
diff --git a/src/containers/unit/Header/DesktopView/ArticleEditorView.js b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx
similarity index 73%
rename from src/containers/unit/Header/DesktopView/ArticleEditorView.js
rename to src/containers/unit/Header/DesktopView/ArticleEditorView.tsx
index d0c64a670..e23c816e8 100644
--- a/src/containers/unit/Header/DesktopView/ArticleEditorView.js
+++ b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx
@@ -6,7 +6,6 @@
 
 import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
-import T from 'prop-types'
 
 import { ICON } from '@/config'
 import { METRIC } from '@/constant'
@@ -14,6 +13,7 @@ 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>
diff --git a/src/containers/unit/Header/DesktopView/ArticleView.js b/src/containers/unit/Header/DesktopView/ArticleView.tsx
similarity index 78%
rename from src/containers/unit/Header/DesktopView/ArticleView.js
rename to src/containers/unit/Header/DesktopView/ArticleView.tsx
index 43983d2df..6ac5f57bf 100644
--- a/src/containers/unit/Header/DesktopView/ArticleView.js
+++ b/src/containers/unit/Header/DesktopView/ArticleView.tsx
@@ -6,7 +6,6 @@
 
 import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
-import T from 'prop-types'
 
 import { ICON } from '@/config'
 import { pluggedIn, buildLog } from '@/utils'
@@ -14,6 +13,7 @@ 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,7 +83,6 @@ const HeaderContainer = ({ header: store }) => {
           {/* <Cashier /> */}
           <UserInfoWrapper>
             <MoreIcon src={`${ICON}/shape/more-box.svg`} />
-            {/* <UserAccount isLogin={isLogin} accountInfo={accountInfo} /> */}
           </UserInfoWrapper>
         </Operations>
       </InnerWrapper>
@@ -84,10 +90,4 @@ const HeaderContainer = ({ header: store }) => {
   )
 }
 
-HeaderContainer.propTypes = {
-  header: T.any.isRequired,
-}
-
-HeaderContainer.defaultProps = {}
-
-export default pluggedIn(HeaderContainer)
+export default pluggedIn(ArticleHeaderContainer, 'header') as React.FC<TProps>
diff --git a/src/containers/unit/Header/DesktopView/CommunityVIew.js b/src/containers/unit/Header/DesktopView/CommunityVIew.tsx
similarity index 81%
rename from src/containers/unit/Header/DesktopView/CommunityVIew.js
rename to src/containers/unit/Header/DesktopView/CommunityVIew.tsx
index 00c2219f4..bf9eee55f 100644
--- a/src/containers/unit/Header/DesktopView/CommunityVIew.js
+++ b/src/containers/unit/Header/DesktopView/CommunityVIew.tsx
@@ -6,8 +6,6 @@
 
 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'
@@ -15,6 +13,7 @@ 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>
diff --git a/src/containers/unit/Header/DesktopView/index.js b/src/containers/unit/Header/DesktopView/index.tsx
similarity index 65%
rename from src/containers/unit/Header/DesktopView/index.js
rename to src/containers/unit/Header/DesktopView/index.tsx
index c41fc1ac1..10463d27b 100644
--- a/src/containers/unit/Header/DesktopView/index.js
+++ b/src/containers/unit/Header/DesktopView/index.tsx
@@ -6,13 +6,13 @@ 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} />
@@ -20,7 +20,11 @@ const renderHeader = (metric) => {
   }
 }
 
-const DesktopView = ({ metric }) => {
+type TProps = {
+  metric: string
+}
+
+const DesktopView: React.FC<TProps> = ({ metric }) => {
   return <React.Fragment>{renderHeader(metric)}</React.Fragment>
 }
 
diff --git a/src/containers/unit/Header/ThreadsNav.js b/src/containers/unit/Header/ThreadsNav.tsx
similarity index 60%
rename from src/containers/unit/Header/ThreadsNav.js
rename to src/containers/unit/Header/ThreadsNav.tsx
index f4ec3ce72..7a4b9a02e 100755
--- a/src/containers/unit/Header/ThreadsNav.js
+++ b/src/containers/unit/Header/ThreadsNav.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>
   )
diff --git a/src/containers/unit/Header/UserAccount.js b/src/containers/unit/Header/UserAccount.tsx
similarity index 90%
rename from src/containers/unit/Header/UserAccount.js
rename to src/containers/unit/Header/UserAccount.tsx
index 77498c8a4..8134199d8 100755
--- a/src/containers/unit/Header/UserAccount.js
+++ b/src/containers/unit/Header/UserAccount.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"
diff --git a/src/containers/unit/Header/index.js b/src/containers/unit/Header/index.tsx
similarity index 89%
rename from src/containers/unit/Header/index.js
rename to src/containers/unit/Header/index.tsx
index 2fc834d2d..2198e7559 100755
--- a/src/containers/unit/Header/index.js
+++ b/src/containers/unit/Header/index.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>
   )
diff --git a/src/containers/unit/Header/logic.js b/src/containers/unit/Header/logic.ts
similarity index 79%
rename from src/containers/unit/Header/logic.js
rename to src/containers/unit/Header/logic.ts
index a82f9091f..10524ba37 100755
--- a/src/containers/unit/Header/logic.js
+++ b/src/containers/unit/Header/logic.ts
@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 
+import type { TThread } from '@/spec'
 // eslint-disable-next-line import/named
 import { TYPE, EVENT, ERR } from '@/constant'
 
@@ -14,6 +15,7 @@ import {
   Global,
 } from '@/utils'
 
+import type { TStore } from './store'
 import S from './schema'
 
 /* eslint-disable-next-line */
@@ -21,18 +23,19 @@ const log = buildLog('L:Header')
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
+  // @ts-ignore
   receive: [EVENT.SET_C11N],
 })
 
 let store = null
 let sub$ = null
 
-export const previewAccount = () => console.log('TODO:  ')
+export const previewAccount = (): void => console.log('TODO:  ')
 
 // to avoid page-cache in server
-export const checkSessionState = () => sr71$.query(S.sessionState, {})
+export const checkSessionState = (): void => sr71$.query(S.sessionState, {})
 
-export const onThreadChange = (activeThread) => {
+export const onThreadChange = (activeThread: TThread): void => {
   // const activeThread = thread.raw
   const subPath = thread2Subpath(activeThread)
 
@@ -43,8 +46,8 @@ export const onThreadChange = (activeThread) => {
   send(EVENT.THREAD_CHANGE, { data: { activeThread, topic: subPath } })
 }
 
-export const onLogin = () => send(EVENT.LOGIN_PANEL)
-export const onLogout = () => {
+export const onLogin = (): void => send(EVENT.LOGIN_PANEL)
+export const onLogout = (): void => {
   store.logout()
 
   setTimeout(() => {
@@ -52,9 +55,9 @@ export const onLogout = () => {
   }, 2000)
 }
 
-export const openDoraemon = () => store.openDoraemon()
+export const openDoraemon = (): void => store.openDoraemon()
 
-export const openC11NPanel = () => {
+export const openC11NPanel = (): void => {
   send(EVENT.DRAWER.OPEN, { type: TYPE.DRAWER.C11N_SETTINGS })
 }
 
@@ -87,7 +90,9 @@ const DataSolver = [
   {
     // TODO: notify user if failed
     match: asyncRes('setCustomization'),
-    action: () => {},
+    action: () => {
+      //
+    },
     // log('set setCustomization done: ', setCustomization)
   },
 ]
@@ -95,7 +100,9 @@ const DataSolver = [
 const ErrSolver = [
   {
     match: asyncErr(ERR.GRAPHQL),
-    action: () => {},
+    action: () => {
+      //
+    },
   },
   {
     match: asyncErr(ERR.TIMEOUT),
@@ -114,7 +121,7 @@ const ErrSolver = [
 // ###############################
 // init & unInit
 // ###############################
-export const useInit = (_store, metric) => {
+export const useInit = (_store: TStore, metric: string): void => {
   useEffect(() => {
     store = _store
     store.mark({ metric })
diff --git a/src/containers/unit/Header/styles/index.ts b/src/containers/unit/Header/styles/index.ts
index 432015ee8..9df69fbf9 100644
--- a/src/containers/unit/Header/styles/index.ts
+++ b/src/containers/unit/Header/styles/index.ts
@@ -2,9 +2,10 @@ import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
 
+type TWrapper = TTestable & { id: string }
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
-}))<TTestable>`
+}))<TWrapper>`
   position: relative;
 `
 export const MobileWrapper = styled.div`
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 303c52208..311ce720f 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -69,6 +69,10 @@ export type TCommunity = {
   raw: string
   subscribersCount?: number
   desc?: string
+  threads?: {
+    title: string
+    raw: string
+  }[]
 }
 
 export type TPagedCommunities = {