refactor: centralize hooks and add reusable useFetchData hook (#1867)

client/src/Hooks/checkHooks.js

@@ -3,166 +3,6 @@ import { networkService } from "../main";
 import { createToast } from "../Utils/toastUtils";
 import { useTranslation } from "react-i18next";
 
-const useFetchChecksTeam = ({
-	status,
-	sortOrder,
-	limit,
-	dateRange,
-	filter,
-	ack,
-	page,
-	rowsPerPage,
-	enabled = true,
-	updateTrigger,
-}) => {
-	const [checks, setChecks] = useState(undefined);
-	const [checksCount, setChecksCount] = useState(undefined);
-	const [isLoading, setIsLoading] = useState(false);
-	const [networkError, setNetworkError] = useState(false);
-
-	useEffect(() => {
-		const fetchChecks = async () => {
-			if (!enabled) {
-				return;
-			}
-
-			const config = {
-				status,
-				sortOrder,
-				limit,
-				dateRange,
-				filter,
-				ack,
-				page,
-				rowsPerPage,
-			};
-
-			try {
-				setIsLoading(true);
-				const res = await networkService.getChecksByTeam(config);
-				setChecks(res.data.data.checks);
-				setChecksCount(res.data.data.checksCount);
-			} catch (error) {
-				setNetworkError(true);
-				createToast({ body: error.message });
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchChecks();
-	}, [
-		status,
-		sortOrder,
-		limit,
-		dateRange,
-		filter,
-		ack,
-		page,
-		rowsPerPage,
-		enabled,
-		updateTrigger,
-	]);
-
-	return [checks, checksCount, isLoading, networkError];
-};
-
-const useFetchChecksByMonitor = ({
-	monitorId,
-	type,
-	status,
-	sortOrder,
-	limit,
-	dateRange,
-	filter,
-	ack,
-	page,
-	rowsPerPage,
-	enabled = true,
-	updateTrigger,
-}) => {
-	const [checks, setChecks] = useState(undefined);
-	const [checksCount, setChecksCount] = useState(undefined);
-	const [isLoading, setIsLoading] = useState(false);
-	const [networkError, setNetworkError] = useState(false);
-
-	useEffect(() => {
-		const fetchChecks = async () => {
-			if (!enabled || !type) {
-				return;
-			}
-
-			const config = {
-				monitorId,
-				type,
-				status,
-				sortOrder,
-				limit,
-				dateRange,
-				filter,
-				ack,
-				page,
-				rowsPerPage,
-			};
-
-			try {
-				setIsLoading(true);
-				const res = await networkService.getChecksByMonitor(config);
-				setChecks(res.data.data.checks);
-				setChecksCount(res.data.data.checksCount);
-			} catch (error) {
-				setNetworkError(true);
-				createToast({ body: error.message });
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchChecks();
-	}, [
-		monitorId,
-		type,
-		status,
-		sortOrder,
-		limit,
-		dateRange,
-		filter,
-		ack,
-		page,
-		rowsPerPage,
-		enabled,
-		updateTrigger,
-	]);
-
-	return [checks, checksCount, isLoading, networkError];
-};
-
-const useFetchChecksSummaryByTeamId = ({ updateTrigger } = {}) => {
-	const [summary, setSummary] = useState(undefined);
-	const [isLoading, setIsLoading] = useState(false);
-	const [networkError, setNetworkError] = useState(false);
-
-	useEffect(() => {
-		const fetchSummary = async () => {
-			try {
-				setIsLoading(true);
-
-				const res = await networkService.getChecksAndSummaryByTeamId();
-				setSummary(res.data.data);
-			} catch (error) {
-				setNetworkError(true);
-				createToast({ body: error.message });
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchSummary();
-	}, [updateTrigger]);
-
-	return [summary, isLoading, networkError];
-};
-
 const useResolveIncident = () => {
 	const [isLoading, setIsLoading] = useState(false);
 	const { t } = useTranslation();
@@ -211,10 +51,4 @@ const useAcknowledgeChecks = () => {
 	return { acknowledge, isLoading };
 };
 
-export {
-	useFetchChecksByMonitor,
-	useFetchChecksTeam,
-	useFetchChecksSummaryByTeamId,
-	useResolveIncident,
-	useAcknowledgeChecks,
-};
+export { useResolveIncident, useAcknowledgeChecks };

client/src/Pages/Account/EditUser/hooks/editUser.js → client/src/Hooks/editUser.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
-import { ROLES } from "../../../../Utils/roleUtils";
-import { editUserValidation } from "../../../../Validation/validation";
+import { ROLES } from "../Utils/roleUtils";
+import { editUserValidation } from "../Validation/validation";
 import Joi from "joi";
-import { createToast } from "../../../../Utils/toastUtils";
+import { createToast } from "../Utils/toastUtils";
 import { useTranslation } from "react-i18next";
 export const useEditUserForm = (user) => {
 	const [searchInput, setSearchInput] = useState("");

client/src/Pages/StatusPage/Create/Hooks/useCreateStatusPage.jsx → client/src/Hooks/useCreateStatusPage.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { networkService } from "../../../../main";
-import { createToast } from "../../../../Utils/toastUtils";
+import { networkService } from "../main";
+import { createToast } from "../Utils/toastUtils";
 
 const useCreateStatusPage = (isCreate, url) => {
 	const [isLoading, setIsLoading] = useState(false);

client/src/Hooks/useFetchData.js

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { createToast } from "../Utils/toastUtils";
+
+/**
+ * Generic reusable hook to fetch data asynchronously.
+ *
+ * @param {Object} params - Parameters object
+ * @param {() => Promise} params.requestFn - Async function that returns the API response (promise)
+ * @param {boolean} [params.enabled=true] - Whether the hook should perform fetching
+ * @param {boolean} [params.shouldRun=true] - Additional conditional flag to control fetching
+ * @param {Array<any>} [params.deps=[]] - Dependencies array to control when the effect reruns
+ * @param {(responseData: any) => { data: any, count?: number }} [params.extractFn=null] - Optional function to customize how data and count are extracted from response
+ *
+ * @returns {[any, number|undefined, boolean, boolean]} Returns an array with:
+ *    - data: fetched data or undefined,
+ *    - count: total count if applicable or undefined,
+ *    - isLoading: boolean loading state,
+ *    - networkError: boolean error state
+ */
+export const useFetchData = ({
+	requestFn,
+	enabled = true,
+	shouldRun = true,
+	deps = [],
+	extractFn = null,
+}) => {
+	const [data, setData] = useState(undefined);
+	const [count, setCount] = useState(undefined);
+	const [isLoading, setIsLoading] = useState(false);
+	const [networkError, setNetworkError] = useState(false);
+
+	// Reset data if disabled
+	useEffect(() => {
+		if (!enabled || !shouldRun) {
+			setData(undefined);
+			setCount(undefined);
+		}
+	}, [enabled, shouldRun]);
+
+	useEffect(() => {
+		let isMounted = true;
+
+		const fetchData = async () => {
+			if (!enabled || !shouldRun) return;
+
+			setIsLoading(true);
+			setNetworkError(false);
+
+			try {
+				const res = await requestFn();
+				if (!isMounted) return;
+
+				const responseData = res?.data?.data;
+
+				if (extractFn) {
+					const { data: extractedData, count: extractedCount } = extractFn(responseData);
+					setData(extractedData);
+					setCount(extractedCount ?? undefined);
+				} else if (responseData?.checks) {
+					setData(responseData.checks);
+					setCount(responseData.checksCount ?? 0);
+				} else {
+					setData(responseData);
+					setCount(undefined);
+				}
+			} catch (error) {
+				if (!isMounted) return;
+				setNetworkError(true);
+				createToast({ body: error.message || "Something went wrong" });
+			} finally {
+				if (isMounted) setIsLoading(false);
+			}
+		};
+
+		fetchData();
+
+		return () => {
+			isMounted = false;
+		};
+	}, deps);
+
+	return [data, count, isLoading, networkError];
+};

client/src/Pages/StatusPage/Create/Hooks/useMonitorsFetch.jsx → client/src/Hooks/useMonitorsFetch.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { networkService } from "../../../../main";
+import { networkService } from "../main";
 import { useSelector } from "react-redux";
-import { createToast } from "../../../../Utils/toastUtils";
+import { createToast } from "../Utils/toastUtils";
 
 const useMonitorsFetch = () => {
 	const { user } = useSelector((state) => state.auth);

client/src/Pages/StatusPage/StatusPages/Hooks/useStatusPagesFetch.jsx → client/src/Hooks/useStatusPagesFetch.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import { networkService } from "../../../../main";
+import { networkService } from "../main";
 import { useSelector } from "react-redux";
-import { createToast } from "../../../../Utils/toastUtils";
+import { createToast } from "../Utils/toastUtils";
 
 const useStatusPagesFetch = () => {
 	const { user } = useSelector((state) => state.auth);

client/src/Pages/Auth/hooks/useValidatePassword.jsx → client/src/Hooks/useValidatePassword.jsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { newOrChangedCredentials } from "../../../Validation/validation";
+import { newOrChangedCredentials } from "../Validation/validation";
 
 const getFeedbackStatus = (form, errors, field, criteria) => {
 	const fieldErrors = errors[field];