Add pagination to cell and mod lists

Speeds up showing and hiding of the sidebar.

components/CellList.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import MiniSearch from "minisearch";
+import ReactPaginate from "react-paginate";
 
 import styles from "../styles/CellList.module.css";
 import type { CellCoord } from "./ModData";
 
+const PAGE_SIZE = 100;
+
 type Props = {
   cells: CellCoord[];
 };
@@ -32,6 +35,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
 
   const [filter, setFilter] = useState<string>("");
   const [filterResults, setFilterResults] = useState<Set<string>>(new Set());
+  const [page, setPage] = useState<number>(0);
 
   const filteredCells = cells
     .filter((cell) => !filter || filterResults.has(`${cell.x},${cell.y}`))
@@ -45,6 +49,11 @@ const CellList: React.FC<Props> = ({ cells }) => {
     }
   }, [filter]);
 
+  useEffect(() => {
+    setPage(0);
+    document.getElementById("sidebar")?.scrollTo(0, 0);
+  }, [filterResults]);
+
   return (
     filteredCells && (
       <>
@@ -64,7 +73,9 @@ const CellList: React.FC<Props> = ({ cells }) => {
           <hr />
         </div>
         <ul className={styles["cell-list"]}>
-          {filteredCells.map((cell) => (
+          {filteredCells
+            .slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+            .map((cell) => (
               <li
                 key={`cell-${cell.x},${cell.y}`}
                 className={styles["cell-list-item"]}
@@ -72,7 +83,9 @@ const CellList: React.FC<Props> = ({ cells }) => {
                 <div className={styles["cell-title"]}>
                   <strong>
                     <Link
-                    href={`/?cell=${encodeURIComponent(`${cell.x},${cell.y}`)}`}
+                      href={`/?cell=${encodeURIComponent(
+                        `${cell.x},${cell.y}`
+                      )}`}
                     >
                       <a>
                         {cell.x}, {cell.y}
@@ -83,6 +96,23 @@ const CellList: React.FC<Props> = ({ cells }) => {
               </li>
             ))}
         </ul>
+        <ReactPaginate
+          breakLabel="..."
+          nextLabel=">"
+          forcePage={page}
+          onPageChange={(event) => {
+            setPage(event.selected);
+            document.getElementById("sidebar")?.scrollTo(0, 0);
+          }}
+          pageRangeDisplayed={3}
+          marginPagesDisplayed={2}
+          pageCount={Math.ceil(filteredCells.length / PAGE_SIZE)}
+          previousLabel="<"
+          renderOnZeroPageCount={() => null}
+          className={styles.pagination}
+          activeClassName={styles["active-page"]}
+          hrefBuilder={() => "#"}
+        />
       </>
     )
   );

components/ModList.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import MiniSearch from "minisearch";
 import Link from "next/link";
 import useSWRImmutable from "swr/immutable";
+import ReactPaginate from "react-paginate";
 
 import styles from "../styles/ModList.module.css";
 import type { Mod } from "./CellData";
@@ -21,6 +22,7 @@ import {
 import { useAppDispatch, useAppSelector } from "../lib/hooks";
 
 const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
+const PAGE_SIZE = 50;
 
 type Props = {
   mods: Mod[];
@@ -33,6 +35,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
   const { sortBy, sortAsc, filter, category, includeTranslations } =
     useAppSelector((state) => state.modListFilters);
   const [filterResults, setFilterResults] = useState<Set<number>>(new Set());
+  const [page, setPage] = useState<number>(0);
 
   const { data: cellCounts, error: cellCountsError } = useSWRImmutable(
     `https://mods.modmapper.com/mod_cell_counts.json`,
@@ -106,6 +109,11 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
     }
   }, [filter]);
 
+  useEffect(() => {
+    setPage(0);
+    document.getElementById("sidebar")?.scrollTo(0, 0);
+  }, [filterResults, category, includeTranslations, sortBy, sortAsc]);
+
   return (
     mods && (
       <>
@@ -219,7 +227,9 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
           <hr />
         </div>
         <ul className={styles["mod-list"]}>
-          {modsWithCounts.map((mod) => (
+          {modsWithCounts
+            .slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+            .map((mod) => (
               <li key={mod.id} className={styles["mod-list-item"]}>
                 <div className={styles["mod-title"]}>
                   <strong>
@@ -319,6 +329,23 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
               </li>
             ))}
         </ul>
+        <ReactPaginate
+          breakLabel="..."
+          nextLabel=">"
+          forcePage={page}
+          onPageChange={(event) => {
+            setPage(event.selected);
+            document.getElementById("sidebar")?.scrollTo(0, 0);
+          }}
+          pageRangeDisplayed={3}
+          marginPagesDisplayed={2}
+          pageCount={Math.ceil(modsWithCounts.length / PAGE_SIZE)}
+          previousLabel="<"
+          renderOnZeroPageCount={() => null}
+          className={styles.pagination}
+          activeClassName={styles["active-page"]}
+          hrefBuilder={() => "#"}
+        />
       </>
     )
   );

components/Sidebar.tsx

@@ -100,6 +100,7 @@ const Sidebar: React.FC<Props> = ({
         <div
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
+          id="sidebar"
         >
           <div className={styles["sidebar-content"]}>
             <div className={styles["sidebar-header"]}>
@@ -123,6 +124,7 @@ const Sidebar: React.FC<Props> = ({
         <div
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
+          id="sidebar"
         >
           <div className={styles["sidebar-content"]}>
             <div className={styles["sidebar-header"]}>
@@ -140,6 +142,7 @@ const Sidebar: React.FC<Props> = ({
         <div
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
+          id="sidebar"
         >
           <div className={styles["sidebar-content"]}>
             <div className={styles["sidebar-header"]}>
@@ -161,6 +164,7 @@ const Sidebar: React.FC<Props> = ({
         <div
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
+          id="sidebar"
         >
           <div className={styles["sidebar-content"]}>
             <h1 className={styles.title}>Modmapper</h1>

package-lock.json

@@ -18,6 +18,7 @@
         "next": "12.1.1-canary.15",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-paginate": "^8.1.3",
         "react-redux": "^7.2.6",
         "skyrim-cell-dump-wasm": "0.1.0",
         "swr": "^1.1.2"
@@ -2949,6 +2950,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-paginate": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.1.3.tgz",
+      "integrity": "sha512-zBp80DBRcaeBnAeHUfbGKD0XHfbGNUolQ+S60Ymfs8o7rusYaJYZMAt1j93ADDNLlzRmJ0tMF/NeTlcdKf7dlQ==",
+      "dependencies": {
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -5619,6 +5631,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-paginate": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.1.3.tgz",
+      "integrity": "sha512-zBp80DBRcaeBnAeHUfbGKD0XHfbGNUolQ+S60Ymfs8o7rusYaJYZMAt1j93ADDNLlzRmJ0tMF/NeTlcdKf7dlQ==",
+      "requires": {
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",

package.json

@@ -21,6 +21,7 @@
     "next": "12.1.1-canary.15",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-paginate": "^8.1.3",
     "react-redux": "^7.2.6",
     "skyrim-cell-dump-wasm": "0.1.0",
     "swr": "^1.1.2"

styles/CellList.module.css

@@ -48,3 +48,27 @@
 .filter {
   width: 175px;
 }
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.pagination li {
+  padding: 4px;
+}
+
+.pagination li a {
+  cursor: pointer;
+  user-select: none;
+}
+
+.active-page a {
+  color: black;
+  text-decoration: none;
+}

styles/ModList.module.css

@@ -107,3 +107,27 @@
 .desc {
   transform: rotate(90deg);
 }
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.pagination li {
+  padding: 4px;
+}
+
+.pagination li a {
+  cursor: pointer;
+  user-select: none;
+}
+
+.active-page a {
+  color: black;
+  text-decoration: none;
+}