Merge pull request #3001 from metabrainz/LB-1647

LB-1647: use anchor links in MissingData pagination
metabrainz · Oct 21, 2024 · 0d35182 · 0d35182
2 parents 0dc2ca2 + 0269aa9
commit 0d35182
Showing 1 changed file with 14 additions and 52 deletions.
diff --git a/frontend/js/src/settings/missing-data/MissingMBData.tsx b/frontend/js/src/settings/missing-data/MissingMBData.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 
 import { faLink, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
-import { useLocation, useSearchParams } from "react-router-dom";
+import { Link, useLocation, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import { Helmet } from "react-helmet";
 
@@ -70,7 +70,7 @@ export default function MissingMBDataPage() {
   const dispatch = useBrainzPlayerDispatch();
   const location = useLocation();
   // Loader
-  const { data: loaderData } = useQuery<MissingMBDataLoaderData>(
+  const { data: loaderData, isLoading } = useQuery<MissingMBDataLoaderData>(
     RouteQuery(["missing-data"], location.pathname)
   );
   const { missing_data: missingDataProps = [], last_updated: lastUpdated } =
@@ -80,7 +80,6 @@ export default function MissingMBDataPage() {
   const pageSearchParam = searchParams.get("page");
 
   // State
-  const [loading, setLoading] = React.useState<boolean>(false);
   const [deletedListens, setDeletedListens] = React.useState<Array<string>>([]);
   const [missingData, setMissingData] = React.useState<Array<MissingMBData>>(
     missingDataProps
@@ -115,16 +114,7 @@ export default function MissingMBDataPage() {
     offset + EXPECTED_ITEMS_PER_PAGE
   );
 
-  // Ref
-  const missingMBDataTableRef = React.useRef<HTMLDivElement>(null);
-
   // Functions
-  const afterDisplay = () => {
-    if (missingMBDataTableRef?.current) {
-      missingMBDataTableRef.current.scrollIntoView({ behavior: "smooth" });
-    }
-    setLoading(false);
-  };
 
   const deleteListen = async (data: MissingMBData) => {
     if (user?.auth_token) {
@@ -172,24 +162,6 @@ export default function MissingMBDataPage() {
     }
   };
 
-  const handleClickPrevious = () => {
-    if (currPage && currPage > 1) {
-      setLoading(true);
-      const updatedPage = currPage - 1;
-      setSearchParams({ page: updatedPage.toString() });
-      afterDisplay();
-    }
-  };
-
-  const handleClickNext = () => {
-    if (currPage && currPage < totalPages) {
-      setLoading(true);
-      const updatedPage = currPage + 1;
-      setSearchParams({ page: updatedPage.toString() });
-      afterDisplay();
-    }
-  };
-
   // Effects
   React.useEffect(() => {
     // Set the ?page search param in URL on startup if not set, as well as
@@ -239,7 +211,7 @@ export default function MissingMBDataPage() {
       )}
       <br />
       <div>
-        <div id="missingMBData" ref={missingMBDataTableRef}>
+        <div id="missingMBData">
           <div
             style={{
               height: 0,
@@ -248,7 +220,7 @@ export default function MissingMBDataPage() {
               zIndex: 1,
             }}
           >
-            <Loader isLoading={loading} />
+            <Loader isLoading={isLoading} />
           </div>
           {itemsOnThisPage.map((group) => {
             const releaseName = group.at(0)?.release_name ?? null;
@@ -403,36 +375,26 @@ export default function MissingMBDataPage() {
           })}
         </div>
         <ul className="pager" style={{ display: "flex" }}>
-          <li
-            className={`previous ${currPage && currPage <= 1 ? "hidden" : ""}`}
-          >
-            <a
+          <li className={`previous ${currPage <= 1 ? "disabled" : ""}`}>
+            <Link
+              to={`?page=${Math.max(currPage - 1, 1)}`}
               role="button"
-              onClick={handleClickPrevious}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleClickPrevious();
-              }}
-              tabIndex={0}
+              aria-disabled={currPage >= totalPages}
             >
               &larr; Previous
-            </a>
+            </Link>
           </li>
           <li
-            className={`next ${
-              currPage && currPage >= totalPages ? "hidden" : ""
-            }`}
+            className={`next ${currPage >= totalPages ? "disabled" : ""}`}
             style={{ marginLeft: "auto" }}
           >
-            <a
+            <Link
+              to={`?page=${Math.min(currPage + 1, totalPages)}`}
               role="button"
-              onClick={handleClickNext}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleClickNext();
-              }}
-              tabIndex={0}
+              aria-disabled={currPage >= totalPages}
             >
               Next &rarr;
-            </a>
+            </Link>
           </li>
         </ul>
       </div>