Merge pull request #675 from bluewave-labs/fix/pagespeed

Add null data checks to pagespeed, resolves #618

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

@@ -20,17 +20,8 @@ import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
+import PropTypes from "prop-types";
 
-
-/**
- * Displays a box with an icon, title, and value.
- *
- * @param {Object} props
- * @param {ReactNode} props.icon - The icon to display in the box.
- * @param {string} props.title - The title text to display above the value.
- * @param {string | number} props.value - The value text to display in the box.
- * @returns {JSX.Element}
- */
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
 
@@ -54,6 +45,12 @@ const StatBox = ({ icon, title, value }) => {
   );
 };
 
+StatBox.propTypes = {
+  icon: PropTypes.element,
+  title: PropTypes.string,
+  value: PropTypes.node,
+};
+
 /**
  * Renders a centered label within a pie chart.
  *
@@ -86,6 +83,12 @@ const PieCenterLabel = ({ value, color, setExpand }) => {
   );
 };
 
+PieCenterLabel.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  color: PropTypes.string,
+  setExpand: PropTypes.func,
+};
+
 /**
  * A component that renders a label on a pie chart slice.
  * The label is positioned relative to the center of the pie chart and is optionally highlighted.
@@ -129,6 +132,14 @@ const PieValueLabel = ({ value, startAngle, endAngle, color, highlighted }) => {
   );
 };
 
+PieValueLabel.propTypes = {
+  value: PropTypes.number,
+  startAngle: PropTypes.number,
+  endAngle: PropTypes.number,
+  color: PropTypes.string,
+  highlighted: PropTypes.bool,
+};
+
 /**
  * Renders a skeleton layout.
  *
@@ -196,16 +207,16 @@ const PageSpeedDetails = () => {
           }
         );
 
-        setMonitor(res.data.data);
-        setAudits(res.data.data.checks[0].audits);
+        setMonitor(res?.data?.data ?? {});
+        setAudits(res?.data?.data?.checks?.[0]?.audits ?? []);
       } catch (error) {
-        console.error("Error fetching pagespeed monitor of id: " + monitorId);
+        console.log(error);
         navigate("/not-found");
       }
     };
 
     fetchMonitor();
-  }, [monitorId]);
+  }, [monitorId, authToken, navigate]);
 
   /**
    * Weight constants for different performance metrics.
@@ -653,4 +664,8 @@ const PageSpeedDetails = () => {
   );
 };
 
+PageSpeedDetails.propTypes = {
+  push: PropTypes.func,
+};
+
 export default PageSpeedDetails;