refactor(upvote): article single page

groupher · Oct 26, 2023 · e3785f5 · e3785f5
1 parent 827ed91
commit e3785f5
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 31 deletions.
diff --git a/src/containers/layout/GlobalLayout/store.ts b/src/containers/layout/GlobalLayout/store.ts
@@ -51,7 +51,6 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
     },
     updateViewerHasUpvoted(viewerHasUpvoted: boolean): void {
       const root = getParent(self) as TRootStore
-
       root.viewing.updateViewerUpvoted(viewerHasUpvoted)
     },
     syncUploadInfo(upvotesCount: number, meta: TArticleMeta): void {

diff --git a/src/pages/[community]/post/[id].tsx b/src/pages/[community]/post/[id].tsx
@@ -37,7 +37,8 @@ const loader = async (context, opt = {}) => {
     slug: community,
     userHasLogin,
   })
-  const post = gqClient.request(P.post, { community, id: query.id, userHasLogin: false })
+
+  const post = gqClient.request(P.post, { community, id: query.id, userHasLogin })
 
   return {
     ...(await sessionState),

diff --git a/src/widgets/Article/Post/Content.tsx b/src/widgets/Article/Post/Content.tsx
@@ -7,9 +7,9 @@
 import { FC, useRef } from 'react'
 import dynamic from 'next/dynamic'
 
-import type { TPost } from '@/spec'
 import { buildLog } from '@/logger'
 
+import useViewingArticle from '@/hooks/useViewingArticle'
 import ArtimentBody from '@/widgets/ArtimentBody'
 import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
 // import ViewportTracker from '@/widgets/ViewportTracker'
@@ -25,12 +25,9 @@ const Comments = dynamic(() => import('@/containers/unit/Comments'), {
   ssr: false,
 })
 
-type TProps = {
-  article: TPost
-}
-
-const Content: FC<TProps> = ({ article }) => {
+const Content: FC = () => {
   const ref = useRef()
+  const { article } = useViewingArticle()
 
   return (
     <Wrapper>

diff --git a/src/widgets/Article/Post/Digest.tsx b/src/widgets/Article/Post/Digest.tsx
@@ -5,9 +5,8 @@
 import { FC, memo } from 'react'
 import Router from 'next/router'
 
-import type { TPost } from '@/spec'
-
 import useMetric from '@/hooks/useMetric'
+import useViewingArticle from '@/hooks/useViewingArticle'
 import { ARTICLE_THREAD } from '@/constant/thread'
 
 import { buildLog } from '@/logger'
@@ -38,12 +37,10 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleDigest')
 
-type TProps = {
-  article: TPost
-}
-
-const PostLayout: FC<TProps> = ({ article }) => {
+const PostLayout: FC = () => {
   const metric = useMetric()
+  const { article } = useViewingArticle()
+
   const { innerId, author, title } = article
 
   const backUrl = `/${article.originalCommunitySlug}/${ARTICLE_THREAD.POST}`

diff --git a/src/widgets/Article/Post/SideInfo.tsx b/src/widgets/Article/Post/SideInfo.tsx
@@ -1,11 +1,12 @@
 import { FC } from 'react'
+import { observer } from 'mobx-react'
 
-import type { TPost } from '@/spec'
-
+import { upvoteArticle } from '@/signal'
+import useViewingArticle from '@/hooks/useViewingArticle'
 import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd'
 import { AVATAR_LAYOUT } from '@/constant/layout'
 
-import { mockUsers } from '@/mock'
+// import { mockUsers } from '@/mock'
 
 import { Br } from '@/widgets/Common'
 import Upvote from '@/widgets/Upvote'
@@ -25,23 +26,22 @@ import {
   Value,
 } from '../styles/post/side_info'
 
-type TProps = {
-  article: TPost
-}
+const SideInfo: FC = () => {
+  const { article } = useViewingArticle()
 
-const SideInfo: FC<TProps> = ({ article }) => {
   const { insertedAt, articleTags, upvotesCount, meta, viewerHasUpvoted } = article
   const { latestUpvotedUsers } = meta
 
-  const users = mockUsers(5)
+  // const users = mockUsers(5)
 
   return (
     <Wrapper>
       <InnerWrapper>
         <Upvote
           count={upvotesCount}
-          avatarList={users}
+          avatarList={latestUpvotedUsers}
           viewerHasUpvoted={viewerHasUpvoted}
+          onAction={(viewerHasUpvoted) => upvoteArticle(article, viewerHasUpvoted)}
           type="article"
           bottom={35}
         />
@@ -81,4 +81,4 @@ const SideInfo: FC<TProps> = ({ article }) => {
   )
 }
 
-export default SideInfo
+export default observer(SideInfo)
diff --git a/src/widgets/Article/Post/index.tsx b/src/widgets/Article/Post/index.tsx
@@ -1,6 +1,5 @@
 import { FC, useState } from 'react'
 
-import useViewingArticle from '@/hooks/useViewingArticle'
 import useMetric from '@/hooks/useMetric'
 
 import Header from '@/widgets/CommunityDigest/HeaderLayout'
@@ -13,8 +12,6 @@ import SideInfo from './SideInfo'
 import { Wrapper, InnerWrapper, HeaderWrapper, BannerContent, Main } from '../styles/post'
 
 const Post: FC = () => {
-  const { article } = useViewingArticle()
-
   const metric = useMetric()
 
   const [inViewport, setInViewport] = useState(false)
@@ -28,10 +25,10 @@ const Post: FC = () => {
         </HeaderWrapper>
         <BannerContent>
           <Main>
-            <Digest article={article} />
-            <Content article={article} />
+            <Digest />
+            <Content />
           </Main>
-          <SideInfo article={article} />
+          <SideInfo />
         </BannerContent>
       </InnerWrapper>
       <ViewportTracker onEnter={() => setInViewport(true)} onLeave={() => setInViewport(false)} />