refactor: blog viewer debug (#1181)

* refactor(blog-workflow): viewer & detail page re-org

* refactor(constant): extract WORKS/BLOG_TAB constant

* refactor(constant): extract tab items

Author: mydearxym

src/containers/content/ArticleContent/DesktopView/BlogLayout/ArticleTab.tsx

@@ -5,7 +5,7 @@ import { buildLog } from '@/utils/logger'
 
 import { ArticleFooter, Comments } from '@/containers/dynamic'
 import ArtimentBody from '@/widgets/ArtimentBody'
-
+import Linker from '@/widgets/Linker'
 import ViewportTracker from '@/widgets/ViewportTracker'
 
 import {
@@ -35,6 +35,7 @@ const ArticleTab: FC<TProps> = ({ metric, article }) => {
       />
       <MainWrapper metric={metric}>
         <ArticleWrapper ref={ref}>
+          <Linker src={article.linkAddr} right={10} bottom={25} hint="原文:" />
           <ArtimentBody document={article.document} />
           <ArticleFooter metric={metric} />
         </ArticleWrapper>

src/containers/content/ArticleContent/DesktopView/BlogLayout/AuthorTab.tsx

@@ -3,17 +3,9 @@ import { FC } from 'react'
 import type { TMetric, TRSSAuthor } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
-import NoticeBar from '@/widgets/NoticeBar'
-import DotDivider from '@/widgets/DotDivider'
+import BlogAuthorInfo from '@/widgets/BlogAuthorInfo'
 
-import {
-  MainWrapper,
-  ArticleWrapper,
-  UserName,
-  Intro,
-  GithubIcon,
-  TwitterIcon,
-} from '../../styles/desktop_view/blog_layout/author_tab'
+import { MainWrapper, ArticleWrapper } from '../../styles/desktop_view'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:BlogContent:AuthorTab')
@@ -24,45 +16,10 @@ type TProps = {
 }
 
 const AuthorTab: FC<TProps> = ({ metric, author }) => {
-  if (!author) {
-    return (
-      <MainWrapper metric={metric}>
-        <ArticleWrapper>
-          <NoticeBar
-            type="notice"
-            content=" 暂无作者信息，志愿者将尽快搜集公开资料完善博客作者的信息。如果你有这方面的资料，欢迎在博文讨论区补充/纠正。 "
-            top={-5}
-            bottom={20}
-            left={-2}
-          />
-        </ArticleWrapper>
-      </MainWrapper>
-    )
-  }
-
-  const { name, intro, twitter, github } = author
-
   return (
     <MainWrapper metric={metric}>
       <ArticleWrapper>
-        <div>
-          <UserName>
-            {name}
-            {(twitter || github) && <DotDivider space={12} />}
-            {github && (
-              <a href={github} target="_blank" rel="noreferrer">
-                <GithubIcon />
-              </a>
-            )}
-
-            {twitter && (
-              <a href={twitter} target="_blank" rel="noreferrer">
-                <TwitterIcon />
-              </a>
-            )}
-          </UserName>
-          <Intro>{intro}</Intro>
-        </div>
+        <BlogAuthorInfo author={author} />
       </ArticleWrapper>
     </MainWrapper>
   )

src/containers/content/ArticleContent/DesktopView/BlogLayout/FeedsTab.tsx

@@ -1,18 +1,11 @@
 import { FC } from 'react'
-import TimeAgo from 'timeago-react'
 
 import type { TMetric, TBlog } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
-import NoticeBar from '@/widgets/NoticeBar'
+import BlogFeedsList from '@/widgets/BlogFeedsList'
+
 import { MainWrapper, ArticleWrapper } from '../../styles/desktop_view'
-import {
-  Wrapper,
-  Header,
-  PubDate,
-  Title,
-  Digest,
-} from '../../styles/desktop_view/blog_layout/feeds_tab'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:BlogContent:FeedTab')
@@ -26,28 +19,7 @@ const FeedsTab: FC<TProps> = ({ items, metric }) => {
   return (
     <MainWrapper metric={metric}>
       <ArticleWrapper>
-        <NoticeBar
-          type="notice"
-          content="数据来自该博客提供的 RSS 订阅源，可能会有滞后。 "
-          top={-5}
-          bottom={20}
-          left={-2}
-        />
-
-        {items.map((item) => (
-          <Wrapper key={item.id}>
-            <Header>
-              <Title href={item.linkAddr} target="_blank">
-                {item.title}
-              </Title>
-              <PubDate>
-                <TimeAgo datetime={item.published} locale="zh_CN" />
-              </PubDate>
-            </Header>
-
-            <Digest>{item.digest}</Digest>
-          </Wrapper>
-        ))}
+        <BlogFeedsList items={items} />
       </ArticleWrapper>
     </MainWrapper>
   )

src/containers/content/ArticleContent/DesktopView/BlogLayout/index.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react'
 
 import type { TMetric } from '@/spec'
+import { BLOG_TAB } from '@/constant'
+
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
@@ -38,7 +40,7 @@ const ArticleContentContainer: FC<TProps> = ({
 
   const { viewingArticle, articleTab, blogRssInfoData } = store
   if (!viewingArticle.id) return null
-  if (articleTab === 'feeds') {
+  if (articleTab === BLOG_TAB.FEEDS) {
     return (
       <Wrapper testid={testid}>
         <InnerWrapper>
@@ -51,7 +53,7 @@ const ArticleContentContainer: FC<TProps> = ({
     )
   }
 
-  if (articleTab === 'author') {
+  if (articleTab === BLOG_TAB.AUTHOR) {
     return (
       <Wrapper testid={testid}>
         <InnerWrapper>

src/containers/content/ArticleContent/DesktopView/WorksLayout/index.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react'
 
 import type { TMetric } from '@/spec'
+import { WORKS_TAB } from '@/constant'
+
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
@@ -38,7 +40,7 @@ const ArticleContentContainer: FC<TProps> = ({
   const { viewingArticle, articleTab } = store
   if (!viewingArticle.id) return null
 
-  if (articleTab === 'techstack') {
+  if (articleTab === WORKS_TAB.TECHSTACKS) {
     return (
       <Wrapper testid={testid}>
         <InnerWrapper>

src/containers/digest/ArticleDigest/DesktopView/BlogLayout.tsx

@@ -5,7 +5,7 @@
 import { FC, Fragment, memo } from 'react'
 
 import type { TBlog, TMetric } from '@/spec'
-import { METRIC } from '@/constant'
+import { METRIC, BLOG_TAB_ITEMS } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { cutRest } from '@/utils/helper'
 
@@ -37,21 +37,6 @@ type TProps = {
   tab: string
 }
 
-const tabItems = [
-  {
-    title: '摘要',
-    raw: 'digest',
-  },
-  {
-    title: '历史文章',
-    raw: 'feeds',
-  },
-  {
-    title: '博客作者',
-    raw: 'author',
-  },
-]
-
 const BlogLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article, tab }) => {
   return (
     <Fragment>
@@ -70,7 +55,7 @@ const BlogLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article, tab }) => {
           <AuthorName>by: {article.author.nickname}</AuthorName>
           <TabWrapper>
             <Tabs
-              items={tabItems}
+              items={BLOG_TAB_ITEMS}
               size="small"
               activeKey={tab}
               bottomSpace={10}

src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx

@@ -3,9 +3,10 @@
  */
 
 import { FC, Fragment, memo } from 'react'
+import { reject } from 'ramda'
 
 import type { TWorks, TMetric } from '@/spec'
-import { METRIC, UPVOTE_LAYOUT } from '@/constant'
+import { METRIC, UPVOTE_LAYOUT, WORKS_TAB_ITEMS, WORKS_TAB } from '@/constant'
 import { buildLog } from '@/utils/logger'
 
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
@@ -40,33 +41,12 @@ type TProps = {
   tab: string
 }
 
-const tabItems = [
-  {
-    title: '简介',
-    raw: 'story',
-  },
-  {
-    title: '技术栈',
-    raw: 'techstack',
-  },
-  {
-    title: '更新',
-    raw: 'update',
-  },
-  {
-    title: '作者访谈',
-    raw: 'interview',
-  },
-  {
-    title: '社区',
-    raw: 'community',
-  },
-]
-
 const WorksLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article, tab }) => {
   const { meta, title, desc, upvotesCount } = article
 
   const activeTab = !!tab ? tab : 'story'
+  const tabItems = reject((t) => t.raw === WORKS_TAB.BASIC, WORKS_TAB_ITEMS)
+
   return (
     <Fragment>
       <Main metric={metric}>

src/containers/digest/ArticleDigest/logic.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import type { TScrollDirection, TWorksTab, TBlog } from '@/spec'
-import { EVENT, ERR } from '@/constant'
+import { EVENT, ERR, BLOG_TAB } from '@/constant'
 import asyncSuit from '@/utils/async'
 import { send, errRescue } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
@@ -34,7 +34,10 @@ export const onBlogTabChange = (tab: string): void => {
   store.mark({ tab })
   const blog = store.viewingArticle as TBlog
 
-  if ((tab === 'feeds' || tab === 'author') && !store.blogRssInfo.title) {
+  if (
+    (tab === BLOG_TAB.FEEDS || tab === BLOG_TAB.AUTHOR) &&
+    !store.blogRssInfo.title
+  ) {
     const args = { rss: blog.rss }
     sr71$.query(S.blogRssInfo, args)
   }
@@ -53,10 +56,7 @@ export const onListReactionUsers = (type, data): void =>
 const DataSolver = [
   {
     match: asyncRes('blogRssInfo'),
-    action: ({ blogRssInfo }) => {
-      log('blogRssInfo: ', blogRssInfo)
-      store.mark({ blogRssInfo })
-    },
+    action: ({ blogRssInfo }) => store.mark({ blogRssInfo }),
   },
 ]
 const ErrSolver = [

src/containers/digest/ArticleDigest/schema.ts

@@ -1,4 +1,5 @@
 import { gql } from '@urql/core'
+import { P } from '@/schemas'
 
 const post = gql`
   query ($id: ID!) {
@@ -32,28 +33,7 @@ const repo = gql`
 `
 
 const blogRssInfo = gql`
-  query ($rss: String!) {
-    blogRssInfo(rss: $rss) {
-      title
-      subtitle
-      link
-      updated
-      author {
-        name
-        intro
-        github
-        twitter
-      }
-      historyFeed {
-        title
-        digest
-        linkAddr
-        content
-        published
-        updated
-      }
-    }
-  }
+  ${P.blogRssInfo}
 `
 
 const schema = {

src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx

@@ -1,6 +1,7 @@
 import { memo, FC } from 'react'
 
 import type { TArticle } from '@/spec'
+import { BLOG_TAB, BLOG_TAB_ITEMS } from '@/constant'
 import { ICON } from '@/config'
 
 import DotDivider from '@/widgets/DotDivider'
@@ -19,28 +20,16 @@ import {
   BaseWrapper,
   UpvoteWrapper,
 } from '../styles/blog_viewer/article_info'
+import { blogTabOnChange } from '../logic'
 
 type TProps = {
   article: TArticle
+  tab: string
 }
 
-const tabItems = [
-  {
-    title: '摘要',
-    raw: 'digest',
-  },
-  {
-    title: '关于作者',
-    raw: 'author',
-  },
-  {
-    title: '历史文章',
-    raw: 'history',
-  },
-]
-
-const ArticleInfo: FC<TProps> = ({ article }) => {
+const ArticleInfo: FC<TProps> = ({ article, tab }) => {
   const { upvotesCount, meta } = article
+  const activeTab = !!tab ? tab : BLOG_TAB.DIGEST
 
   return (
     <Wrapper>
@@ -58,10 +47,11 @@ const ArticleInfo: FC<TProps> = ({ article }) => {
       <BottomWrapper>
         <TabsWrapper>
           <Tabs
-            items={tabItems}
+            items={BLOG_TAB_ITEMS}
             size="small"
-            activeKey="digest"
+            activeKey={activeTab}
             bottomSpace={10}
+            onChange={blogTabOnChange}
           />
         </TabsWrapper>
         <UpvoteWrapper>