add pagination to library and fix some prettier issues (#237)

Co-authored-by: akxer <>

.gitignore

@@ -2,5 +2,6 @@ node_modules/
 .eslintcache
 .vscode
 .env
+.idea
 
 build/*

src/components/MangaGrid.tsx

@@ -23,7 +23,7 @@ export interface IMangaGridProps {
     lastPageNum: number;
     setLastPageNum: (lastPageNum: number) => void;
     gridLayout?: GridLayout;
-    horisontal?: boolean | undefined;
+    horizontal?: boolean | undefined;
     noFaces?: boolean | undefined;
     inLibraryIndicator?: boolean;
 }
@@ -38,7 +38,7 @@ const MangaGrid: React.FC<IMangaGridProps> = (props) => {
         lastPageNum,
         setLastPageNum,
         gridLayout,
-        horisontal,
+        horizontal,
         noFaces,
         inLibraryIndicator,
     } = props;
@@ -113,7 +113,7 @@ const MangaGrid: React.FC<IMangaGridProps> = (props) => {
                 container
                 spacing={1}
                 style={
-                    horisontal
+                    horizontal
                         ? {
                               margin: 0,
                               width: '100%',

src/components/library/LibraryMangaGrid.tsx

@@ -6,10 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
-import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
+import MangaGrid from 'components/MangaGrid';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { useMediaQuery, useTheme } from '@mui/material';
 
 const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
 
@@ -90,37 +91,51 @@ const sortManga = (
     return result;
 };
 
-const LibraryMangaGrid: React.FC<IMangaGridProps & { lastLibraryUpdate: number }> = ({
+interface LibraryMangaGridProps {
+    mangas: IMangaCard[];
+    isLoading: boolean;
+    message?: string;
+}
+
+const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: number }> = ({
     mangas,
     isLoading,
-    hasNextPage,
-    lastPageNum,
-    setLastPageNum,
     message,
     lastLibraryUpdate,
 }) => {
     const [query] = useQueryParam('query', StringParam);
     const { options } = useLibraryOptionsContext();
     const { unread, downloaded } = options;
+    const [filteredPaginatedMangas, setFilteredPaginatedMangas] = useState<IMangaCard[]>([]);
+    const [sortedManga, setSortedManga] = useState<IMangaCard[]>([]);
+    const [filteredManga, setFilteredManga] = useState<IMangaCard[]>([]);
+    const totalPages = (mangas ?? []).length / 10;
+    const theme = useTheme();
+    const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));
+    const defaultPageNumber = isLargeScreen ? 4 : 1;
+    const [lastPageNum, setLastPageNum] = useState<number>(defaultPageNumber);
+    useEffect(() => {
+        setFilteredManga(filterManga(mangas, query, unread, downloaded));
+        setLastPageNum(defaultPageNumber);
+        window.scrollTo(0, 0);
+    }, [mangas, query, unread, downloaded]);
 
-    const sortedManga = useMemo(
+    useEffect(() => {
-        () => sortManga(mangas, options.sorts, options.sortDesc),
+        setSortedManga(sortManga(filteredManga, options.sorts, options.sortDesc));
-        [mangas, lastLibraryUpdate, options.sorts, options.sortDesc],
+    }, [filteredManga, lastLibraryUpdate, options.sorts, options.sortDesc]);
-    );
 
-    const filteredManga = useMemo(
+    useEffect(() => {
-        () => filterManga(sortedManga, query, unread, downloaded),
+        setFilteredPaginatedMangas((sortedManga ?? []).slice(0, lastPageNum * 10));
-        [sortedManga, lastLibraryUpdate, query, unread, downloaded],
+    }, [lastPageNum, sortedManga]);
-    );
 
     const showFilteredOutMessage =
         (unread != null || downloaded != null || query) && filteredManga.length === 0 && mangas.length > 0;
 
     return (
         <MangaGrid
-            mangas={filteredManga}
+            mangas={filteredPaginatedMangas}
             isLoading={isLoading}
-            hasNextPage={hasNextPage}
+            hasNextPage={lastPageNum < totalPages}
             lastPageNum={lastPageNum}
             setLastPageNum={setLastPageNum}
             message={showFilteredOutMessage ? FILTERED_OUT_MESSAGE : message}

src/screens/Library.tsx

@@ -51,10 +51,6 @@ export default function Library() {
         };
     }, []);
 
-    // a hack so MangaGrid doesn't stop working. I won't change it in case
-    // if I do manga pagination for library..
-    const [lastPageNum, setLastPageNum] = useState<number>(1);
-
     const handleTabChange = (newTab: number) => {
         setTabSearchParam(newTab === 0 ? undefined : newTab);
     };
@@ -76,9 +72,6 @@ export default function Library() {
             <LibraryMangaGrid
                 mangas={mangas}
                 lastLibraryUpdate={lastLibraryUpdate}
-                hasNextPage={false}
-                lastPageNum={lastPageNum}
-                setLastPageNum={setLastPageNum}
                 message="Your Library is empty"
                 isLoading={activeTab != null && mangaLoading}
             />
@@ -117,9 +110,6 @@ export default function Library() {
                             <LibraryMangaGrid
                                 mangas={mangas}
                                 lastLibraryUpdate={lastLibraryUpdate}
-                                hasNextPage={false}
-                                lastPageNum={lastPageNum}
-                                setLastPageNum={setLastPageNum}
                                 message="Category is Empty"
                                 isLoading={mangaLoading}
                             />

src/screens/SearchAll.tsx

@@ -211,7 +211,7 @@ const SearchAll: React.FC = () => {
                                 hasNextPage={false}
                                 lastPageNum={lastPageNum}
                                 setLastPageNum={setLastPageNum}
-                                horisontal
+                                horizontal
                                 noFaces
                                 message={fetched[id] ? 'No manga was found!' : undefined}
                                 inLibraryIndicator