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

components/CellList.tsx

@@ -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
+        {renderPagination()}
-          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

@@ -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
+        {renderPagination()}
-          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

@@ -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>
   );