chore(ts-workflow): more js -> ts day2 (#1016)

* chore(ts-workflow): perfer Type instead of Interface

* chore(ts-workflow): add @typs/react && improve defaultProps style

* chore(ts-workflow): page workflow

* chore(ts-workflow): make sure mst-view helper has return type

* chore(ts-workflow): add some note for rootStore

* chore(ts-workflow): community page -> ts, resolve warnings

Author: mydearxym

package.json

@@ -143,6 +143,7 @@
     "@types/jest": "^26.0.20",
     "@types/mocha": "^8.2.1",
     "@types/ramda": "^0.27.38",
+    "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.0.2",

src/components/AlertBar/index.tsx

@@ -13,11 +13,11 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:AlertBar:index')
 
-type IProps = {
+type TProps = {
   children: React.ReactNode
 }
 
-const AlertBar: React.FC<IProps> = ({ children }) => {
+const AlertBar: React.FC<TProps> = ({ children }) => {
   return <Wrapper testid="alertBar">{children}</Wrapper>
 }
 

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

@@ -5,10 +5,8 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import { values } from 'ramda'
 
 import { METRIC } from '@/constant'
 import { ICON_BASE } from '@/config'
@@ -35,7 +33,19 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:ErrorPage:index')
 
-const ErrorPage = ({ testid, errorCode, metric, target }) => {
+export type TProps = {
+  errorCode?: number // 400 | 500 | 404
+  target?: string
+  testid?: string
+  metric?: string
+}
+
+const ErrorPage: React.FC<TProps> = ({
+  testid = 'error-page',
+  errorCode,
+  metric = METRIC.COMMUNITY,
+  target = '',
+}) => {
   const router = useRouter()
 
   return (
@@ -51,7 +61,7 @@ const ErrorPage = ({ testid, errorCode, metric, target }) => {
       <HintWrapper>
         <IconsWrapper>
           <SpinPlanet />
-          <CodeSnippets errorCode={errorCode} path={target || router.asPath} />
+          <CodeSnippets path={target || router.asPath} />
         </IconsWrapper>
         <TextWrapper>
           {/** TODO:   */}
@@ -67,19 +77,4 @@ const ErrorPage = ({ testid, errorCode, metric, target }) => {
     </Wrapper>
   )
 }
-
-ErrorPage.propTypes = {
-  testid: T.string,
-  errorCode: T.oneOf([404, 500]),
-  metric: T.oneOf(values(METRIC)),
-  target: T.string,
-}
-
-ErrorPage.defaultProps = {
-  testid: 'error-page',
-  errorCode: 404,
-  metric: METRIC.COMMUNITY,
-  target: '',
-}
-
 export default React.memo(ErrorPage)

src/containers/content/HelpCenterContent/Digest.tsx

@@ -15,12 +15,12 @@ import {
   HelpTitle,
 } from './styles/digest'
 
-interface IProps {
+type TProps = {
   community: TCommunity
-  metric?: string // METRIC.HELP_CENTER
+  metric: string
 }
 
-const Digest: React.FC<IProps> = ({ metric, community }) => {
+const Digest: React.FC<TProps> = ({ metric, community }) => {
   return (
     <Wrapper metric={metric}>
       <InnerWrapper metric={metric}>

src/containers/content/HelpCenterContent/index.tsx

@@ -11,7 +11,7 @@ import React from 'react'
 import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
-import { IStore } from './store'
+import { TStore } from './store'
 
 import Cover from './Cover'
 import Detail from './Detail'
@@ -25,21 +25,16 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:HelpCenterContent')
 
-interface IProps {
-  helpCenterContent?: IStore
-  testid: string
-  metric: string // METRIC.HELP_CENTER
+type TProps = {
+  helpCenterContent?: TStore
+  testid?: string
+  metric?: string
 }
 
-const defaultProps: IProps = {
-  metric: METRIC.HELP_CENTER,
-  testid: 'help-center-content',
-}
-
-const HelpCenterContentContainer: React.FC<IProps> = ({
+const HelpCenterContentContainer: React.FC<TProps> = ({
   helpCenterContent: store,
-  testid,
-  metric,
+  testid = 'help-center-content',
+  metric = METRIC.HELP_CENTER,
 }) => {
   useInit(store)
   const { view, curCommunity } = store
@@ -54,16 +49,4 @@ const HelpCenterContentContainer: React.FC<IProps> = ({
   )
 }
 
-HelpCenterContentContainer.defaultProps = defaultProps
-// HelpCenterContentContainer.propTypes = {
-//   helpCenterContent: T.any.isRequired,
-//   testid: T.string,
-//   metric: T.oneOf(values(METRIC)),
-// }
-
-// HelpCenterContentContainer.defaultProps = {
-//   testid: 'help-center-content',
-//   metric: METRIC.HELP_CENTER,
-// }
-
-export default pluggedIn(HelpCenterContentContainer)
+export default pluggedIn(HelpCenterContentContainer) as React.FC<TProps>

src/containers/content/HelpCenterContent/logic.ts

@@ -4,9 +4,9 @@ import { useEffect } from 'react'
 import { buildLog } from '@/utils'
 // import S from './service'
 import { VIEW } from './constant'
-import { IStore } from './store'
+import { TStore } from './store'
 
-let store: IStore | undefined
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:HelpCenterContent')
@@ -22,7 +22,7 @@ export const gotoDetail = (): void => {
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store: IStore): void => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)

src/containers/content/HelpCenterContent/store.ts

@@ -6,7 +6,9 @@
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { values } from 'ramda'
 
-import { TCommunity, IRootStore } from '@/types'
+import { IRootStore } from '@/stores/RootStore'
+
+import { TCommunity } from '@/types'
 import { markStates, buildLog, stripMobx } from '@/utils'
 
 import { VIEW } from './constant'
@@ -31,5 +33,5 @@ export const HelpCenterContent = T.model('HelpCenterContent', {
     },
   }))
 
-export type IStore = Instance<typeof HelpCenterContent>
+export type TStore = Instance<typeof HelpCenterContent>
 export default HelpCenterContent

src/containers/layout/GlobalLayout/dynamic.js renamed to src/containers/layout/GlobalLayout/dynamic.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 
+import { TProps as TErrorPage } from '@/components/ErrorPage'
+
 export const Doraemon = dynamic(() => import('@/containers/tool/Doraemon'), {
   /* eslint-disable react/display-name */
   loading: () => <div />,
@@ -18,8 +20,12 @@ export const Footer = dynamic(() => import('@/containers/unit/Footer'), {
   loading: () => <div />,
   ssr: false,
 })
-export const ErrorPage = dynamic(() => import('@/components/ErrorPage'), {
-  /* eslint-disable react/display-name */
-  loading: () => <div />,
-  ssr: false,
-})
+
+export const ErrorPage = dynamic<TErrorPage>(
+  () => import('@/components/ErrorPage'),
+  {
+    /* eslint-disable react/display-name */
+    loading: () => <div />,
+    ssr: false,
+  },
+)

src/containers/layout/GlobalLayout/index.js renamed to src/containers/layout/GlobalLayout/index.tsx

@@ -5,13 +5,12 @@
  */
 
 import React, { useEffect } from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
 
-import { ANCHOR, METRIC } from '@/constant'
+import { ANCHOR } from '@/constant'
 import AnalysisService from '@/services/Analysis'
 import { useNetwork, useShortcut, usePlatform, useDevice } from '@/hooks'
 import { pluggedIn } from '@/utils'
+import { Nullable, TSEO } from '@/types'
 
 import ThemePalette from '@/containers/layout/ThemePalette'
 import Header from '@/containers/unit/Header'
@@ -20,6 +19,7 @@ import ModeLine from '@/containers/unit/ModeLine'
 import Drawer from '@/containers/tool/Drawer'
 import CustomScroller from '@/components/CustomScroller'
 
+import { TStore } from './store'
 import SEO from './SEO'
 import { Doraemon, ErrorBox, Footer, ErrorPage } from './dynamic'
 
@@ -33,14 +33,26 @@ import {
   childrenWithProps,
 } from './logic'
 
-const GlobalLayoutContainer = ({
+type TProps = {
+  globalLayout?: TStore
+  children: React.ReactNode
+  seoConfig: TSEO
+  errorCode?: number // 400 | 500 | 404
+  errorPath?: Nullable<string>
+  noSidebar?: boolean
+  noFooter?: boolean
+
+  metric: string
+}
+
+const GlobalLayoutContainer: React.FC<TProps> = ({
   globalLayout: store,
   seoConfig,
   errorCode,
   errorPath,
   children,
-  noSidebar,
-  noFooter,
+  noSidebar = false,
+  noFooter = false,
   metric,
 }) => {
   const { online } = useNetwork()
@@ -116,24 +128,4 @@ const GlobalLayoutContainer = ({
   )
 }
 
-GlobalLayoutContainer.propTypes = {
-  children: T.node,
-  globalLayout: T.object.isRequired,
-  seoConfig: T.object.isRequired, // TODO:
-  noSidebar: T.bool,
-  noFooter: T.bool,
-  metric: T.oneOf(values(METRIC)),
-  errorCode: T.oneOf([null, 404, 500]),
-  errorPath: T.oneOfType([T.string, T.instanceOf(null)]),
-}
-
-GlobalLayoutContainer.defaultProps = {
-  children: <div />,
-  noSidebar: false,
-  noFooter: false,
-  errorCode: null,
-  errorPath: null,
-  metric: METRIC.COMMUNITY,
-}
-
-export default pluggedIn(GlobalLayoutContainer)
+export default pluggedIn(GlobalLayoutContainer) as React.FC<TProps>

src/containers/layout/GlobalLayout/store.js renamed to src/containers/layout/GlobalLayout/store.ts

@@ -1,11 +1,12 @@
 /*
- * GlobalLayoutStore store
+ * GlobalLayout store
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, getParent, Instance } from 'mobx-state-tree'
 
 import { markStates, buildLog } from '@/utils'
+import { IRootStore, TAccount } from '@/types'
 
 /* eslint-disable-next-line */
 const log = buildLog('S:GlobalLayoutStore')
@@ -18,31 +19,33 @@ const Platform = T.model('Platform', {
   isEdge: T.optional(T.boolean, false),
 })
 
-const GlobalLayoutStore = T.model('GlobalLayoutStore', {
+const GlobalLayout = T.model('GlobalLayoutStore', {
   online: T.optional(T.boolean, true),
   platform: T.optional(Platform, {}),
   isMobile: T.optional(T.boolean, false),
   // follow the mac convention
   bodyScrollDirection: T.optional(T.enumeration(['up', 'down']), 'up'),
 })
   .views((self) => ({
-    get root() {
-      return getParent(self)
+    get accountInfo(): TAccount {
+      const root = getParent(self) as IRootStore
+      return root.accountInfo
     },
-    get accountInfo() {
-      return self.root.accountInfo
-    },
-    get sidebarPin() {
-      return self.root.sidebar.pin
+    get sidebarPin(): boolean {
+      const root = getParent(self) as IRootStore
+      return root.sidebar.pin
     },
   }))
   .actions((self) => ({
-    openDoraemon() {
-      self.root.openDoraemon()
+    openDoraemon(): void {
+      const root = getParent(self) as IRootStore
+      root.openDoraemon()
     },
     mark(sobj) {
       markStates(sobj, self)
     },
   }))
 
-export default GlobalLayoutStore
+export type TStore = Instance<typeof GlobalLayout>
+
+export default GlobalLayout