From b181be45dcd23396935d4dd646facb392cb5f436 Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Mon, 3 Jun 2024 14:52:39 +0800
Subject: [PATCH] fix(AuthorSidebar): fix tab error

ref:
https://github.com/thematters/matters-web/issues/4470
---
 .../AuthorSidebar/Tabs/index.tsx              |  2 +-
 .../ArticleDetail/AuthorSidebar/index.tsx     | 35 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx b/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx
index 71cd569cd1..3315608294 100644
--- a/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx
+++ b/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx
@@ -6,7 +6,7 @@ import { ArticleDetailPublicQuery } from '~/gql/graphql'
 
 import styles from './styles.module.css'
 
-export type TABS = 'Collection' | 'Author' | 'Recommendation'
+export type TABS = 'Collection' | 'Author' | 'Recommendation' | undefined
 
 type TabsProps = {
   article: NonNullable<ArticleDetailPublicQuery['article']>
diff --git a/src/views/ArticleDetail/AuthorSidebar/index.tsx b/src/views/ArticleDetail/AuthorSidebar/index.tsx
index a9e0588cf3..34986e0c69 100644
--- a/src/views/ArticleDetail/AuthorSidebar/index.tsx
+++ b/src/views/ArticleDetail/AuthorSidebar/index.tsx
@@ -19,19 +19,36 @@ type AuthorSidebarProps = {
 export const AuthorSidebar = ({ article }: AuthorSidebarProps) => {
   const { getQuery } = useRoute()
   const cid = getQuery('collection')
-  const [tab, setTab] = useState<TABS>(!!cid ? 'Collection' : 'Author')
+  const latestWorks = article.author?.latestWorks.filter((work) => {
+    return work.id !== article.id
+  })
+  const hasFromAuthor = latestWorks && latestWorks.length > 0
+  const hasRecommendation = article.relatedArticles?.totalCount > 0
+  const [tab, setTab] = useState<TABS>(
+    !!cid
+      ? 'Collection'
+      : hasFromAuthor
+      ? 'Author'
+      : hasRecommendation
+      ? 'Recommendation'
+      : undefined
+  )
 
   return (
     <>
       <Author article={article} />
-      <Tabs article={article} tab={tab} setTab={setTab} />
-      <section className={styles.list}>
-        {!!cid && tab === 'Collection' && (
-          <Collection article={article} collectionId={cid} />
-        )}
-        {tab === 'Author' && <FromAuthor article={article} />}
-        {tab === 'Recommendation' && <RelatedArticles article={article} />}
-      </section>
+      {!!tab && (
+        <>
+          <Tabs article={article} tab={tab} setTab={setTab} />
+          <section className={styles.list}>
+            {!!cid && tab === 'Collection' && (
+              <Collection article={article} collectionId={cid} />
+            )}
+            {tab === 'Author' && <FromAuthor article={article} />}
+            {tab === 'Recommendation' && <RelatedArticles article={article} />}
+          </section>
+        </>
+      )}
     </>
   )
 }