use universal details header in PageSpeed page

client/src/Pages/PageSpeed/Details/index.jsx

@@ -4,6 +4,7 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
 import PageSpeedStatusBoxes from "./Components/PageSpeedStatusBoxes";
+import MonitorDetailsControlHeader from "../../../Components/MonitorDetailsControlHeader";
 import PageSpeedAreaChart from "./Components/PageSpeedAreaChart";
 import PerformanceReport from "./Components/PerformanceReport";
 import GenericFallback from "../../../Components/GenericFallback";
@@ -27,6 +28,15 @@ const PageSpeedDetails = () => {
 	const isAdmin = useIsAdmin();
 	const { monitorId } = useParams();
 
+	// Local state
+	const [metrics, setMetrics] = useState({
+		accessibility: true,
+		bestPractices: true,
+		performance: true,
+		seo: true,
+	});
+	const [trigger, setTrigger] = useState(false);
+	// Network
 	const [monitor, audits, isLoading, networkError] = useFetchStatsByMonitorId({
 		monitorId,
 		sortOrder: "desc",
@@ -34,13 +44,7 @@ const PageSpeedDetails = () => {
 		dateRange: "day",
 		numToDisplay: null,
 		normalize: null,
-	});
-
-	const [metrics, setMetrics] = useState({
-		accessibility: true,
-		bestPractices: true,
-		performance: true,
-		seo: true,
+		updateTrigger: trigger,
 	});
 
 	// Handlers
@@ -48,6 +52,9 @@ const PageSpeedDetails = () => {
 		setMetrics((prev) => ({ ...prev, [id]: !prev[id] }));
 	};
 
+	const triggerUpdate = () => {
+		setTrigger(!trigger);
+	};
 	if (networkError === true) {
 		return (
 			<GenericFallback>
@@ -68,10 +75,12 @@ const PageSpeedDetails = () => {
 		return (
 			<Stack gap={theme.spacing(10)}>
 				<Breadcrumbs list={BREADCRUMBS} />
-				<MonitorStatusHeader
+				<MonitorDetailsControlHeader
 					path={"pagespeed"}
+					isLoading={isLoading}
 					isAdmin={isAdmin}
 					monitor={monitor}
+					triggerUpdate={triggerUpdate}
 				/>
 				<GenericFallback>
 					<Typography>{t("distributedUptimeDetailsNoMonitorHistory")}</Typography>
@@ -83,11 +92,12 @@ const PageSpeedDetails = () => {
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
-			<MonitorStatusHeader
+			<MonitorDetailsControlHeader
 				path={"pagespeed"}
+				isLoading={isLoading}
 				isAdmin={isAdmin}
-				shouldRender={!isLoading}
 				monitor={monitor}
+				triggerUpdate={triggerUpdate}
 			/>
 			<PageSpeedStatusBoxes
 				shouldRender={!isLoading}