Add missing prop validation, cleanup

Client/src/Pages/Uptime/Details/Components/Charts/ChartBox.jsx

@@ -71,4 +71,5 @@ ChartBox.propTypes = {
 	children: PropTypes.node,
 	icon: PropTypes.node.isRequired,
 	header: PropTypes.string.isRequired,
+	height: PropTypes.string,
 };

Client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChart.jsx

@@ -2,6 +2,8 @@ import ChartBox from "./ChartBox";
 import MonitorDetailsAreaChart from "../../../../../Components/Charts/MonitorDetailsAreaChart";
 import ResponseTimeIcon from "../../../../../assets/icons/response-time-icon.svg?react";
 import SkeletonLayout from "./ResponseTimeChartSkeleton";
+import PropTypes from "prop-types";
+
 const ResponseTImeChart = ({ shouldRender = true, monitor, dateRange }) => {
 	if (!shouldRender) {
 		return <SkeletonLayout />;
@@ -20,4 +22,10 @@ const ResponseTImeChart = ({ shouldRender = true, monitor, dateRange }) => {
 	);
 };
 
+ResponseTImeChart.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitor: PropTypes.object,
+	dateRange: PropTypes.string,
+};
+
 export default ResponseTImeChart;

Client/src/Pages/Uptime/Details/Components/ConfigButton/index.jsx

@@ -2,7 +2,7 @@ import { Button, Box } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
-
+import PropTypes from "prop-types";
 const ConfigButton = ({ shouldRender, monitorId }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
@@ -32,4 +32,9 @@ const ConfigButton = ({ shouldRender, monitorId }) => {
 	);
 };
 
+ConfigButton.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitorId: PropTypes.string,
+};
+
 export default ConfigButton;

Client/src/Pages/Uptime/Details/Components/ResponseTable/index.jsx

@@ -76,6 +76,7 @@ const ResponseTable = ({
 };
 
 ResponseTable.propTypes = {
+	shouldRender: PropTypes.bool,
 	checks: PropTypes.array.isRequired,
 	checksCount: PropTypes.number.isRequired,
 	uiTimezone: PropTypes.string.isRequired,

Client/src/Pages/Uptime/Details/Components/StatusBoxes/index.jsx

@@ -6,12 +6,15 @@ import SkeletonLayout from "./skeleton";
 import { useTheme } from "@mui/material/styles";
 import useUtils from "../../../Home/Hooks/useUtils";
 import { getHumanReadableDuration } from "../../../../../Utils/timeUtils";
-
+import PropTypes from "prop-types";
 const StatusBoxes = ({ shouldRender, monitor, certificateExpiry }) => {
+	// Utils
+	const theme = useTheme();
+	const { determineState } = useUtils();
+
 	if (!shouldRender) {
 		return <SkeletonLayout />;
 	}
-	const theme = useTheme();
 	const { time: streakTime, units: streakUnits } = getHumanReadableDuration(
 		monitor?.uptimeStreak
 	);
@@ -20,8 +23,6 @@ const StatusBoxes = ({ shouldRender, monitor, certificateExpiry }) => {
 		monitor?.timeSinceLastCheck
 	);
 
-	const { determineState } = useUtils();
-
 	return (
 		<Stack
 			direction="row"
@@ -73,4 +74,10 @@ const StatusBoxes = ({ shouldRender, monitor, certificateExpiry }) => {
 	);
 };
 
+StatusBoxes.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitor: PropTypes.object,
+	certificateExpiry: PropTypes.string,
+};
+
 export default StatusBoxes;

Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx

@@ -1,6 +1,7 @@
 import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import SkeletonLayout from "./skeleton";
+import PropTypes from "prop-types";
 
 const TimeFramePicker = ({ shouldRender = true, dateRange, setDateRange }) => {
 	const theme = useTheme();
@@ -48,4 +49,10 @@ const TimeFramePicker = ({ shouldRender = true, dateRange, setDateRange }) => {
 	);
 };
 
+TimeFramePicker.propTypes = {
+	shouldRender: PropTypes.bool,
+	dateRange: PropTypes.string,
+	setDateRange: PropTypes.func,
+};
+
 export default TimeFramePicker;