LB-1647: use anchor links in MissingData pagination

Instead of using links as buttons and navigating programmatically, preventing opening in new tab for example

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";
 
@@ -172,24 +172,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
@@ -403,36 +385,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>