featCollectionDetail): add cursor-based navigation for articles in co…

…llection detail

src/common/enums/article.ts

@@ -2,3 +2,5 @@ export const COMMENTS_COUNT = 40
 export const TOOLBAR_FIXEDTOOLBAR_ID = 'toolbar/fixedToolbar/id'
 export const COMMENT_FEED_ID_PREFIX = 'comment-feed-'
 export const SUPPORT_TAB_PREFERENCE_KEY = 'support-tab-preference-key'
+export const ARTICLE_DIGEST_AUTHOR_SIDEBAR_ID_PREFIX =
+  'article-digest-author-sidebar-'

src/common/utils/connections.ts

@@ -54,7 +54,7 @@ export const unshiftConnections = ({
   newData: any
   path: string
 }) => {
-  const { edges: oldEdges, pageInfo: oldPageInfo } = _get(oldData, path)
+  const { edges: oldEdges } = _get(oldData, path)
   const {
     edges: newEdges,
     pageInfo: newPageInfo,
@@ -65,9 +65,7 @@ export const unshiftConnections = ({
     ...rest,
     pageInfo: {
       ...newPageInfo,
-      endCursor: oldPageInfo.endCursor,
-      hasNextPage: oldPageInfo.hasNextPage,
     },
-    edges: _uniqBy([...oldEdges, ...newEdges], (edge) => edge.node.id),
+    edges: _uniqBy([...newEdges, ...oldEdges], (edge) => edge.node.id),
   })
 }

src/common/utils/route.ts

@@ -117,7 +117,11 @@ type ToPathArgs =
  * (works on SSR & CSR)
  */
 export const toPath = (
-  args: ToPathArgs & { fragment?: string; search?: { [key: string]: string } }
+  args: ToPathArgs & {
+    cursor?: string
+    fragment?: string
+    search?: { [key: string]: string }
+  }
 ): {
   href: string
 } => {
@@ -132,6 +136,10 @@ export const toPath = (
 
       if (args.collectionId) {
         href = `${href}?collection=${args.collectionId}`
+
+        if (args.cursor) {
+          href = `${href}&cursor=${args.cursor}`
+        }
       }
 
       break

src/components/ArticleDigest/AuthorSidebar/index.tsx

@@ -1,7 +1,10 @@
 import classNames from 'classnames'
 import gql from 'graphql-tag'
 
-import { TEST_ID } from '~/common/enums'
+import {
+  ARTICLE_DIGEST_AUTHOR_SIDEBAR_ID_PREFIX,
+  TEST_ID,
+} from '~/common/enums'
 import { capitalizeFirstLetter, toPath } from '~/common/utils'
 import { LinkWrapper, ResponsiveImage } from '~/components'
 import { UserDigest } from '~/components/UserDigest'
@@ -14,6 +17,7 @@ import styles from './styles.module.css'
 export type ArticleDigestAuthorSidebarProps = {
   article: ArticleDigestAuthorSidebarArticleFragment
   collectionId?: string
+  cursor?: string
   titleTextSize?: ArticleDigestTitleTextSize
   titleColor?: 'greyDarker' | 'black'
   showCover?: boolean
@@ -46,7 +50,7 @@ const fragments = {
 export const ArticleDigestAuthorSidebar = ({
   article,
   collectionId,
-
+  cursor,
   titleTextSize = 15,
   titleColor = 'greyDarker',
   imageSize = 'sm',
@@ -66,6 +70,7 @@ export const ArticleDigestAuthorSidebar = ({
     page: 'articleDetail',
     article,
     collectionId,
+    cursor,
   })
 
   const headerClasses = classNames({
@@ -79,6 +84,7 @@ export const ArticleDigestAuthorSidebar = ({
     <section
       className={containerClasses}
       data-test-id={TEST_ID.DIGEST_ARTICLE_AUTHOR_SIDEBAR}
+      id={`${ARTICLE_DIGEST_AUTHOR_SIDEBAR_ID_PREFIX}${article.id}`}
       onClick={clickEvent}
     >
       <section className={styles.left}>
@@ -87,6 +93,7 @@ export const ArticleDigestAuthorSidebar = ({
             article={article}
             textSize={titleTextSize}
             collectionId={collectionId}
+            cursor={cursor}
             textWeight="normal"
             is="h3"
           />

src/components/ArticleDigest/Feed/index.tsx

@@ -37,6 +37,7 @@ export type ArticleDigestFeedProps = {
     Partial<ArticleDigestFeedArticlePrivateFragment>
   header?: React.ReactNode
   collectionId?: string
+  cursor?: string
   excludesTimeStamp?: boolean // this is only for timestamp next to the profile
 } & ArticleDigestFeedControls &
   FooterActionsProps
@@ -45,7 +46,7 @@ const BaseArticleDigestFeed = ({
   article,
   header,
   collectionId,
-
+  cursor,
   hasHeader = true,
   hasCircle = true,
   hasAuthor = true,
@@ -125,6 +126,7 @@ const BaseArticleDigestFeed = ({
               <ArticleDigestTitle
                 article={article}
                 collectionId={collectionId}
+                cursor={cursor}
                 textSize={16}
                 lineClamp={2}
                 onClick={onClick}

src/components/ArticleDigest/Title/index.tsx

@@ -16,7 +16,7 @@ export type ArticleDigestTitleIs = 'h2' | 'h3'
 type ArticleDigestTitleProps = {
   article: ArticleDigestTitleArticleFragment
   collectionId?: string
-
+  cursor?: string
   textSize?: ArticleDigestTitleTextSize
   textWeight?: ArticleDigestTitleTextWeight
   lineClamp?: boolean | 1 | 2 | 3
@@ -46,7 +46,7 @@ const fragments = {
 export const ArticleDigestTitle = ({
   article,
   collectionId,
-
+  cursor,
   textSize = 16,
   textWeight = 'medium',
   lineClamp = true,
@@ -63,6 +63,7 @@ export const ArticleDigestTitle = ({
     page: 'articleDetail',
     article,
     collectionId,
+    cursor,
   })
   const isBanned = state === 'banned'
   const isArchived = state === 'archived'

src/views/User/CollectionDetail/CollectionArticles/ViewerArticles.tsx

@@ -215,6 +215,7 @@ const ViewerArticles = ({ collection }: ViewerArticlesProps) => {
                       hasSetTopCollection={true}
                       hasSetBottomCollection={true}
                       collectionId={id}
+                      cursor={cursor}
                       collectionArticleCount={articles.totalCount}
                       onSetTopCollection={() => setHasReset(true)}
                       onSetBottomCollection={() => setHasReset(true)}

src/views/User/CollectionDetail/CollectionArticles/index.tsx

@@ -159,11 +159,12 @@ const CollectionArticles = ({ collection }: CollectionArticlesProps) => {
       <Layout.Main.Spacing hasVertical={false}>
         <List>
           {articleEdges &&
-            articleEdges.map(({ node }, i) => (
+            articleEdges.map(({ node, cursor }, i) => (
               <List.Item key={node.id}>
                 <ArticleDigestFeed
                   article={node}
                   collectionId={collection.id}
+                  cursor={cursor}
                   hasHeader={false}
                   hasEdit={true}
                   hasCircle={false}