load more news functionality

app/(pages)/explore/categories/[category]/page.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../../../../contentful/tokenCategoryPage'
 import { fetchMangoTokenData } from '../../../../utils/mango'
 import Category from '../../../../components/explore/Category'
-import { MAX_CONTENT_WIDTH } from '../../../../utils/constants'
+import { ARTICLE_LIMIT, MAX_CONTENT_WIDTH } from '../../../../utils/constants'
 import RichTextDisplay from '../../../../components/rich-text/RichTextDisplay'
 import DataDisclaimer from '../../../../components/explore/DataDisclaimer'
 import {
@@ -19,6 +19,7 @@ import {
   fetchNewsArticles,
 } from '../../../../../contentful/newsArticle'
 import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
+import MoreArticles from '../../../../components/explore/MoreArticles'
 
 interface TokenCategoryPageParams {
   category: string
@@ -76,6 +77,8 @@ async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
   const newsArticlesPromise: Promise<NewsArticle[]> = fetchNewsArticles({
     category: category,
     preview: draftMode().isEnabled,
+    limit: ARTICLE_LIMIT,
+    skip: 0,
   })
 
   // fetch token pages from contentful where the entry contains the category (tag)
@@ -114,6 +117,7 @@ async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
               {newsArticles.map((article) => (
                 <NewsArticleCard article={article} key={article.articleUrl} />
               ))}
+              <MoreArticles category={category} />
             </div>
           </div>
         </div>

app/(pages)/explore/tokens/[slug]/page.tsx

@@ -14,12 +14,13 @@ import { MangoMarketsData, MangoTokenData } from '../../../../types/mango'
 import TokenMangoStats from '../../../../components/explore/token-page/TokenMangoStats'
 import DataDisclaimer from '../../../../components/explore/DataDisclaimer'
 import InfoAndStats from '../../../../components/explore/token-page/InfoAndStats'
-import { MAX_CONTENT_WIDTH } from '../../../../utils/constants'
+import { ARTICLE_LIMIT, MAX_CONTENT_WIDTH } from '../../../../utils/constants'
 import {
   NewsArticle,
   fetchNewsArticles,
 } from '../../../../../contentful/newsArticle'
 import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
+import MoreArticles from '../../../../components/explore/MoreArticles'
 
 interface TokenPageParams {
   slug: string
@@ -80,6 +81,8 @@ async function TokenPage({ params }: TokenPageProps) {
   const newsArticlesPromise: Promise<NewsArticle[]> = fetchNewsArticles({
     category: symbol,
     preview: draftMode().isEnabled,
+    limit: ARTICLE_LIMIT,
+    skip: 0,
   })
 
   // Wait for the promises to resolve
@@ -117,6 +120,7 @@ async function TokenPage({ params }: TokenPageProps) {
               {newsArticles.map((article) => (
                 <NewsArticleCard article={article} key={article.articleUrl} />
               ))}
+              <MoreArticles category={symbol} />
             </div>
           </div>
         </div>

app/components/explore/MoreArticles.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { fetchNewsArticles } from '../../../contentful/newsArticle'
+import { ARTICLE_LIMIT } from '../../utils/constants'
+import NewsArticleCard from './NewsArticleCard'
+import { useMemo } from 'react'
+
+const fetchNewArticles = async (category, skip): Promise<Array<any>> => {
+  const newArticles = await fetchNewsArticles({
+    preview: false,
+    category: category,
+    limit: ARTICLE_LIMIT,
+    skip: skip,
+  })
+
+  return newArticles ?? []
+}
+
+const MoreArticles = ({ category }: { category: string }) => {
+  const { data: nextArticles, fetchNextPage: fetchNextArticles } =
+    useInfiniteQuery({
+      queryKey: ['next-articles', category],
+      initialPageParam: 0,
+      queryFn: ({ pageParam }) => fetchNewArticles(category, pageParam),
+      getNextPageParam: (lastPage, allPages) => allPages.length * ARTICLE_LIMIT,
+    })
+
+  const handleLoadMore = () => {
+    fetchNextArticles()
+  }
+
+  const newArticles = useMemo(() => {
+    const articles = nextArticles?.pages.slice(1)
+    return articles?.flat()
+  }, [nextArticles])
+
+  const showLoadMore = useMemo(() => {
+    const lastArticles = nextArticles?.pages?.[nextArticles?.pages?.length - 1]
+    if (lastArticles?.length === ARTICLE_LIMIT || !lastArticles) return true
+    return false
+  }, [nextArticles])
+
+  return (
+    <>
+      {newArticles?.length
+        ? newArticles.map((article) => (
+            <NewsArticleCard article={article} key={article.articleUrl} />
+          ))
+        : null}
+      <div className="mt-4 col-span-3 flex justify-center">
+        {showLoadMore ? (
+          <button
+            className="text-th-fgd-2 md:hover:text-th-fgd-4 font-bold"
+            onClick={handleLoadMore}
+          >
+            Load more
+          </button>
+        ) : (
+          <p className="text-sm">No news to show...</p>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default MoreArticles

app/utils/constants.ts

@@ -49,3 +49,5 @@ export const DAILY_SECONDS = 86400
 export const DAILY_MILLISECONDS = 86400000
 
 export const MAX_CONTENT_WIDTH = 'max-w-[1280px]'
+
+export const ARTICLE_LIMIT = 3

contentful/newsArticle.ts

@@ -39,10 +39,14 @@ export function parseContentfulNewsArticle(
 interface FetchNewsArticlesOptions {
   preview: boolean
   category: any
+  limit: number
+  skip: number
 }
 export async function fetchNewsArticles({
   preview,
   category,
+  limit,
+  skip,
 }: FetchNewsArticlesOptions): Promise<NewsArticle[]> {
   const contentful = contentfulClient({ preview })
 
@@ -51,6 +55,8 @@ export async function fetchNewsArticles({
       content_type: 'newsArticle',
       include: 2,
       'fields.categories[in]': category,
+      limit: limit,
+      skip: skip,
     })
 
   return newsArticlesResult.items.map(