refactor(article-sticker): convert to ts

src/containers/tool/ArticleSticker/ArticleSticker.js → src/containers/tool/ArticleSticker/ArticleSticker.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TArticle } from '@/spec'
 import { ICON } from '@/config'
 import { Br } from '@/components/Common'
 
@@ -14,7 +15,12 @@ import {
   Text,
 } from './styles/article_sticker'
 
-const CommonSticker = ({ show, viewing }) => {
+type TProps = {
+  show: boolean
+  viewing: TArticle
+}
+
+const ArticleSticker: React.FC<TProps> = ({ show, viewing }) => {
   return (
     <Wrapper show={show}>
       <ItemWrapper>
@@ -37,4 +43,4 @@ const CommonSticker = ({ show, viewing }) => {
   )
 }
 
-export default React.memo(CommonSticker)
+export default React.memo(ArticleSticker)

src/containers/tool/ArticleSticker/CommentSticker.js → src/containers/tool/ArticleSticker/CommentSticker.tsx

@@ -29,7 +29,12 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:CommentSticker:index')
 
-const CommentSticker = ({
+type TProps = {
+  show: boolean
+  data?: any // TODO
+}
+
+const CommentSticker: React.FC<TProps> = ({
   show,
   data: { pagedCommentsParticipators: users },
 }) => {

src/containers/tool/ArticleSticker/CommunitySticker.js → src/containers/tool/ArticleSticker/CommunitySticker.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import type { TViewing } from '@/spec'
 import { ICON_BASE } from '@/config'
 import { Button } from '@/components/Buttons'
 
@@ -10,7 +11,12 @@ import {
   Divider,
 } from './styles/community_sticker'
 
-const CommunitySticker = () => {
+type TProps = {
+  data?: TViewing
+  show?: boolean
+}
+
+const CommunitySticker: React.FC<TProps> = ({ show, data }) => {
   return (
     <React.Fragment>
       <ItemWrapper>

src/containers/tool/ArticleSticker/LeftSticker/Toc.js → src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx

@@ -14,9 +14,14 @@ import {
 } from '../styles/left_sticker/toc'
 import { toggleTocMenu } from '../logic'
 
-const Toc = ({ show }) => {
+type TProps = {
+  show: boolean
+  testid?: string
+}
+
+const Toc: React.FC<TProps> = ({ show, testid = 'article-sticker-toc' }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <HeaderWrapper onClick={toggleTocMenu}>
         <TitleWrapper>
           <TocIcon src={`${ICON}/article/outline.svg`} />

src/containers/tool/ArticleSticker/LeftSticker/index.js → src/containers/tool/ArticleSticker/LeftSticker/index.tsx

@@ -13,9 +13,21 @@ import {
   BackText,
 } from '../styles/left_sticker'
 
-const LeftSticker = ({ show, title, isTocMenuOpened }) => {
+type TProps = {
+  show: boolean
+  title: string
+  isTocMenuOpened: boolean
+  testid?: string
+}
+
+const LeftSticker: React.FC<TProps> = ({
+  show,
+  title,
+  isTocMenuOpened,
+  testid = 'article-sticker-left-sidebar',
+}) => {
   return (
-    <Wrapper show={show}>
+    <Wrapper show={show} testid={testid}>
       <BackWrapper>
         <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} />
         <BackText>Elixir 社区</BackText>

src/containers/tool/ArticleSticker/index.js → src/containers/tool/ArticleSticker/index.tsx

@@ -7,13 +7,14 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { pluggedIn, buildLog } from '@/utils'
 
 import Sticky from '@/components/Sticky'
 import GotoTop from '@/components/GotoTop'
 
+import type { TStore } from './store'
+
 import LeftSticker from './LeftSticker/index'
 import CommunitySticker from './CommunitySticker'
 import ArticleSticker from './ArticleSticker'
@@ -25,7 +26,15 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleSticker')
 
-const ArticleStickerContainer = ({ articleSticker: store, testid }) => {
+type TProps = {
+  articleSticker?: TStore
+  testid?: string
+}
+
+const ArticleStickerContainer: React.FC<TProps> = ({
+  articleSticker: store,
+  testid = 'article-sticker',
+}) => {
   useInit(store)
 
   const {
@@ -65,13 +74,4 @@ const ArticleStickerContainer = ({ articleSticker: store, testid }) => {
   )
 }
 
-ArticleStickerContainer.propTypes = {
-  articleSticker: T.any.isRequired,
-  testid: T.string,
-}
-
-ArticleStickerContainer.defaultProps = {
-  testid: 'article-sticker',
-}
-
-export default pluggedIn(ArticleStickerContainer)
+export default pluggedIn(ArticleStickerContainer) as React.FC<TProps>

src/containers/tool/ArticleSticker/logic.js → src/containers/tool/ArticleSticker/logic.ts

@@ -3,13 +3,14 @@ import { useEffect } from 'react'
 
 import { buildLog } from '@/utils'
 // import S from './service'
+import type { TStore } from './store'
 
-let store = null
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:ArticleSticker')
 
-export const toggleTocMenu = () => {
+export const toggleTocMenu = (): void => {
   const isTocMenuOpened = !store.isTocMenuOpened
   const isLeftStickerLocked = isTocMenuOpened
 
@@ -20,7 +21,7 @@ export const toggleTocMenu = () => {
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)

src/containers/tool/ArticleSticker/store.ts

@@ -0,0 +1,66 @@
+/*
+ * ArticleSticker store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+// import {} from 'ramda'
+
+import type { TRootStore, TViewing, TScrollDirection } from '@/spec'
+import { markStates, buildLog } from '@/utils'
+/* eslint-disable-next-line */
+const log = buildLog('S:ArticleSticker')
+
+const ArticleSticker = T.model('ArticleSticker', {
+  isTocMenuOpened: T.optional(T.boolean, false),
+  // is TOC is opend, then lock the lefsidebar
+  isLeftStickerLocked: T.optional(T.boolean, false),
+})
+  .views((self) => ({
+    get viewingData(): TViewing {
+      const root = getParent(self) as TRootStore
+      return root.viewingData
+    },
+    get bodyScrollDirection(): TScrollDirection {
+      const root = getParent(self) as TRootStore
+      return root.globalLayout.bodyScrollDirection
+    },
+    get isArticleDigestInViewport(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.articleDigest.inViewport
+    },
+    get isArticleInViewport(): boolean {
+      const root = getParent(self) as TRootStore
+      const { articleInViewport } = root.postContent
+
+      return articleInViewport
+    },
+    get showLeftSticker(): boolean {
+      const {
+        isArticleDigestInViewport,
+        isLeftStickerLocked,
+        bodyScrollDirection,
+      } = self as TStore
+
+      if (isArticleDigestInViewport) return false
+      if (isLeftStickerLocked) return true
+
+      return bodyScrollDirection === 'down'
+    },
+    get showCommunity(): boolean {
+      const { isArticleDigestInViewport, isArticleInViewport } = self as TStore
+      return !isArticleDigestInViewport && isArticleInViewport
+    },
+    get showCommentSticker(): boolean {
+      const { isArticleInViewport } = self as TStore
+      return !isArticleInViewport
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof ArticleSticker>
+export default ArticleSticker

src/spec/article.ts

@@ -12,6 +12,7 @@ export type TArticle = {
     nickname: string
     avatar: string
   }
+  starredCount?: number
   origialCommunity?: TCommunity
   commentsParticipators?: TUser
   insertedAt?: string