Merge pull request #3332 from bluewave-labs/fix/pagespeed-sort

Pagespeed filter sorting fix

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -8,7 +8,7 @@ import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/Pa
 import type { Monitor } from "@/Types/Monitor";
 
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useGet, useDelete } from "@/Hooks/UseApi";
 import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
@@ -20,14 +20,6 @@ const PageSpeedMonitorsPage = () => {
 	const isAdmin = useIsAdmin();
 	const { deleteFn, loading: isDeleting } = useDelete();
 
-	const monitorsUrl = "/monitors/team/with-checks?type=pagespeed&limit=10";
-	const {
-		data: monitorsData,
-		isLoading: monitorsIsLoading,
-		error: monitorsError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(monitorsUrl, {}, { refreshInterval: 30000 });
-
 	const settingsUrl = "/settings";
 	const {
 		data: settingsData,
@@ -42,6 +34,28 @@ const PageSpeedMonitorsPage = () => {
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		params.append("type", "pagespeed");
+		params.append("limit", "25");
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (sortField) params.append("field", sortField);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [page, rowsPerPage, sortField, sortOrder]);
+
+	const {
+		data: monitorsData,
+		isLoading: monitorsIsLoading,
+		error: monitorsError,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: 30000 }
+	);
+
 	const monitors = monitorsData?.monitors;
 	const monitorsCount = monitorsData?.count ?? 0;
 	const summary = monitorsData?.summary ?? null;