refactor: debounce.jsx to typescript and moving it to Hooks

client/src/Hooks/useDebounce.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Custom hook for debouncing values
+ * @template T - The type of the value being debounced
+ * @param value - The value to debounce
+ * @param delay - The debounce delay in milliseconds
+ * @returns The debounced value
+ *
+ * @example
+ * const debouncedSearch = useDebounce(search, 300); // Debounces the search input with a 300ms delay
+ */
+const useDebounce = <T,>(value: T, delay: number): T => {
+	const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+};
+
+export default useDebounce;

client/src/Pages/Infrastructure/Monitors/index.tsx

@@ -20,7 +20,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
 import type { RootState } from "@/Types/state";
 import { InfraMonitorsTable } from "./Components/MonitorsTable";
-import useDebounce from "@/Utils/debounce";
+import useDebounce from "@/Hooks/useDebounce";
 
 const InfrastructureMonitors = () => {
 	const { t } = useTranslation();

client/src/Pages/Uptime/Monitors/index.tsx

@@ -20,7 +20,7 @@ import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { RootState } from "@/Types/state";
 import { useTheme } from "@mui/material";
-import useDebounce from "@/Utils/debounce";
+import useDebounce from "@/Hooks/useDebounce";
 
 const UptimeMonitorsPage = () => {
 	const { t } = useTranslation();

client/src/Utils/debounce.jsx

@@ -1,18 +0,0 @@
-import { useState, useEffect } from "react";
-
-const useDebounce = (value, delay) => {
-	const [debouncedValue, setDebouncedValue] = useState(value);
-
-	useEffect(() => {
-		const handler = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-
-		return () => {
-			clearTimeout(handler);
-		};
-	}, [value, delay]);
-	return debouncedValue;
-};
-
-export default useDebounce;