From 80a16ef61a255fd4e1cb90e959261df2f0aac024 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Jan 2025 11:42:40 -0800
Subject: [PATCH] safe param access

---
 .../Details/Components/Charts/PieChart.jsx    |   4 +-
 .../Components/Charts/PieChartLegend.jsx      | 130 +++++++++---------
 .../Components/PageSpeedAreaChart/index.jsx   |   4 -
 .../Components/PerformanceReport/index.jsx    |   6 +-
 Client/src/Pages/PageSpeed/Details/index.jsx  |   5 +-
 5 files changed, 69 insertions(+), 80 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChart.jsx b/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChart.jsx
index aad697f9f..c9204c38a 100644
--- a/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChart.jsx
+++ b/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChart.jsx
@@ -118,8 +118,6 @@ const PieChart = ({ audits }) => {
 	const [highlightedItem, setHighLightedItem] = useState(null);
 	const [expand, setExpand] = useState(false);
 
-	if (typeof audits === "undefined") return null;
-
 	/**
 	 * Retrieves color properties based on the performance value.
 	 *
@@ -166,6 +164,8 @@ const PieChart = ({ audits }) => {
 	 */
 	let performance = 0;
 	const getPieData = (audits) => {
+		if (typeof audits === "undefined") return undefined;
+
 		let data = [];
 		let startAngle = 0;
 		const padding = 3; // padding between arcs
diff --git a/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChartLegend.jsx b/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChartLegend.jsx
index c7612821f..010716b88 100644
--- a/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChartLegend.jsx
+++ b/Client/src/Pages/PageSpeed/Details/Components/Charts/PieChartLegend.jsx
@@ -7,84 +7,84 @@ import PropTypes from "prop-types";
 const PieChartLegend = ({ audits }) => {
 	const theme = useTheme();
 
-	if (typeof audits === "undefined") return null;
 	return (
 		<LegendBox
 			icon={<SpeedometerIcon />}
 			header="Performance metrics"
 			sx={{ flex: 1 }}
 		>
-			{Object.keys(audits).map((key) => {
-				if (key === "_id") return;
+			{typeof audits !== "undefined" &&
+				Object.keys(audits).map((key) => {
+					if (key === "_id") return;
 
-				let audit = audits[key];
-				let score = audit.score * 100;
-				let bg =
-					score >= 90
-						? theme.palette.success.main
-						: score >= 50
-							? theme.palette.warning.main
-							: score >= 0
-								? theme.palette.error.main
-								: theme.palette.tertiary.main;
+					let audit = audits[key];
+					let score = audit.score * 100;
+					let bg =
+						score >= 90
+							? theme.palette.success.main
+							: score >= 50
+								? theme.palette.warning.main
+								: score >= 0
+									? theme.palette.error.main
+									: theme.palette.tertiary.main;
 
-				// Find the position where the number ends and the unit begins
-				const match = audit.displayValue.match(/(\d+\.?\d*)\s*([a-zA-Z]+)/);
-				let value;
-				let unit;
-				if (match) {
-					value = match[1];
-					match[2] === "s" ? (unit = "seconds") : (unit = match[2]);
-				} else {
-					value = audit.displayValue;
-				}
+					// Find the position where the number ends and the unit begins
+					const match = audit.displayValue.match(/(\d+\.?\d*)\s*([a-zA-Z]+)/);
+					let value;
+					let unit;
+					if (match) {
+						value = match[1];
+						match[2] === "s" ? (unit = "seconds") : (unit = match[2]);
+					} else {
+						value = audit.displayValue;
+					}
 
-				return (
-					<Stack
-						flex={1}
-						key={`${key}-box`}
-						justifyContent="space-between"
-						direction="row"
-						gap={theme.spacing(4)}
-						p={theme.spacing(3)}
-						border={1}
-						borderColor={theme.palette.primary.lowContrast}
-						borderRadius={4}
-					>
-						<Box>
-							<Typography
-								fontSize={12}
-								fontWeight={500}
-								lineHeight={1}
-								mb={1}
-								textTransform="uppercase"
-							>
-								{audit.title}
-							</Typography>
-							<Typography
-								component="span"
-								fontSize={14}
-								fontWeight={500}
-								color={theme.palette.primary.contrastText}
-							>
-								{value}
+					return (
+						<Stack
+							flex={1}
+							key={`${key}-box`}
+							justifyContent="space-between"
+							direction="row"
+							gap={theme.spacing(4)}
+							p={theme.spacing(3)}
+							border={1}
+							borderColor={theme.palette.primary.lowContrast}
+							borderRadius={4}
+						>
+							<Box>
+								<Typography
+									fontSize={12}
+									fontWeight={500}
+									lineHeight={1}
+									mb={1}
+									textTransform="uppercase"
+								>
+									{audit.title}
+								</Typography>
 								<Typography
 									component="span"
-									variant="body2"
-									ml={2}
+									fontSize={14}
+									fontWeight={500}
+									color={theme.palette.primary.contrastText}
 								>
-									{unit}
+									{value}
+									<Typography
+										component="span"
+										variant="body2"
+										ml={2}
+									>
+										{unit}
+									</Typography>
 								</Typography>
-							</Typography>
-						</Box>
-						<Box
-							width={4}
-							backgroundColor={bg}
-							borderRadius={4}
-						/>
-					</Stack>
-				);
-			})}
+							</Box>
+							<Box
+								width={4}
+								backgroundColor={bg}
+								borderRadius={4}
+							/>
+						</Stack>
+					);
+				})}
 		</LegendBox>
 	);
 };
diff --git a/Client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx b/Client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx
index c818d04a3..582648e23 100644
--- a/Client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx
@@ -15,10 +15,6 @@ const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) =
 		return <SkeletonLayout />;
 	}
 
-	if (typeof monitor === "undefined") {
-		return null;
-	}
-
 	const data = monitor?.checks ? [...monitor.checks].reverse() : [];
 
 	return (
diff --git a/Client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx b/Client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx
index 2db40e126..cd220a73c 100644
--- a/Client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx
@@ -5,18 +5,14 @@ import { Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PieChartLegend from "../Charts/PieChartLegend";
 import SkeletonLayout from "./skeleton";
+
 const PerformanceReport = ({ shouldRender, audits }) => {
-	console.log("shouldRender", shouldRender);
 	const theme = useTheme();
 
 	if (!shouldRender) {
 		return <SkeletonLayout />;
 	}
 
-	if (typeof audits === "undefined") {
-		return null;
-	}
-
 	return (
 		<ChartBox
 			icon={<PerformanceIcon />}
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 43eb0ed7b..6fa4aa82c 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,11 +1,10 @@
 // Components
-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography, Skeleton } from "@mui/material";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
 import PageSpeedStatusBoxes from "./Components/PageSpeedStatusBoxes";
 import PageSpeedAreaChart from "./Components/PageSpeedAreaChart";
 import PerformanceReport from "./Components/PerformanceReport";
-import Fallback from "../../../Components/Fallback";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
@@ -31,8 +30,6 @@ const PageSpeedDetails = () => {
 		monitorId,
 	});
 
-	console.log(monitor, audits, isLoading);
-
 	const [metrics, setMetrics] = useState({
 		accessibility: true,
 		bestPractices: true,