refactor to use new settings return type

client/src/Hooks/useFetchSettings.js

@@ -3,7 +3,7 @@ import { networkService } from "../main";
 import { createToast } from "../Utils/toastUtils";
 import { useTranslation } from "react-i18next";
 
-const useFetchSettings = ({ setSettings }) => {
+const useFetchSettings = ({ setSettingsData }) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(undefined);
 	useEffect(() => {
@@ -11,7 +11,7 @@ const useFetchSettings = ({ setSettings }) => {
 			setIsLoading(true);
 			try {
 				const response = await networkService.getAppSettings();
-				setSettings(response?.data?.data);
+				setSettingsData(response?.data?.data);
 			} catch (error) {
 				createToast({ body: "Failed to fetch settings" });
 				setError(error);

client/src/Pages/Settings/SettingsDemoMonitors.jsx

@@ -8,12 +8,8 @@ import { PropTypes } from "prop-types";
 import { useTranslation } from "react-i18next";
 import Dialog from "../../Components/Dialog";
 import { useState } from "react";
-const SettingsDemoMonitors = ({
-	isLoading,
-	authIsLoading,
-	checksIsLoading,
-	handleChange,
-}) => {
+
+const SettingsDemoMonitors = ({ HEADER_SX, handleChange, isLoading }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 	// Local state
@@ -23,16 +19,14 @@ const SettingsDemoMonitors = ({
 			<ConfigBox>
 				<Box>
 					<Typography component="h1">{t("settingsDemoMonitors")}</Typography>
-					<Typography sx={{ mt: theme.spacing(2) }}>
-						{t("settingsDemoMonitorsDescription")}
-					</Typography>
+					<Typography sx={HEADER_SX}>{t("settingsDemoMonitorsDescription")}</Typography>
 				</Box>
 				<Box>
 					<Typography>{t("settingsAddDemoMonitors")}</Typography>
 					<Button
 						variant="contained"
 						color="accent"
-						loading={isLoading || authIsLoading || checksIsLoading}
+						loading={isLoading}
 						onClick={() => {
 							const syntheticEvent = {
 								target: {
@@ -59,7 +53,7 @@ const SettingsDemoMonitors = ({
 					<Button
 						variant="contained"
 						color="error"
-						loading={isLoading || authIsLoading || checksIsLoading}
+						loading={isLoading}
 						onClick={() => setIsOpen(true)}
 						sx={{ mt: theme.spacing(4) }}
 					>
@@ -81,7 +75,7 @@ const SettingsDemoMonitors = ({
 						handleChange(syntheticEvent);
 						setIsOpen(false);
 					}}
-					isLoading={isLoading || authIsLoading || checksIsLoading}
+					isLoading={isLoading}
 				/>
 			</ConfigBox>
 		</>
@@ -89,10 +83,8 @@ const SettingsDemoMonitors = ({
 };
 
 SettingsDemoMonitors.propTypes = {
-	isLoading: PropTypes.bool,
-	authIsLoading: PropTypes.bool,
-	checksIsLoading: PropTypes.bool,
 	handleChange: PropTypes.func,
+	HEADER_SX: PropTypes.object,
 };
 
 export default SettingsDemoMonitors;

client/src/Pages/Settings/SettingsPagespeed.jsx

@@ -11,26 +11,28 @@ import { PropTypes } from "prop-types";
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-const SettingsPagespeed = ({ HEADING_SX, settings, setSettings }) => {
+const SettingsPagespeed = ({
+	HEADING_SX,
+	settingsData,
+	setSettingsData,
+	isApiKeySet,
+}) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
 	// Local state
 	const [apiKey, setApiKey] = useState("");
-	const [isApiKeySet, setIsApiKeySet] = useState(false);
 	const [hasBeenReset, setHasBeenReset] = useState(false);
 
 	// Handler
 	const handleChange = (e) => {
 		setApiKey(e.target.value);
-		setSettings({ ...settings, pagespeedApiKey: e.target.value });
+		setSettingsData({
+			...settingsData,
+			settings: { ...settingsData.settings, pagespeedApiKey: e.target.value },
+		});
 	};
 
-	useEffect(() => {
-		console.log(settings);
-		setIsApiKeySet(Boolean(settings.pagespeedApiKey) && apiKey === "");
-	}, [settings, apiKey]);
-
 	return (
 		<ConfigBox>
 			<Box>
@@ -56,7 +58,10 @@ const SettingsPagespeed = ({ HEADING_SX, settings, setSettings }) => {
 						<Button
 							onClick={() => {
 								setApiKey("");
-								setSettings({ ...settings, pagespeedApiKey: "" });
+								setSettingsData({
+									...settingsData,
+									settings: { ...settingsData.settings, pagespeedApiKey: "" },
+								});
 								setHasBeenReset(true);
 							}}
 							variant="contained"
@@ -74,8 +79,9 @@ const SettingsPagespeed = ({ HEADING_SX, settings, setSettings }) => {
 
 SettingsPagespeed.propTypes = {
 	HEADING_SX: PropTypes.object,
-	settings: PropTypes.object,
-	setSettings: PropTypes.func,
+	settingsData: PropTypes.object,
+	setSettingsData: PropTypes.func,
+	isApiKeySet: PropTypes.bool,
 };
 
 export default SettingsPagespeed;

client/src/Pages/Settings/SettingsStats.jsx

@@ -12,7 +12,7 @@ import { PropTypes } from "prop-types";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 
-const SettingsStats = ({ HEADING_SX, handleChange, settings, errors }) => {
+const SettingsStats = ({ HEADING_SX, handleChange, settingsData, errors }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const [isOpen, setIsOpen] = useState(false);
@@ -34,7 +34,7 @@ const SettingsStats = ({ HEADING_SX, handleChange, settings, errors }) => {
 					name="checkTTL"
 					label={t("settingsTTLLabel")}
 					optionalLabel={t("settingsTTLOptionalLabel")}
-					value={settings?.checkTTL ?? ""}
+					value={settingsData?.settings?.checkTTL ?? ""}
 					onChange={handleChange}
 					type="number"
 					error={errors.checkTTL ? true : false}
@@ -77,7 +77,7 @@ const SettingsStats = ({ HEADING_SX, handleChange, settings, errors }) => {
 SettingsStats.propTypes = {
 	HEADING_SX: PropTypes.object,
 	handleChange: PropTypes.func,
-	settings: PropTypes.object,
+	settingsData: PropTypes.object,
 	errors: PropTypes.object,
 };
 

client/src/Pages/Settings/index.jsx

@@ -6,6 +6,7 @@ import SettingsUI from "./SettingsUI";
 import SettingsPagespeed from "./SettingsPagespeed";
 import SettingsDemoMonitors from "./SettingsDemoMonitors";
 import SettingsAbout from "./SettingsAbout";
+import SettingsEmail from "./SettingsEmail";
 import Button from "@mui/material/Button";
 // Utils
 import { settingsValidation } from "../../Validation/validation";
@@ -15,7 +16,6 @@ import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 import { setTimezone, setMode, setLanguage } from "../../Features/UI/uiSlice";
-import { getAppSettings } from "../../Features/Settings/settingsSlice";
 import SettingsStats from "./SettingsStats";
 import {
 	deleteMonitorChecksByTeamId,
@@ -34,17 +34,14 @@ const Settings = () => {
 	const { user } = useSelector((state) => state.auth);
 
 	// Local state
-	const [settings, setSettings] = useState({});
+	const [settingsData, setSettingsData] = useState({});
 	const [errors, setErrors] = useState({});
-
 	// Network
 	const [isSettingsLoading, settingsError] = useFetchSettings({
-		settings,
-		setSettings,
+		setSettingsData,
 	});
 
 	const [isSaving, saveError, saveSettings] = useSaveSettings();
-
 	const [deleteMonitorStats, isDeletingMonitorStats] = UseDeleteMonitorStats();
 
 	// Setup
@@ -58,10 +55,15 @@ const Settings = () => {
 		const { name, value } = e.target;
 
 		// Build next state early
-		const newSettings = { ...settings, [name]: value };
+		const newSettingsData = {
+			...settingsData,
+			settings: { ...settingsData.settings, [name]: value },
+		};
 
 		// Validate
-		const { error } = settingsValidation.validate(newSettings, { abortEarly: false });
+		const { error } = settingsValidation.validate(newSettingsData.settings, {
+			abortEarly: false,
+		});
 		if (!error || error.details.length === 0) {
 			setErrors({});
 		} else {
@@ -118,11 +120,13 @@ const Settings = () => {
 			return;
 		}
 
-		setSettings(newSettings);
+		setSettingsData(newSettingsData);
 	};
 
 	const handleSave = () => {
-		const { error } = settingsValidation.validate(settings, { abortEarly: false });
+		const { error } = settingsValidation.validate(settingsData.settings, {
+			abortEarly: false,
+		});
 		if (!error || error.details.length === 0) {
 			setErrors({});
 		} else {
@@ -132,7 +136,7 @@ const Settings = () => {
 			});
 			setErrors(newErrors);
 		}
-		saveSettings(settings);
+		saveSettings(settingsData?.settings);
 	};
 
 	return (
@@ -152,21 +156,27 @@ const Settings = () => {
 			/>
 			<SettingsPagespeed
 				HEADING_SX={HEADING_SX}
-				settings={settings}
-				setSettings={setSettings}
+				settingsData={settingsData}
+				setSettingsData={setSettingsData}
+				isApiKeySet={settingsData?.pagespeedKeySet ?? false}
 			/>
 			<SettingsStats
 				HEADING_SX={HEADING_SX}
-				settings={settings}
-				setSettings={setSettings}
+				settingsData={settingsData}
 				handleChange={handleChange}
 				errors={errors}
 			/>
 			<SettingsDemoMonitors
-				isLoading={false}
-				authIsLoading={false}
-				checksIsLoading={false}
+				HEADER_SX={HEADING_SX}
 				handleChange={handleChange}
+				isLoading={isSettingsLoading || isSaving || isDeletingMonitorStats}
+			/>
+			<SettingsEmail
+				HEADER_SX={HEADING_SX}
+				handleChange={handleChange}
+				settingsData={settingsData}
+				setSettingsData={setSettingsData}
+				isPasswordSet={settingsData?.emailPasswordSet ?? false}
 			/>
 			<SettingsAbout />
 			<Stack