Feat/Dual Scroll

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/components/Interaction/DualScroll/EndOfResults/index.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+import { FormattedMessage } from 'react-intl'
+
+import { capitalizeFirstLetter } from '~/common/utils'
+
+import styles from './styles.module.css'
+
+type EndOfResultsProps = {
+  message?: React.ReactNode
+  spacingTop?: 'base' | 'xLoose'
+}
+
+const EndOfResults: React.FC<EndOfResultsProps> = ({
+  message,
+  spacingTop = 'xLoose',
+}) => {
+  const containerClasses = classNames({
+    [styles.endOfResults]: true,
+    [styles[`spacingTop${capitalizeFirstLetter(spacingTop)}`]]: true,
+  })
+  return (
+    <section className={containerClasses}>
+      {typeof message === 'boolean' && message ? (
+        <FormattedMessage
+          defaultMessage="That's all"
+          id="B2As08"
+          description="src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"
+        />
+      ) : (
+        message
+      )}
+    </section>
+  )
+}
+
+export default EndOfResults

src/components/Interaction/DualScroll/EndOfResults/styles.module.css

@@ -0,0 +1,15 @@
+.endOfResults {
+  @mixin flex-center-all;
+
+  padding-bottom: var(--sp40);
+  font-size: var(--text14);
+  color: var(--color-grey);
+}
+
+.spacingTopBase {
+  padding-top: var(--sp16);
+}
+
+.spacingTopXLoose {
+  padding-top: var(--sp32);
+}

src/components/Interaction/DualScroll/index.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+
+import { SpinnerBlock, useIntersectionObserver } from '~/components'
+
+import EndOfResults from './EndOfResults'
+
+interface Props {
+  hasNextPage: boolean
+  hasPreviousPage: boolean
+  loadMore: () => Promise<any>
+  loadPrevious: () => Promise<any>
+  loader?: React.ReactNode
+  eof?: React.ReactNode
+  eofSpacingTop?: 'base' | 'xLoose'
+  scrollableAncestor?: any
+  className?: string
+}
+
+export const DualScroll: React.FC<React.PropsWithChildren<Props>> = ({
+  hasNextPage,
+  hasPreviousPage,
+  loader = <SpinnerBlock />,
+  loadMore,
+  loadPrevious,
+  eof,
+  eofSpacingTop,
+  scrollableAncestor,
+  children,
+  className,
+}) => {
+  const [isPrevLoading, setIsPrevLoading] = useState(false)
+
+  // Only use intersection observer for bottom loading
+  const bottomObserver = useIntersectionObserver()
+
+  // Handle bottom intersection
+  useEffect(() => {
+    if (bottomObserver.isIntersecting && hasNextPage) {
+      loadMore()
+    }
+  }, [bottomObserver.isIntersecting])
+
+  // Handle scroll for top loading
+  const handleScroll = async (event: React.UIEvent<HTMLDivElement>) => {
+    const element = event.currentTarget
+    if (element.scrollTop === 0 && hasPreviousPage) {
+      setIsPrevLoading(true)
+      await loadPrevious()
+      setIsPrevLoading(false)
+    }
+  }
+
+  return (
+    <div
+      onScroll={handleScroll}
+      style={{ overflow: 'auto' }}
+      className={className}
+    >
+      {/* Top loader */}
+      {hasPreviousPage && isPrevLoading ? loader : null}
+
+      {/* Main content */}
+      {children}
+
+      {/* Bottom loader */}
+      {hasNextPage && <span ref={bottomObserver.ref} />}
+      {hasNextPage && loader}
+
+      {!hasNextPage && eof && (
+        <EndOfResults message={eof} spacingTop={eofSpacingTop} />
+      )}
+    </div>
+  )
+}

src/components/Interaction/index.ts

@@ -1,3 +1,4 @@
 export * from './Card'
+export * from './DualScroll'
 export * from './InfiniteScroll'
 export * from './LinkWrapper'

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

@@ -3,18 +3,35 @@ import gql from 'graphql-tag'
 import { ArticleDigestSidebar } from '~/components'
 
 export const AUTHOR_SIDEBAR_COLLECTION = gql`
-  query AuthorSidebarCollection($id: ID!, $after: String) {
+  query AuthorSidebarCollection(
+    $id: ID!
+    $before: String
+    $after: String
+    $includeBefore: Boolean
+    $includeAfter: Boolean
+  ) {
     node(input: { id: $id }) {
       id
       ... on Collection {
         id
         title
         description
-        articles(input: { first: 40, after: $after }) {
+        articles(
+          input: {
+            last: 20
+            before: $before
+            first: 20
+            after: $after
+            includeBefore: $includeBefore
+            includeAfter: $includeAfter
+          }
+        ) {
           totalCount
           pageInfo {
+            startCursor
             endCursor
             hasNextPage
+            hasPreviousPage
           }
           edges {
             cursor