From 3dc77d6e271872a85631610c698e4e7348e28191 Mon Sep 17 00:00:00 2001
From: Br0wnHammer <kumararyaman26@gmail.com>
Date: Thu, 3 Apr 2025 15:07:42 +0530
Subject: [PATCH] Feat: Uptime Monitor Filters

---
 src/Components/FilterHeader/index.jsx         |  6 ++--
 .../Monitors/Components/Filter/index.jsx      | 10 +++---
 src/Pages/Uptime/Monitors/index.jsx           | 31 +++++++++----------
 3 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/Components/FilterHeader/index.jsx b/src/Components/FilterHeader/index.jsx
index 96c151db0..73c7d69ac 100644
--- a/src/Components/FilterHeader/index.jsx
+++ b/src/Components/FilterHeader/index.jsx
@@ -19,6 +19,8 @@ import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 const FilterHeader = ({ header, options, value, onChange, multiple = true }) => {
 	const theme = useTheme();
 
+	const controlledValue = value === undefined ? [] : value; // Ensure value is always treated as an array for controlled component purposes
+
 	return (
 		<FormControl
 			sx={{ m: theme.spacing(2), minWidth: "10%" }}
@@ -33,7 +35,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 					/>
 				)}
 				displayEmpty
-				value={value ?? []}
+				value={controlledValue}
 				onChange={onChange}
 				renderValue={(selected) => {
 					if (!selected?.length) {
@@ -52,7 +54,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 						value={option.value}
 					>
 						<Checkbox
-							checked={value?.includes(option.value)}
+							checked={controlledValue.includes(option.value)}
 							size="small"
 						/>
 						<ListItemText primary={option.label} />
diff --git a/src/Pages/Uptime/Monitors/Components/Filter/index.jsx b/src/Pages/Uptime/Monitors/Components/Filter/index.jsx
index f99ac3980..d17ead982 100644
--- a/src/Pages/Uptime/Monitors/Components/Filter/index.jsx
+++ b/src/Pages/Uptime/Monitors/Components/Filter/index.jsx
@@ -51,7 +51,7 @@ const Filter = ({
 		setSelectedStatus(selectedValues.length > 0 ? selectedValues : undefined);
 
 		if (selectedValues.length === 0 || selectedValues.length === 2) {
-			setToFilterStatus(null);
+			setToFilterStatus(undefined);
 		} else {
 			setToFilterStatus(selectedValues[0] === "Up" ? "true" : "false");
 		}
@@ -62,7 +62,7 @@ const Filter = ({
 		setSelectedState(selectedValues);
 
 		if (selectedValues.length === 0 || selectedValues.length === 2) {
-			setToFilterActive(null);
+			setToFilterActive(undefined);
 		} else {
 			setToFilterActive(selectedValues[0] === "Active" ? "true" : "false");
 		}
@@ -137,11 +137,11 @@ const Filter = ({
 };
 
 Filter.propTypes = {
-	selectedTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
+	selectedTypes: PropTypes.arrayOf(PropTypes.string),
 	setSelectedTypes: PropTypes.func.isRequired,
-	selectedStatus: PropTypes.arrayOf(PropTypes.string).isRequired,
+	selectedStatus: PropTypes.arrayOf(PropTypes.string),
 	setSelectedStatus: PropTypes.func.isRequired,
-	selectedState: PropTypes.arrayOf(PropTypes.string).isRequired,
+	selectedState: PropTypes.arrayOf(PropTypes.string),
 	setSelectedState: PropTypes.func.isRequired,
 	setToFilterStatus: PropTypes.func.isRequired,
 	setToFilterActive: PropTypes.func.isRequired,
diff --git a/src/Pages/Uptime/Monitors/index.jsx b/src/Pages/Uptime/Monitors/index.jsx
index d90e525d2..8c25e1d82 100644
--- a/src/Pages/Uptime/Monitors/index.jsx
+++ b/src/Pages/Uptime/Monitors/index.jsx
@@ -73,8 +73,8 @@ const UptimeMonitors = () => {
 	const [selectedTypes, setSelectedTypes] = useState(undefined);
 	const [selectedState, setSelectedState] = useState(undefined);
 	const [selectedStatus, setSelectedStatus] = useState(undefined);
-	const [toFilterStatus, setToFilterStatus] = useState(null);
-	const [toFilterActive, setToFilterActive] = useState(null);
+	const [toFilterStatus, setToFilterStatus] = useState(undefined);
+	const [toFilterActive, setToFilterActive] = useState(undefined);
 
 	// Utils
 	const theme = useTheme();
@@ -114,23 +114,20 @@ const UptimeMonitors = () => {
 		setSelectedState(undefined);
 		setSelectedTypes(undefined);
 		setSelectedStatus(undefined);
-		setToFilterStatus(null);
-		setToFilterActive(null);
+		setToFilterStatus(undefined);
+		setToFilterActive(undefined);
 	};
 
-	const field =
-		toFilterStatus !== null
-			? "status"
-			: toFilterActive !== null
-				? "isActive"
-				: sort?.field;
+	const filterLookup = new Map([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"]
+	]);
 
-	const filter =
-		toFilterStatus !== null
-			? toFilterStatus
-			: toFilterActive !== null
-				? toFilterActive
-				: search;
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || sort?.field;
+	const filter = activeFilter?.[0] || search;
+
+	const effectiveTypes = selectedTypes?.length ? selectedTypes : TYPES;
 
 	const [
 		monitorsWithChecks,
@@ -139,7 +136,7 @@ const UptimeMonitors = () => {
 		monitorsWithChecksNetworkError,
 	] = useFetchMonitorsWithChecks({
 		teamId,
-		types: selectedTypes && selectedTypes.length > 0 ? selectedTypes : TYPES,
+		types: effectiveTypes,
 		limit: 25,
 		page: page,
 		rowsPerPage: rowsPerPage,