refactor: useViewing for toggle (#1319)

Author: mydearxym

src/containers/tool/Drawer/Viewer/DesktopView.tsx

@@ -29,7 +29,6 @@ const DesktopView: FC<TProps> = ({
   articleNavi,
   children,
 }) => {
-  console.log('--> visible --> ', visible)
   return (
     <Fragment>
       <DrawerOverlay

src/hooks/index.ts

@@ -8,10 +8,10 @@ export { default as useOutsideClick } from './useOutsideClick'
 export { default as useLangPress } from './useLangPress'
 export { default as useTrans } from './useTrans'
 export { default as useAccount } from './useAccount'
+export { default as useViewing } from './useViewing'
 
 export { default as useNetwork } from 'react-use/lib/useNetwork'
 export { default as useCopyToClipboard } from 'react-use/lib/useCopyToClipboard'
 export { default as useInterval } from 'react-use/lib/useInterval'
 
 export { useSwipeable as useSwipe } from 'react-swipeable'
-export { useViewing } from '@/stores/init'

src/hooks/useAccount.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 // import { merge } from 'ramda'
 
+import { EVENT } from '@/constant'
 import type { TAccount } from '@/spec'
 
 import BStore from '@/utils/bstore'
@@ -21,10 +22,10 @@ const useAccount = (): TAccount | null => {
       }
     }
 
-    Global.addEventListener('storage', checkAccount)
+    Global.addEventListener(EVENT.SESSION_CHANGED, checkAccount)
 
     return () => {
-      Global.removeEventListener('storage', checkAccount)
+      Global.removeEventListener(EVENT.SESSION_CHANGED, checkAccount)
     }
   }, [])
 

src/hooks/useViewing.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+// import { merge } from 'ramda'
+
+import { EVENT } from '@/constant'
+import type { TID } from '@/spec'
+
+import BStore from '@/utils/bstore'
+import { Global } from '@/utils/helper'
+
+const initState = ''
+
+const useViewing = (): TID | null => {
+  const [viewing, setViewing] = useState(initState)
+
+  /* eslint-disable */
+  useEffect(() => {
+    const checkViewing = () => {
+      const item = BStore.get('viewingInfo')
+      setViewing(item)
+    }
+
+    Global.addEventListener(EVENT.VIEWING_CHANGED, checkViewing)
+
+    return () => {
+      Global.removeEventListener(EVENT.VIEWING_CHANGED, checkViewing)
+    }
+  }, [])
+
+  return viewing
+}
+
+export default useViewing

src/stores/ViewingStore/index.ts

@@ -16,6 +16,7 @@ import type {
 } from '@/spec'
 import { THREAD, ARTICLE_THREAD } from '@/constant'
 import { markStates } from '@/utils/mobx'
+import { viewingChanged } from '@/utils/helper'
 import { User, Community, Post, Blog, Job, Radar, Works } from '@/model'
 
 const ViewingStore = T.model('ViewingStore', {
@@ -63,8 +64,9 @@ const ViewingStore = T.model('ViewingStore', {
   }))
   .actions((self) => ({
     setViewing(sobj): void {
-      const { mark } = self as TStore
+      const { mark, viewingArticle } = self as TStore
       mark(sobj)
+      viewingChanged(viewingArticle.id)
     },
     changeCommunity(raw): void {
       self.community.raw = raw
@@ -75,6 +77,7 @@ const ViewingStore = T.model('ViewingStore', {
     resetViewing(): void {
       const { mark, viewingThread } = self as TStore
       mark({ [viewingThread]: {}, viewingThread: null })
+      viewingChanged(null)
     },
     updateUpvote(viewerHasUpvoted: boolean): void {
       const { currentThread } = self as TStore

src/stores/init.ts

@@ -2,10 +2,10 @@
  * the entry of the App root store
  */
 
-import { useMemo, useState, useEffect } from 'react'
+import { useMemo } from 'react'
 import { applySnapshot } from 'mobx-state-tree'
 
-import type { TRootStore, TAccountStore, TViewingStore } from '@/spec'
+import type { TRootStore } from '@/spec'
 import RootStore from './RootStore'
 
 let clientSideRootStore: TRootStore | undefined
@@ -32,9 +32,4 @@ export const useStore = (initialState = {}): TRootStore => {
   return store
 }
 
-export const useViewing = (): TViewingStore => {
-  const [substore, setSubstore] = useState(useStore({}).viewing)
-  useEffect(() => setSubstore(clientSideRootStore.viewing), [])
-
-  return substore
-}
+export const holder = 1

src/widgets/PostItem/DesktopView/ViewingSign.tsx

@@ -0,0 +1,24 @@
+import { FC, memo } from 'react'
+
+import type { TPost } from '@/spec'
+import useViewing from '@/hooks/useViewing'
+
+import { Wrapper, ViewIcon } from '../styles/desktop_view/viewing_sign'
+
+type TProps = {
+  article: TPost
+}
+
+const ViewingSign: FC<TProps> = ({ article }) => {
+  const viewingId = useViewing()
+
+  if (article.id !== viewingId) return null
+
+  return (
+    <Wrapper>
+      <ViewIcon />
+    </Wrapper>
+  )
+}
+
+export default memo(ViewingSign)

src/widgets/PostItem/DesktopView/index.tsx

@@ -6,11 +6,17 @@ import { UPVOTE_LAYOUT } from '@/constant'
 
 import { upvoteOnArticleList } from '@/utils/helper'
 import TheAvatar from '@/widgets/TheAvatar'
+import ViewingSign from './ViewingSign'
 
 import Header from './Header'
 import Body from './Body'
 
-import { AvatarWrapper, UpvoteWrapper, Main } from '../styles/desktop_view'
+import {
+  Wrapper,
+  AvatarWrapper,
+  UpvoteWrapper,
+  Main,
+} from '../styles/desktop_view'
 
 let Upvote = null
 let ArticleReadLabel = null
@@ -45,13 +51,14 @@ const DigestView: FC<TProps> = ({ curCommunity, entry }) => {
   }, [])
 
   return (
-    <Fragment>
+    <Wrapper>
       {loaded && (
         <Fragment>
           <ArticleReadLabel entry={entry} />
           <ArticlePinLabel entry={entry} />
         </Fragment>
       )}
+      <ViewingSign article={entry} />
       <AvatarWrapper>
         <TheAvatar user={entry.author} />
         <UpvoteWrapper>
@@ -71,7 +78,7 @@ const DigestView: FC<TProps> = ({ curCommunity, entry }) => {
         <Header item={entry} />
         <Body item={entry} curCommunity={curCommunity} />
       </Main>
-    </Fragment>
+    </Wrapper>
   )
 }
 

src/widgets/PostItem/styles/desktop_view/index.ts

@@ -3,6 +3,11 @@ import styled from 'styled-components'
 import css, { theme } from '@/utils/css'
 import Img from '@/Img'
 
+export const Wrapper = styled.div`
+  ${css.flex()};
+  width: 100%;
+  position: relative;
+`
 export const Main = styled.div`
   ${css.flexColumnGrow()};
   margin-left: 6px;

src/widgets/PostItem/styles/desktop_view/viewing_sign.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+import css, { animate, theme } from '@/utils/css'
+import ViewSVG from '@/icons/View'
+
+export const Wrapper = styled.div`
+  ${css.flex()};
+  position: absolute;
+  left: -28px;
+  top: 11px;
+  animation: ${animate.fadeInRight} 0.25s linear;
+`
+export const ViewIcon = styled(ViewSVG)`
+  ${css.size(10)};
+  fill: ${theme('thread.articleTitle')};
+`
+export const Title = styled.div``