remove redux from settings

client/src/Hooks/monitorHooks.js

@@ -4,6 +4,7 @@ import { createToast } from "../Utils/toastUtils";
 import { useTheme } from "@emotion/react";
 import { useMonitorUtils } from "./useMonitorUtils";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const useFetchMonitorsWithSummary = ({ teamId, types, monitorUpdateTrigger }) => {
 	const [isLoading, setIsLoading] = useState(false);
@@ -383,6 +384,58 @@ const usePauseMonitor = () => {
 	return [pauseMonitor, isLoading, error];
 };
 
+const useAddDemoMonitors = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const { t } = useTranslation();
+	const addDemoMonitors = async () => {
+		try {
+			setIsLoading(true);
+			await networkService.addDemoMonitors();
+			createToast({ body: t("settingsDemoMonitorsAdded") });
+		} catch (error) {
+			createToast({ body: t("settingsFailedToAddDemoMonitors") });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return [addDemoMonitors, isLoading];
+};
+
+const useDeleteAllMonitors = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const { t } = useTranslation();
+	const deleteAllMonitors = async () => {
+		try {
+			setIsLoading(true);
+			await networkService.deleteAllMonitors();
+			createToast({ body: t("settingsMonitorsDeleted") });
+		} catch (error) {
+			createToast({ body: t("settingsFailedToDeleteMonitors") });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return [deleteAllMonitors, isLoading];
+};
+
+const UseDeleteMonitorStats = () => {
+	const { t } = useTranslation();
+	const [isLoading, setIsLoading] = useState(false);
+	const deleteMonitorStats = async ({ teamId }) => {
+		setIsLoading(true);
+		try {
+			const res = await networkService.deleteChecksByTeamId({ teamId });
+			createToast({ body: t("settingsStatsCleared") });
+		} catch (error) {
+			createToast({ body: t("settingsFailedToClearStats") });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return [deleteMonitorStats, isLoading];
+};
+
 export {
 	useFetchMonitorsWithSummary,
 	useFetchMonitorsWithChecks,
@@ -395,4 +448,7 @@ export {
 	useDeleteMonitor,
 	useUpdateMonitor,
 	usePauseMonitor,
+	useAddDemoMonitors,
+	useDeleteAllMonitors,
+	UseDeleteMonitorStats,
 };

client/src/Hooks/useDeleteMonitorStats.js

@@ -1,24 +0,0 @@
-import { useState } from "react";
-import { networkService } from "../main";
-import { createToast } from "../Utils/toastUtils";
-import { useTranslation } from "react-i18next";
-
-const UseDeleteMonitorStats = () => {
-	const { t } = useTranslation();
-	const [isLoading, setIsLoading] = useState(false);
-	const deleteMonitorStats = async ({ teamId }) => {
-		setIsLoading(true);
-		try {
-			const res = await networkService.deleteChecksByTeamId({ teamId });
-			createToast({ body: t("settingsStatsCleared") });
-		} catch (error) {
-			createToast({ body: t("settingsFailedToClearStats") });
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	return [deleteMonitorStats, isLoading];
-};
-
-export { UseDeleteMonitorStats };

client/src/Pages/Settings/index.jsx

@@ -11,22 +11,20 @@ import SettingsEmail from "./SettingsEmail";
 import Button from "@mui/material/Button";
 // Utils
 import { settingsValidation } from "../../Validation/validation";
-import { createToast } from "../../Utils/toastUtils";
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 import { setTimezone, setMode, setLanguage, setShowURL } from "../../Features/UI/uiSlice";
 import SettingsStats from "./SettingsStats";
-import {
-	deleteMonitorChecksByTeamId,
-	addDemoMonitors,
-	deleteAllMonitors,
-} from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { useFetchSettings, useSaveSettings } from "../../Hooks/useFetchSettings";
-import { UseDeleteMonitorStats } from "../../Hooks/useDeleteMonitorStats";
-import { useIsAdmin } from "../../Hooks/useIsAdmin";
 
+import { useFetchSettings, useSaveSettings } from "../../Hooks/useFetchSettings";
+import { useIsAdmin } from "../../Hooks/useIsAdmin";
+import {
+	useAddDemoMonitors,
+	useDeleteAllMonitors,
+	UseDeleteMonitorStats,
+} from "../../Hooks/monitorHooks";
 // Constants
 const BREADCRUMBS = [{ name: `Settings`, path: "/settings" }];
 
@@ -43,15 +41,17 @@ const Settings = () => {
 	const [isSettingsLoading, settingsError] = useFetchSettings({
 		setSettingsData,
 	});
+	const [addDemoMonitors, isAddingDemoMonitors] = useAddDemoMonitors();
 
 	const [isSaving, saveError, saveSettings] = useSaveSettings();
+	const [deleteAllMonitors, isDeletingMonitors] = useDeleteAllMonitors();
 	const [deleteMonitorStats, isDeletingMonitorStats] = UseDeleteMonitorStats();
 
 	// Setup
 	const isAdmin = useIsAdmin();
 	const theme = useTheme();
 	const HEADING_SX = { mt: theme.spacing(2), mb: theme.spacing(2) };
-	const { t, i18n } = useTranslation();
+	const { t } = useTranslation();
 	const dispatch = useDispatch();
 
 	// Handlers
@@ -101,30 +101,12 @@ const Settings = () => {
 		}
 
 		if (name === "demo") {
-			try {
-				const action = await dispatch(addDemoMonitors());
-				if (addDemoMonitors.fulfilled.match(action)) {
-					createToast({ body: t("settingsDemoMonitorsAdded") });
-				} else {
-					createToast({ body: t("settingsFailedToAddDemoMonitors") });
-				}
-			} catch (error) {
-				createToast({ body: t("settingsFailedToAddDemoMonitors") });
-			}
+			await addDemoMonitors();
 			return;
 		}
 
 		if (name === "deleteMonitors") {
-			try {
-				const action = await dispatch(deleteAllMonitors());
-				if (deleteAllMonitors.fulfilled.match(action)) {
-					createToast({ body: t("settingsMonitorsDeleted") });
-				} else {
-					createToast({ body: t("settingsFailedToDeleteMonitors") });
-				}
-			} catch (error) {
-				createToast({ body: t("settingsFailedToDeleteMonitors") });
-			}
+			await deleteAllMonitors();
 			return;
 		}
 
@@ -185,7 +167,9 @@ const Settings = () => {
 				isAdmin={isAdmin}
 				HEADER_SX={HEADING_SX}
 				handleChange={handleChange}
-				isLoading={isSettingsLoading || isSaving || isDeletingMonitorStats}
+				isLoading={
+					isSettingsLoading || isSaving || isDeletingMonitorStats || isAddingDemoMonitors
+				}
 			/>
 			<SettingsEmail
 				isAdmin={isAdmin}
@@ -219,7 +203,9 @@ const Settings = () => {
 				}}
 			>
 				<Button
-					loading={isSaving || isDeletingMonitorStats || isSettingsLoading}
+					loading={
+						isSaving || isDeletingMonitorStats || isSettingsLoading || isDeletingMonitors
+					}
 					disabled={Object.keys(errors).length > 0}
 					variant="contained"
 					color="accent"