From 23cc667692076abfc38b300fae6175d32d2ee9f3 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 19 Sep 2022 13:39:10 +0900
Subject: [PATCH] Add episodes infinite scroll

---
 front/src/pages/show/[slug].tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/front/src/pages/show/[slug].tsx b/front/src/pages/show/[slug].tsx
index 51175030..eadfe015 100644
--- a/front/src/pages/show/[slug].tsx
+++ b/front/src/pages/show/[slug].tsx
@@ -51,6 +51,7 @@ import { PersonAvatar } from "~/components/person";
 import { ErrorComponent, ErrorPage } from "~/components/errors";
 import { useState } from "react";
 import { EpisodeBox, EpisodeLine } from "~/components/episode";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 const StudioText = ({
 	studio,
@@ -260,12 +261,10 @@ const staffQuery = (slug: string): QueryIdentifier<Person> => ({
 });
 
 const ShowStaff = ({ slug }: { slug: string }) => {
-	const { data, isError, error, isFetching, hasNextPage, fetchNextPage } = useInfiniteFetch(
-		staffQuery(slug),
-	);
+	const { data, isError, error, hasNextPage, fetchNextPage } = useInfiniteFetch(staffQuery(slug));
 	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} />;
 
@@ -325,13 +324,11 @@ const episodesQuery = (slug: string, season: string | number): QueryIdentifier<E
 });
 
 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),
 	);
 	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 (data && data.pages.at(0)?.count === 0) {
@@ -343,12 +340,18 @@ const EpisodeGrid = ({ slug, season }: { slug: string; season: number }) => {
 	}
 
 	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) => (
 				<EpisodeLine key={x ? x.id : i} episode={x} />
 			))}
-			{/* <div ref={ref} /> */}
-		</Box>
+		</InfiniteScroll>
 	);
 };