feat(AuthorSidebar): add Collection

src/views/ArticleDetail/AuthorSidebar/Collection/gql.ts

@@ -0,0 +1,29 @@
+import gql from 'graphql-tag'
+
+export const AUTHOR_SIDEBAR_COLLECTION = gql`
+  query AuthorSidebarCollection($id: ID!, $after: String) {
+    node(input: { id: $id }) {
+      id
+      ... on Collection {
+        id
+        title
+        description
+        articles(input: { first: 40, after: $after }) {
+          totalCount
+          pageInfo {
+            endCursor
+            hasNextPage
+          }
+          edges {
+            cursor
+            node {
+              id
+              title
+              cover
+            }
+          }
+        }
+      }
+    }
+  }
+`

src/views/ArticleDetail/AuthorSidebar/Collection/index.tsx

@@ -0,0 +1,66 @@
+import { toPath } from '~/common/utils'
+import { LinkWrapper, QueryError, Throw404, usePublicQuery } from '~/components'
+import {
+  ArticleDetailPublicQuery,
+  AuthorSidebarCollectionQuery,
+} from '~/gql/graphql'
+
+import { FeedPlaceholder } from '../Placeholder'
+import { AUTHOR_SIDEBAR_COLLECTION } from './gql'
+import styles from './styles.module.css'
+
+type CollectionProps = {
+  collectionId: string
+  article: ArticleDetailPublicQuery['article']
+}
+
+export const Collection = ({ article, collectionId }: CollectionProps) => {
+  /**
+   * Data Fetching
+   */
+  const { data, loading, error } = usePublicQuery<AuthorSidebarCollectionQuery>(
+    AUTHOR_SIDEBAR_COLLECTION,
+    {
+      variables: { id: collectionId },
+    }
+  )
+  const collection = data?.node!
+
+  /**
+   * Render
+   */
+  if (loading) {
+    return <FeedPlaceholder />
+  }
+
+  if (error) {
+    return <QueryError error={error} />
+  }
+
+  if (!collection || collection.__typename !== 'Collection') {
+    return <Throw404 />
+  }
+
+  const collectionDetailPath = toPath({
+    page: 'collectionDetail',
+    userName: article?.author.userName || '',
+    collection: {
+      id: collection.id,
+    },
+  })
+
+  return (
+    <section className={styles.container}>
+      <LinkWrapper {...collectionDetailPath}>
+        <title>{collection.title}</title>
+      </LinkWrapper>
+      {collection.description && (
+        <LinkWrapper {...collectionDetailPath}>
+          <section className={styles.description}>
+            {collection.description}
+          </section>
+        </LinkWrapper>
+      )}
+    </section>
+  )
+}

src/views/ArticleDetail/AuthorSidebar/Collection/styles.module.css

@@ -0,0 +1,26 @@
+.container {
+  @mixin border-grey;
+
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-tight) var(--spacing-base);
+  border-color: var(--color-grey-lighter-active);
+  border-radius: 0.5rem;
+
+  & title {
+    @mixin line-clamp;
+
+    -webkit-line-clamp: 2;
+    margin-bottom: var(--spacing-x-tight);
+    font-weight: var(--font-weight-medium);
+  }
+
+  & .description {
+    @mixin line-clamp;
+
+    -webkit-line-clamp: 4;
+    margin-bottom: var(--spacing-tight);
+    font-size: var(--font-size-xs);
+    color: var(--color-grey-darker);
+  }
+}

src/views/ArticleDetail/AuthorSidebar/Placeholder/index.tsx

@@ -13,6 +13,16 @@ const ItemPlaceholder = () => {
   )
 }
 
+export const FeedPlaceholder = () => {
+  return (
+    <section className={styles.feed}>
+      <ItemPlaceholder />
+      <ItemPlaceholder />
+      <ItemPlaceholder />
+    </section>
+  )
+}
+
 export const Placeholder = () => {
   return (
     <section className={styles.container}>
@@ -21,11 +31,7 @@ export const Placeholder = () => {
         <section className={styles.tabItem}></section>
         <section className={styles.tabItem}></section>
       </section>
-      <section className={styles.feed}>
-        <ItemPlaceholder />
-        <ItemPlaceholder />
-        <ItemPlaceholder />
-      </section>
+      <FeedPlaceholder />
     </section>
   )
 }

src/views/ArticleDetail/AuthorSidebar/index.tsx

@@ -4,6 +4,7 @@ import { useRoute } from '~/components'
 import { ArticleDetailPublicQuery } from '~/gql/graphql'
 
 import Author from './Author'
+import { Collection } from './Collection'
 import { fragments } from './gql'
 import { Placeholder } from './Placeholder'
 import { TABS, Tabs } from './Tabs'
@@ -21,6 +22,9 @@ export const AuthorSidebar = ({ article }: AuthorSidebarProps) => {
     <>
       <Author article={article} />
       <Tabs article={article} tab={tab} setTab={setTab} />
+      {!!cid && tab === 'Collection' && (
+        <Collection article={article} collectionId={cid} />
+      )}
     </>
   )
 }