67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
|
import { Queries } from '@/api/queries';
|
||
|
|
import Aside from '@/components/Aside';
|
||
|
|
import Categories from '@/components/Categories';
|
||
|
|
import SearchBar from '@/components/SearchBar';
|
||
|
|
import VideoList from '@/components/VideoList';
|
||
|
|
import Hydrate from '@/utils/HydrateClient';
|
||
|
|
import getQueryClient from '@/utils/getQueryClient';
|
||
|
|
import { dehydrate } from '@tanstack/react-query';
|
||
|
|
|
||
|
|
export async function generateStaticParams() {
|
||
|
|
const categories = await Queries.getCategories();
|
||
|
|
|
||
|
|
return categories.data.map((category) => ({
|
||
|
|
category_id: String(category.id),
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
const Treasury = async () => {
|
||
|
|
const queryClient = getQueryClient();
|
||
|
|
await queryClient.prefetchQuery({
|
||
|
|
queryKey: ['categories'],
|
||
|
|
queryFn: () => Queries.getCategories(),
|
||
|
|
});
|
||
|
|
await queryClient.prefetchQuery({
|
||
|
|
queryKey: ['channels'],
|
||
|
|
queryFn: () => Queries.getChannels(),
|
||
|
|
});
|
||
|
|
|
||
|
|
await queryClient.prefetchInfiniteQuery({
|
||
|
|
queryKey: ['videos', 'infinite', ''],
|
||
|
|
queryFn: ({ pageParam = 1 }) =>
|
||
|
|
Queries.getVideos(
|
||
|
|
'?' +
|
||
|
|
String(
|
||
|
|
new URLSearchParams({
|
||
|
|
page: pageParam,
|
||
|
|
per_page: '8',
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
});
|
||
|
|
|
||
|
|
const dehydratedState = dehydrate(queryClient);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="treasury relative">
|
||
|
|
<div className="container">
|
||
|
|
<div className="treasury-inner pt-8 pb-14">
|
||
|
|
<h1 className="hidden">Treasury</h1>
|
||
|
|
<Hydrate state={dehydratedState}>
|
||
|
|
<div className="treasury-wrapper flex md:flex-row gap-x-8 flex-col ">
|
||
|
|
<Aside line />
|
||
|
|
<div className="treasury-top flex flex-col gap-6 w-full">
|
||
|
|
<SearchBar />
|
||
|
|
<Categories />
|
||
|
|
<VideoList isExtendable />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Hydrate>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Treasury;
|