add network error state to hooks

Client/src/Pages/PageSpeed/Monitors/Hooks/useMonitorsFetch.jsx

@@ -6,6 +6,7 @@ const useMonitorsFetch = ({ authToken, teamId }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [monitors, setMonitors] = useState([]);
 	const [summary, setSummary] = useState({});
+	const [networkError, setNetworkError] = useState(false);
 
 	useEffect(() => {
 		const fetchMonitors = async () => {
@@ -27,6 +28,7 @@ const useMonitorsFetch = ({ authToken, teamId }) => {
 					setSummary(res.data.data.summary);
 				}
 			} catch (error) {
+				setNetworkError(true);
 				createToast({
 					body: error.message,
 				});
@@ -37,7 +39,7 @@ const useMonitorsFetch = ({ authToken, teamId }) => {
 
 		fetchMonitors();
 	}, [authToken, teamId]);
-	return { isLoading, monitors, summary };
+	return { isLoading, monitors, summary, networkError };
 };
 
 export default useMonitorsFetch;

Client/src/Pages/PageSpeed/Monitors/index.jsx

@@ -11,6 +11,7 @@ import { useTheme } from "@emotion/react";
 import { useSelector } from "react-redux";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import useMonitorsFetch from "./Hooks/useMonitorsFetch";
+import NetworkErrorFallback from "../../../Components/NetworkErrorFallback";
 
 // Constants
 const BREADCRUMBS = [{ name: `pagespeed`, path: "/pagespeed" }];
@@ -20,11 +21,15 @@ const PageSpeed = () => {
 	const isAdmin = useIsAdmin();
 	const { user, authToken } = useSelector((state) => state.auth);
 
-	const { isLoading, monitors, summary } = useMonitorsFetch({
+	const { isLoading, monitors, summary, networkError } = useMonitorsFetch({
 		authToken: authToken,
 		teamId: user.teamId,
 	});
 
+	if (networkError === true) {
+		return <NetworkErrorFallback />;
+	}
+
 	if (!isLoading && monitors?.length === 0) {
 		return (
 			<Fallback

Client/src/Pages/Uptime/Monitors/Hooks/useMonitorsFetch.jsx

@@ -46,6 +46,7 @@ export const useMonitorFetch = ({
 	const [monitors, setMonitors] = useState(undefined);
 	const [filteredMonitors, setFilteredMonitors] = useState(undefined);
 	const [monitorsSummary, setMonitorsSummary] = useState(undefined);
+	const [networkError, setNetworkError] = useState(false);
 
 	const theme = useTheme();
 
@@ -72,6 +73,7 @@ export const useMonitorFetch = ({
 				setFilteredMonitors(mappedMonitors);
 				setMonitorsSummary(summary);
 			} catch (error) {
+				setNetworkError(true);
 				createToast({
 					body: error.message,
 				});
@@ -92,7 +94,13 @@ export const useMonitorFetch = ({
 		theme,
 		triggerUpdate,
 	]);
-	return { monitors, filteredMonitors, monitorsSummary, monitorsAreLoading };
+	return {
+		monitors,
+		filteredMonitors,
+		monitorsSummary,
+		monitorsAreLoading,
+		networkError,
+	};
 };
 
 export default useMonitorFetch;

Client/src/Pages/Uptime/Monitors/index.jsx

@@ -6,6 +6,7 @@ import UptimeDataTable from "./Components/UptimeDataTable";
 import Pagination from "../../../Components/Table/TablePagination";
 import CreateMonitorHeader from "../../../Components/CreateMonitorHeader";
 import Fallback from "../../../Components/Fallback";
+import NetworkErrorFallback from "../../../Components/NetworkErrorFallback";
 import SearchComponent from "./Components/SearchComponent";
 
 import MonitorCountHeader from "../../../Components/MonitorCountHeader";
@@ -89,20 +90,28 @@ const UptimeMonitors = () => {
 	}, []);
 
 	const teamId = user.teamId;
-	const { monitorsAreLoading, monitors, filteredMonitors, monitorsSummary } =
-		useMonitorsFetch({
-			authToken,
-			teamId,
-			limit: 25,
-			page: page,
-			rowsPerPage: rowsPerPage,
-			filter: search,
-			field: sort?.field,
-			order: sort?.order,
-			triggerUpdate: monitorUpdateTrigger,
-		});
+	const {
+		monitorsAreLoading,
+		monitors,
+		filteredMonitors,
+		monitorsSummary,
+		networkError,
+	} = useMonitorsFetch({
+		authToken,
+		teamId,
+		limit: 25,
+		page: page,
+		rowsPerPage: rowsPerPage,
+		filter: search,
+		field: sort?.field,
+		order: sort?.order,
+		triggerUpdate: monitorUpdateTrigger,
+	});
 	const totalMonitors = monitorsSummary?.totalMonitors ?? 0;
-	if (!isLoading && !monitorsAreLoading && monitors?.length === 0) {
+
+	if (networkError) return <NetworkErrorFallback />;
+
+	if (!isLoading && !monitorsAreLoading && totalMonitors === 0) {
 		return (
 			<Fallback
 				vowelStart={true}

Client/src/Utils/NetworkService.js

@@ -3,7 +3,6 @@ const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 const FALLBACK_BASE_URL = "http://localhost:5000/api/v1";
 import { clearAuthState } from "../Features/Auth/authSlice";
 import { clearUptimeMonitorState } from "../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { createToast } from "./toastUtils";
 
 class NetworkService {
 	constructor(store, dispatch, navigate) {