Add pagination to cell and mod lists

Speeds up showing and hiding of the sidebar.
2022-08-28 02:27:53 -04:00 · 2022-08-28 02:27:53 -04:00 · 5491894e00
commit 5491894e00
parent 47e95f4d59
7 changed files with 242 additions and 112 deletions
--- a/components/CellList.tsx
+++ b/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,25 +73,46 @@ const CellList: React.FC<Props> = ({ cells }) => {
          <hr />
        </div>
        <ul className={styles["cell-list"]}>
-          {filteredCells.map((cell) => (
-            <li
-              key={`cell-${cell.x},${cell.y}`}
-              className={styles["cell-list-item"]}
-            >
-              <div className={styles["cell-title"]}>
-                <strong>
-                  <Link
-                    href={`/?cell=${encodeURIComponent(`${cell.x},${cell.y}`)}`}
-                  >
-                    <a>
-                      {cell.x}, {cell.y}
-                    </a>
-                  </Link>
-                </strong>
-              </div>
-            </li>
-          ))}
+          {filteredCells
+            .slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+            .map((cell) => (
+              <li
+                key={`cell-${cell.x},${cell.y}`}
+                className={styles["cell-list-item"]}
+              >
+                <div className={styles["cell-title"]}>
+                  <strong>
+                    <Link
+                      href={`/?cell=${encodeURIComponent(
+                        `${cell.x},${cell.y}`
+                      )}`}
+                    >
+                      <a>
+                        {cell.x}, {cell.y}
+                      </a>
+                    </Link>
+                  </strong>
+                </div>
+              </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={() => "#"}
+        />
      </>
    )
  );
--- a/components/ModList.tsx
+++ b/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,106 +227,125 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
          <hr />
        </div>
        <ul className={styles["mod-list"]}>
-          {modsWithCounts.map((mod) => (
-            <li key={mod.id} className={styles["mod-list-item"]}>
-              <div className={styles["mod-title"]}>
-                <strong>
-                  <Link href={`/?mod=${mod.nexus_mod_id}`}>
-                    <a>{mod.name}</a>
-                  </Link>
-                </strong>
-              </div>
-              <div>
-                <a
-                  href={`${NEXUS_MODS_URL}/mods/${mod.nexus_mod_id}`}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  View on Nexus Mods
-                </a>
-              </div>
-              <div>
-                <strong>Category:&nbsp;</strong>
-                <a
-                  href={`${NEXUS_MODS_URL}/mods/categories/${mod.category_id}`}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  {mod.category_name}
-                </a>
-              </div>
-              <div>
-                <strong>Author:&nbsp;</strong>
-                <a
-                  href={`${NEXUS_MODS_URL}/users/${mod.author_id}`}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  {mod.author_name}
-                </a>
-              </div>
-              <div>
-                <strong>Uploaded:</strong>{" "}
-                {format(new Date(mod.first_upload_at), "d MMM y")}
-              </div>
-              <div>
-                <strong>Last Update:</strong>{" "}
-                {format(new Date(mod.last_update_at), "d MMM y")}
-              </div>
-              <div>
-                <strong>Total Downloads:</strong>{" "}
-                {numberFmt.format(mod.total_downloads)}
-              </div>
-              <div>
-                <strong>Unique Downloads:</strong>{" "}
-                {numberFmt.format(mod.unique_downloads)}
-              </div>
-              {cellCounts && (
-                <div>
-                  <strong>Exterior Cells Edited:</strong>{" "}
-                  {numberFmt.format(mod.exterior_cells_edited)}
+          {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>
+                    <Link href={`/?mod=${mod.nexus_mod_id}`}>
+                      <a>{mod.name}</a>
+                    </Link>
+                  </strong>
                </div>
-              )}
-              <ul className={styles["file-list"]}>
-                {files &&
-                  files
-                    .filter((file) => file.mod_id === mod.id)
-                    .sort((a, b) => b.nexus_file_id - a.nexus_file_id)
-                    .map((file) => (
-                      <li key={file.id}>
-                        <div>
-                          <strong>File:</strong> {file.name}
-                        </div>
-                        {file.mod_version && (
+                <div>
+                  <a
+                    href={`${NEXUS_MODS_URL}/mods/${mod.nexus_mod_id}`}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    View on Nexus Mods
+                  </a>
+                </div>
+                <div>
+                  <strong>Category:&nbsp;</strong>
+                  <a
+                    href={`${NEXUS_MODS_URL}/mods/categories/${mod.category_id}`}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    {mod.category_name}
+                  </a>
+                </div>
+                <div>
+                  <strong>Author:&nbsp;</strong>
+                  <a
+                    href={`${NEXUS_MODS_URL}/users/${mod.author_id}`}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    {mod.author_name}
+                  </a>
+                </div>
+                <div>
+                  <strong>Uploaded:</strong>{" "}
+                  {format(new Date(mod.first_upload_at), "d MMM y")}
+                </div>
+                <div>
+                  <strong>Last Update:</strong>{" "}
+                  {format(new Date(mod.last_update_at), "d MMM y")}
+                </div>
+                <div>
+                  <strong>Total Downloads:</strong>{" "}
+                  {numberFmt.format(mod.total_downloads)}
+                </div>
+                <div>
+                  <strong>Unique Downloads:</strong>{" "}
+                  {numberFmt.format(mod.unique_downloads)}
+                </div>
+                {cellCounts && (
+                  <div>
+                    <strong>Exterior Cells Edited:</strong>{" "}
+                    {numberFmt.format(mod.exterior_cells_edited)}
+                  </div>
+                )}
+                <ul className={styles["file-list"]}>
+                  {files &&
+                    files
+                      .filter((file) => file.mod_id === mod.id)
+                      .sort((a, b) => b.nexus_file_id - a.nexus_file_id)
+                      .map((file) => (
+                        <li key={file.id}>
                          <div>
-                            <strong>Version:</strong> {file.mod_version}
+                            <strong>File:</strong> {file.name}
                          </div>
-                        )}
-                        {file.version && file.mod_version !== file.version && (
+                          {file.mod_version && (
+                            <div>
+                              <strong>Version:</strong> {file.mod_version}
+                            </div>
+                          )}
+                          {file.version && file.mod_version !== file.version && (
+                            <div>
+                              <strong>File Version:</strong> {file.version}
+                            </div>
+                          )}
+                          {file.category && (
+                            <div>
+                              <strong>Category:</strong> {file.category}
+                            </div>
+                          )}
                          <div>
-                            <strong>File Version:</strong> {file.version}
+                            <strong>Size:</strong> {formatBytes(file.size)}
                          </div>
-                        )}
-                        {file.category && (
-                          <div>
-                            <strong>Category:</strong> {file.category}
-                          </div>
-                        )}
-                        <div>
-                          <strong>Size:</strong> {formatBytes(file.size)}
-                        </div>
-                        {file.uploaded_at && (
-                          <div>
-                            <strong>Uploaded:</strong>{" "}
-                            {format(new Date(file.uploaded_at), "d MMM y")}
-                          </div>
-                        )}
-                      </li>
-                    ))}
-              </ul>
-            </li>
-          ))}
+                          {file.uploaded_at && (
+                            <div>
+                              <strong>Uploaded:</strong>{" "}
+                              {format(new Date(file.uploaded_at), "d MMM y")}
+                            </div>
+                          )}
+                        </li>
+                      ))}
+                </ul>
+              </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={() => "#"}
+        />
      </>
    )
  );
--- a/components/Sidebar.tsx
+++ b/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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/styles/CellList.module.css
+++ b/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;
+}
--- a/styles/ModList.module.css
+++ b/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;
+}