From 1cd6f70a461866997a9daeef125cfbdb899cafe3 Mon Sep 17 00:00:00 2001 From: Monkey Do Date: Sat, 19 Oct 2024 13:56:28 +0200 Subject: [PATCH 1/2] LB-1647: use anchor links in MissingData pagination Instead of using links as buttons and navigating programmatically, preventing opening in new tab for example --- .../settings/missing-data/MissingMBData.tsx | 50 ++++--------------- 1 file changed, 11 insertions(+), 39 deletions(-) diff --git a/frontend/js/src/settings/missing-data/MissingMBData.tsx b/frontend/js/src/settings/missing-data/MissingMBData.tsx index 31bde33fe3..1d7117198f 100644 --- 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"; @@ -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() { })} From 0269aa9d490418c097ac8582e81d5bcd4d418c47 Mon Sep 17 00:00:00 2001 From: Monkey Do Date: Mon, 21 Oct 2024 10:58:42 +0200 Subject: [PATCH 2/2] Cleanup: remove unused code after changes in 1cd6f70a4 a bunch of code is not used anymore --- .../src/settings/missing-data/MissingMBData.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/frontend/js/src/settings/missing-data/MissingMBData.tsx b/frontend/js/src/settings/missing-data/MissingMBData.tsx index 1d7117198f..d2206f281b 100644 --- a/frontend/js/src/settings/missing-data/MissingMBData.tsx +++ b/frontend/js/src/settings/missing-data/MissingMBData.tsx @@ -70,7 +70,7 @@ export default function MissingMBDataPage() { const dispatch = useBrainzPlayerDispatch(); const location = useLocation(); // Loader - const { data: loaderData } = useQuery( + const { data: loaderData, isLoading } = useQuery( 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(false); const [deletedListens, setDeletedListens] = React.useState>([]); const [missingData, setMissingData] = React.useState>( missingDataProps @@ -115,16 +114,7 @@ export default function MissingMBDataPage() { offset + EXPECTED_ITEMS_PER_PAGE ); - // Ref - const missingMBDataTableRef = React.useRef(null); - // Functions - const afterDisplay = () => { - if (missingMBDataTableRef?.current) { - missingMBDataTableRef.current.scrollIntoView({ behavior: "smooth" }); - } - setLoading(false); - }; const deleteListen = async (data: MissingMBData) => { if (user?.auth_token) { @@ -221,7 +211,7 @@ export default function MissingMBDataPage() { )}
-
+
- +
{itemsOnThisPage.map((group) => { const releaseName = group.at(0)?.release_name ?? null;