Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add episodes infinite scroll

Browse Source
This commit is contained in:
Zoe Roux 2022-09-19 13:39:10 +09:00
parent f95d8b565e
commit 23cc667692
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/pages/show/[slug].tsx
View File

@ -51,6 +51,7 @@ import { PersonAvatar } from "~/components/person";
import { ErrorComponent, ErrorPage } from "~/components/errors"; import { ErrorComponent, ErrorPage } from "~/components/errors";
import { useState } from "react"; import { useState } from "react";
import { EpisodeBox, EpisodeLine } from "~/components/episode"; import { EpisodeBox, EpisodeLine } from "~/components/episode";
import InfiniteScroll from "react-infinite-scroll-component";
const StudioText = ({ const StudioText = ({
studio, studio,
@ -260,12 +261,10 @@ const staffQuery = (slug: string): QueryIdentifier<Person> => ({
}); });
const ShowStaff = ({ slug }: { slug: string }) => { const ShowStaff = ({ slug }: { slug: string }) => {
const { data, isError, error, isFetching, hasNextPage, fetchNextPage } = useInfiniteFetch( const { data, isError, error, hasNextPage, fetchNextPage } = useInfiniteFetch(staffQuery(slug));
staffQuery(slug),
);
const { t } = useTranslation("browse"); const { t } = useTranslation("browse");
// TODO: Unsure that the fetchNextPage is only used when needed (currently called way too mutch) // TODO: handle infinite scroll
if (isError) return <ErrorComponent {...error} />; if (isError) return <ErrorComponent {...error} />;
@ -325,13 +324,11 @@ const episodesQuery = (slug: string, season: string | number): QueryIdentifier<E
}); });
const EpisodeGrid = ({ slug, season }: { slug: string; season: number }) => { const EpisodeGrid = ({ slug, season }: { slug: string; season: number }) => {
const { data, isError, error, isFetching, hasNextPage, fetchNextPage } = useInfiniteFetch( const { data, isError, error, hasNextPage, fetchNextPage } = useInfiniteFetch(
episodesQuery(slug, season), episodesQuery(slug, season),
); );
const { t } = useTranslation("browse"); const { t } = useTranslation("browse");
// TODO: Unsure that the fetchNextPage is only used when needed (currently called way too mutch)
if (isError) return <ErrorComponent {...error} />; if (isError) return <ErrorComponent {...error} />;
if (data && data.pages.at(0)?.count === 0) { if (data && data.pages.at(0)?.count === 0) {
@ -343,12 +340,18 @@ const EpisodeGrid = ({ slug, season }: { slug: string; season: number }) => {
} }
return ( return (
<Box sx={{ display: "flex", flexDirection: "column", backgroundColor: "background.paper" }}> <InfiniteScroll
dataLength={data?.pages.flatMap((x) => x.items).length ?? 0}
next={fetchNextPage}
hasMore={hasNextPage!}
loader={[...Array(12)].map((_, i) => (
<EpisodeLine key={i} />
))}
>
{(data ? data.pages.flatMap((x) => x.items) : [...Array(12)]).map((x, i) => ( {(data ? data.pages.flatMap((x) => x.items) : [...Array(12)]).map((x, i) => (
<EpisodeLine key={x ? x.id : i} episode={x} /> <EpisodeLine key={x ? x.id : i} episode={x} />
))} ))}
{/* <div ref={ref} /> */} </InfiniteScroll>
</Box>
); );
}; };