load more news functionality
This commit is contained in:
parent
a07c5cb485
commit
f9b09ca969
|
@ -11,7 +11,7 @@ import {
|
||||||
} from '../../../../../contentful/tokenCategoryPage'
|
} from '../../../../../contentful/tokenCategoryPage'
|
||||||
import { fetchMangoTokenData } from '../../../../utils/mango'
|
import { fetchMangoTokenData } from '../../../../utils/mango'
|
||||||
import Category from '../../../../components/explore/Category'
|
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 RichTextDisplay from '../../../../components/rich-text/RichTextDisplay'
|
||||||
import DataDisclaimer from '../../../../components/explore/DataDisclaimer'
|
import DataDisclaimer from '../../../../components/explore/DataDisclaimer'
|
||||||
import {
|
import {
|
||||||
|
@ -19,6 +19,7 @@ import {
|
||||||
fetchNewsArticles,
|
fetchNewsArticles,
|
||||||
} from '../../../../../contentful/newsArticle'
|
} from '../../../../../contentful/newsArticle'
|
||||||
import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
|
import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
|
||||||
|
import MoreArticles from '../../../../components/explore/MoreArticles'
|
||||||
|
|
||||||
interface TokenCategoryPageParams {
|
interface TokenCategoryPageParams {
|
||||||
category: string
|
category: string
|
||||||
|
@ -76,6 +77,8 @@ async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
|
||||||
const newsArticlesPromise: Promise<NewsArticle[]> = fetchNewsArticles({
|
const newsArticlesPromise: Promise<NewsArticle[]> = fetchNewsArticles({
|
||||||
category: category,
|
category: category,
|
||||||
preview: draftMode().isEnabled,
|
preview: draftMode().isEnabled,
|
||||||
|
limit: ARTICLE_LIMIT,
|
||||||
|
skip: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
// fetch token pages from contentful where the entry contains the category (tag)
|
// fetch token pages from contentful where the entry contains the category (tag)
|
||||||
|
@ -114,6 +117,7 @@ async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
|
||||||
{newsArticles.map((article) => (
|
{newsArticles.map((article) => (
|
||||||
<NewsArticleCard article={article} key={article.articleUrl} />
|
<NewsArticleCard article={article} key={article.articleUrl} />
|
||||||
))}
|
))}
|
||||||
|
<MoreArticles category={category} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,12 +14,13 @@ import { MangoMarketsData, MangoTokenData } from '../../../../types/mango'
|
||||||
import TokenMangoStats from '../../../../components/explore/token-page/TokenMangoStats'
|
import TokenMangoStats from '../../../../components/explore/token-page/TokenMangoStats'
|
||||||
import DataDisclaimer from '../../../../components/explore/DataDisclaimer'
|
import DataDisclaimer from '../../../../components/explore/DataDisclaimer'
|
||||||
import InfoAndStats from '../../../../components/explore/token-page/InfoAndStats'
|
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 {
|
import {
|
||||||
NewsArticle,
|
NewsArticle,
|
||||||
fetchNewsArticles,
|
fetchNewsArticles,
|
||||||
} from '../../../../../contentful/newsArticle'
|
} from '../../../../../contentful/newsArticle'
|
||||||
import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
|
import NewsArticleCard from '../../../../components/explore/NewsArticleCard'
|
||||||
|
import MoreArticles from '../../../../components/explore/MoreArticles'
|
||||||
|
|
||||||
interface TokenPageParams {
|
interface TokenPageParams {
|
||||||
slug: string
|
slug: string
|
||||||
|
@ -80,6 +81,8 @@ async function TokenPage({ params }: TokenPageProps) {
|
||||||
const newsArticlesPromise: Promise<NewsArticle[]> = fetchNewsArticles({
|
const newsArticlesPromise: Promise<NewsArticle[]> = fetchNewsArticles({
|
||||||
category: symbol,
|
category: symbol,
|
||||||
preview: draftMode().isEnabled,
|
preview: draftMode().isEnabled,
|
||||||
|
limit: ARTICLE_LIMIT,
|
||||||
|
skip: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Wait for the promises to resolve
|
// Wait for the promises to resolve
|
||||||
|
@ -117,6 +120,7 @@ async function TokenPage({ params }: TokenPageProps) {
|
||||||
{newsArticles.map((article) => (
|
{newsArticles.map((article) => (
|
||||||
<NewsArticleCard article={article} key={article.articleUrl} />
|
<NewsArticleCard article={article} key={article.articleUrl} />
|
||||||
))}
|
))}
|
||||||
|
<MoreArticles category={symbol} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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
|
|
@ -49,3 +49,5 @@ export const DAILY_SECONDS = 86400
|
||||||
export const DAILY_MILLISECONDS = 86400000
|
export const DAILY_MILLISECONDS = 86400000
|
||||||
|
|
||||||
export const MAX_CONTENT_WIDTH = 'max-w-[1280px]'
|
export const MAX_CONTENT_WIDTH = 'max-w-[1280px]'
|
||||||
|
|
||||||
|
export const ARTICLE_LIMIT = 3
|
||||||
|
|
|
@ -39,10 +39,14 @@ export function parseContentfulNewsArticle(
|
||||||
interface FetchNewsArticlesOptions {
|
interface FetchNewsArticlesOptions {
|
||||||
preview: boolean
|
preview: boolean
|
||||||
category: any
|
category: any
|
||||||
|
limit: number
|
||||||
|
skip: number
|
||||||
}
|
}
|
||||||
export async function fetchNewsArticles({
|
export async function fetchNewsArticles({
|
||||||
preview,
|
preview,
|
||||||
category,
|
category,
|
||||||
|
limit,
|
||||||
|
skip,
|
||||||
}: FetchNewsArticlesOptions): Promise<NewsArticle[]> {
|
}: FetchNewsArticlesOptions): Promise<NewsArticle[]> {
|
||||||
const contentful = contentfulClient({ preview })
|
const contentful = contentfulClient({ preview })
|
||||||
|
|
||||||
|
@ -51,6 +55,8 @@ export async function fetchNewsArticles({
|
||||||
content_type: 'newsArticle',
|
content_type: 'newsArticle',
|
||||||
include: 2,
|
include: 2,
|
||||||
'fields.categories[in]': category,
|
'fields.categories[in]': category,
|
||||||
|
limit: limit,
|
||||||
|
skip: skip,
|
||||||
})
|
})
|
||||||
|
|
||||||
return newsArticlesResult.items.map(
|
return newsArticlesResult.items.map(
|
||||||
|
|
29400
tsconfig.tsbuildinfo
29400
tsconfig.tsbuildinfo
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue