thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix scroll on page change, add paginator at top of lists

Browse Source
This commit is contained in:
Tyler Hallada 2022-08-28 21:51:56 -04:00
parent 5491894e00
commit 10bc093300
3 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/CellList.tsx
View File

@ -51,9 +51,28 @@ const CellList: React.FC<Props> = ({ cells }) => {
useEffect(() => {
setPage(0);
document.getElementById("sidebar")?.scrollTo(0, 0);
}, [filterResults]);
const renderPagination = () => (
<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={() => "#"}
/>
);
return (
filteredCells && (
<>
@ -72,6 +91,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
</div>
<hr />
</div>
{renderPagination()}
<ul className={styles["cell-list"]}>
{filteredCells
.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
@ -96,23 +116,7 @@ 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={() => "#"}
/>
{renderPagination()}
</>
)
);

40
components/ModList.tsx
View File

@ -111,9 +111,28 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
useEffect(() => {
setPage(0);
document.getElementById("sidebar")?.scrollTo(0, 0);
}, [filterResults, category, includeTranslations, sortBy, sortAsc]);
const renderPagination = () => (
<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={() => "#"}
/>
);
return (
mods && (
<>
@ -226,6 +245,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
</div>
<hr />
</div>
{renderPagination()}
<ul className={styles["mod-list"]}>
{modsWithCounts
.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
@ -329,23 +349,7 @@ 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={() => "#"}
/>
{renderPagination()}
</>
)
);

6
components/Sidebar.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable @next/next/no-img-element */
import React from "react";
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { formatRelative } from "date-fns";
@ -42,6 +42,10 @@ const Sidebar: React.FC<Props> = ({
}) => {
const router = useRouter();
useEffect(() => {
document.getElementById("sidebar")?.scrollTo(0, 0);
}, [selectedCell, router.query.mod, router.query.plugin]);
const renderLoadError = (error: Error) => (
<div>{`Error loading live download counts: ${error.message}`}</div>
);