68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
|
'use client';
|
||
|
|
import { v4 } from 'uuid';
|
||
|
|
import News from './News';
|
||
|
|
import MoreBtn from '../MoreBtn';
|
||
|
|
import SectionTitle from '../SectionTitle';
|
||
|
|
import { Queries } from '@/api/queries';
|
||
|
|
import { useInfiniteQuery } from '@tanstack/react-query';
|
||
|
|
import NewsSlider from './NewsSlider';
|
||
|
|
import Loader from '../Loader';
|
||
|
|
|
||
|
|
interface IProps {
|
||
|
|
title?: string;
|
||
|
|
isExtendable?: boolean;
|
||
|
|
isSlides?: boolean;
|
||
|
|
perPage?: number;
|
||
|
|
}
|
||
|
|
const NewsGrid = ({ title, isExtendable, isSlides, perPage = 8 }: IProps) => {
|
||
|
|
const { data, isLoading, isFetchingNextPage, error, hasNextPage, fetchNextPage } =
|
||
|
|
useInfiniteQuery({
|
||
|
|
queryKey: ['news', 'infinite'],
|
||
|
|
queryFn: ({ pageParam = 1 }) => Queries.getNews(pageParam, { perPage }),
|
||
|
|
getNextPageParam: (prevData) =>
|
||
|
|
prevData.meta.last_page > prevData.meta.current_page
|
||
|
|
? prevData.meta.current_page + 1
|
||
|
|
: null,
|
||
|
|
keepPreviousData: true,
|
||
|
|
});
|
||
|
|
// const { data, isLoading, isFetchingNextPage, error, hasNextPage, fetchNextPage } =
|
||
|
|
// useInfiniteQuery({
|
||
|
|
// queryKey: ['news', 'infinite'],
|
||
|
|
// queryFn: ({ pageParam = 1 }) => Queries.getNews(pageParam, { perPage }),
|
||
|
|
|
||
|
|
// keepPreviousData: true,
|
||
|
|
// });
|
||
|
|
|
||
|
|
if (isLoading) return <Loader />;
|
||
|
|
if (error) return <h1>{JSON.stringify(error)}</h1>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-8">
|
||
|
|
{title ? <SectionTitle title={title} /> : null}
|
||
|
|
{isSlides ? (
|
||
|
|
<NewsSlider data={data} />
|
||
|
|
) : (
|
||
|
|
<div className="news-grid sm:grid gap-[10px] sm:grid-rows-1 sm:items-start lg:grid-cols-4 sm:grid-cols-3 flex flex-col items-center content-center sm gap-y-6">
|
||
|
|
{data!.pages
|
||
|
|
.flatMap((data) => data.data)
|
||
|
|
.map((novelty) => (
|
||
|
|
<News news={novelty} key={v4()} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{isExtendable ? (
|
||
|
|
<div className="flex justify-center">
|
||
|
|
<MoreBtn
|
||
|
|
onClick={() => fetchNextPage()}
|
||
|
|
disabled={!hasNextPage}
|
||
|
|
isFetching={isFetchingNextPage}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NewsGrid;
|