diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index dda768956..8ed0ec5c2 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/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;