implemented infinite scroll

webUI/react/src/screens/MangaList.tsx

@@ -7,7 +7,8 @@ export default function MangaList(props: { popular: boolean }) {
     const { sourceId } = useParams<{sourceId: string}>();
     const { setTitle } = useContext(NavBarTitle);
     const [mangas, setMangas] = useState<IManga[]>([]);
-    const [lastPageNum] = useState<number>(1);
+    const [hasNextPage, setHasNextPage] = useState<boolean>(false);
+    const [lastPageNum, setLastPageNum] = useState<number>(1);
 
     useEffect(() => {
         fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}`)
@@ -19,10 +20,22 @@ export default function MangaList(props: { popular: boolean }) {
         const sourceType = props.popular ? 'popular' : 'latest';
         fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}/${lastPageNum}`)
             .then((response) => response.json())
-            .then((data: IManga[]) => setMangas(
-                data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id })),
-            ));
-    }, []);
+            .then((data: { mangaList: IManga[], hasNextPage: boolean }) => {
+                setMangas([
+                    ...mangas,
+                    ...data.mangaList.map((it) => ({
+                        title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id,
+                    }))]);
+                setHasNextPage(data.hasNextPage);
+            });
+    }, [lastPageNum]);
 
-    return <MangaGrid mangas={mangas} />;
+    return (
+        <MangaGrid
+            mangas={mangas}
+            hasNextPage={hasNextPage}
+            lastPageNum={lastPageNum}
+            setLastPageNum={setLastPageNum}
+        />
+    );
 }