Skip to content

Commit

Permalink
load more news functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
saml33 committed Jan 19, 2024
1 parent a07c5cb commit f9b09ca
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 29,401 deletions.
6 changes: 5 additions & 1 deletion app/(pages)/explore/categories/[category]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ 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 {
NewsArticle,
fetchNewsArticles,
} from '../../../../../contentful/newsArticle'
import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
import MoreArticles from '../../../../components/explore/MoreArticles'

interface TokenCategoryPageParams {
category: string
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -114,6 +117,7 @@ async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
{newsArticles.map((article) => (
<NewsArticleCard article={article} key={article.articleUrl} />
))}
<MoreArticles category={category} />
</div>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion app/(pages)/explore/tokens/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -117,6 +120,7 @@ async function TokenPage({ params }: TokenPageProps) {
{newsArticles.map((article) => (
<NewsArticleCard article={article} key={article.articleUrl} />
))}
<MoreArticles category={symbol} />
</div>
</div>
</div>
Expand Down
67 changes: 67 additions & 0 deletions app/components/explore/MoreArticles.tsx
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions app/utils/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
6 changes: 6 additions & 0 deletions contentful/newsArticle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 })

Expand All @@ -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(
Expand Down
Loading

1 comment on commit f9b09ca

@vercel
Copy link

@vercel vercel bot commented on f9b09ca Jan 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.