move state to parent

client/src/Hooks/settingsHooks.js

@@ -3,7 +3,7 @@ import { networkService } from "../main";
 import { createToast } from "../Utils/toastUtils";
 import { useTranslation } from "react-i18next";
 
-const useFetchSettings = ({ setSettingsData }) => {
+const useFetchSettings = ({ setSettingsData, setIsApiKeySet, setIsEmailPasswordSet }) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(undefined);
 	useEffect(() => {
@@ -12,6 +12,8 @@ const useFetchSettings = ({ setSettingsData }) => {
 			try {
 				const response = await networkService.getAppSettings();
 				setSettingsData(response?.data?.data);
+				setIsApiKeySet(response?.data?.data?.pagespeedKeySet);
+				setIsEmailPasswordSet(response?.data?.data?.emailPasswordSet);
 			} catch (error) {
 				createToast({ body: "Failed to fetch settings" });
 				setError(error);
@@ -20,12 +22,18 @@ const useFetchSettings = ({ setSettingsData }) => {
 			}
 		};
 		fetchSettings();
-	}, []);
+	}, [setSettingsData]);
 
 	return [isLoading, error];
 };
 
-const useSaveSettings = () => {
+const useSaveSettings = ({
+	setSettingsData,
+	setIsApiKeySet,
+	setApiKeyHasBeenReset,
+	setIsEmailPasswordSet,
+	setEmailPasswordHasBeenReset,
+}) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(undefined);
 	const { t } = useTranslation();
@@ -39,7 +47,15 @@ const useSaveSettings = () => {
 					ttl: settings.checkTTL,
 				});
 			}
-			console.log({ settingsResponse });
+			setIsApiKeySet(settingsResponse.data.data.pagespeedKeySet);
+			setIsEmailPasswordSet(settingsResponse.data.data.emailPasswordSet);
+			if (settingsResponse.data.data.pagespeedKeySet === true) {
+				setApiKeyHasBeenReset(false);
+			}
+			if (settingsResponse.data.data.emailPasswordSet === true) {
+				setEmailPasswordHasBeenReset(false);
+			}
+			setSettingsData(settingsResponse.data.data);
 			createToast({ body: t("settingsSuccessSaved") });
 		} catch (error) {
 			createToast({ body: t("settingsFailedToSave") });

client/src/Pages/Settings/SettingsEmail.jsx

@@ -7,7 +7,7 @@ import Stack from "@mui/material/Stack";
 // Utils
 import { useTheme } from "@emotion/react";
 import { PropTypes } from "prop-types";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
 import { useSendTestEmail } from "../../Hooks/useSendTestEmail";
@@ -20,7 +20,9 @@ const SettingsEmail = ({
 	handleChange,
 	settingsData,
 	setSettingsData,
-	isPasswordSet,
+	isEmailPasswordSet,
+	emailPasswordHasBeenReset,
+	setEmailPasswordHasBeenReset,
 }) => {
 	// Setup
 	const { t } = useTranslation();
@@ -43,7 +45,6 @@ const SettingsEmail = ({
 	} = settingsData?.settings || {};
 	// Local state
 	const [password, setPassword] = useState("");
-	const [hasBeenReset, setHasBeenReset] = useState(false);
 
 	// Network
 	const [isSending, , sendTestEmail] = useSendTestEmail(); // Using empty placeholder for unused error variable
@@ -152,7 +153,7 @@ const SettingsEmail = ({
 							onChange={handleChange}
 						/>
 					</Box>
-					{(isPasswordSet === false || hasBeenReset === true) && (
+					{(isEmailPasswordSet === false || emailPasswordHasBeenReset === true) && (
 						<Box>
 							<Typography>{t("settingsEmailPassword")}</Typography>
 							<TextInput
@@ -165,7 +166,8 @@ const SettingsEmail = ({
 							/>
 						</Box>
 					)}
-					{isPasswordSet === true && hasBeenReset === false && (
+
+					{isEmailPasswordSet === true && emailPasswordHasBeenReset === false && (
 						<Box>
 							<Typography>{t("settingsEmailFieldResetLabel")}</Typography>
 							<Button
@@ -175,7 +177,7 @@ const SettingsEmail = ({
 										...settingsData,
 										settings: { ...settingsData.settings, systemEmailPassword: "" },
 									});
-									setHasBeenReset(true);
+									setEmailPasswordHasBeenReset(true);
 								}}
 								variant="contained"
 								color="error"

client/src/Pages/Settings/SettingsPagespeed.jsx

@@ -17,13 +17,14 @@ const SettingsPagespeed = ({
 	settingsData,
 	setSettingsData,
 	isApiKeySet,
+	apiKeyHasBeenReset,
+	setApiKeyHasBeenReset,
 }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
 	// Local state
 	const [apiKey, setApiKey] = useState("");
-	const [hasBeenReset, setHasBeenReset] = useState(false);
 
 	// Handler
 	const handleChange = (e) => {
@@ -50,7 +51,7 @@ const SettingsPagespeed = ({
 				<Typography sx={HEADING_SX}>{t("pageSpeedApiKeyFieldDescription")}</Typography>
 			</Box>
 			<Stack gap={theme.spacing(20)}>
-				{(isApiKeySet === false || hasBeenReset === true) && (
+				{(isApiKeySet === false || apiKeyHasBeenReset === true) && (
 					<TextInput
 						name="pagespeedApiKey"
 						label={t("pageSpeedApiKeyFieldLabel")}
@@ -62,7 +63,7 @@ const SettingsPagespeed = ({
 					/>
 				)}
 
-				{isApiKeySet === true && hasBeenReset === false && (
+				{isApiKeySet === true && apiKeyHasBeenReset === false && (
 					<Box>
 						<Typography>{t("pageSpeedApiKeyFieldResetLabel")}</Typography>
 						<Button
@@ -72,7 +73,7 @@ const SettingsPagespeed = ({
 									...settingsData,
 									settings: { ...settingsData.settings, pagespeedApiKey: "" },
 								});
-								setHasBeenReset(true);
+								setApiKeyHasBeenReset(true);
 							}}
 							variant="contained"
 							color="error"
@@ -93,6 +94,9 @@ SettingsPagespeed.propTypes = {
 	settingsData: PropTypes.object,
 	setSettingsData: PropTypes.func,
 	isApiKeySet: PropTypes.bool,
+	setIsApiKeySet: PropTypes.func,
+	apiKeyHasBeenReset: PropTypes.bool,
+	setApiKeyHasBeenReset: PropTypes.func,
 };
 
 export default SettingsPagespeed;

client/src/Pages/Settings/index.jsx

@@ -31,19 +31,32 @@ const BREADCRUMBS = [{ name: `Settings`, path: "/settings" }];
 const Settings = () => {
 	// Redux state
 	const { mode, language, timezone, showURL } = useSelector((state) => state.ui);
-	const { user } = useSelector((state) => state.auth);
 
 	// Local state
 	const [settingsData, setSettingsData] = useState({});
 	const [errors, setErrors] = useState({});
+	const [isApiKeySet, setIsApiKeySet] = useState(settingsData?.pagespeedKeySet ?? false);
+	const [apiKeyHasBeenReset, setApiKeyHasBeenReset] = useState(false);
+	const [isEmailPasswordSet, setIsEmailPasswordSet] = useState(
+		settingsData?.emailPasswordSet ?? false
+	);
+	const [emailPasswordHasBeenReset, setEmailPasswordHasBeenReset] = useState(false);
 
 	// Network
 	const [isSettingsLoading, settingsError] = useFetchSettings({
 		setSettingsData,
+		setIsApiKeySet,
+		setIsEmailPasswordSet,
 	});
 	const [addDemoMonitors, isAddingDemoMonitors] = useAddDemoMonitors();
 
-	const [isSaving, saveError, saveSettings] = useSaveSettings();
+	const [isSaving, saveError, saveSettings] = useSaveSettings({
+		setSettingsData,
+		setIsApiKeySet,
+		setApiKeyHasBeenReset,
+		setIsEmailPasswordSet,
+		setEmailPasswordHasBeenReset,
+	});
 	const [deleteAllMonitors, isDeletingMonitors] = useDeleteAllMonitors();
 	const [deleteMonitorStats, isDeletingMonitorStats] = useDeleteMonitorStats();
 
@@ -53,7 +66,6 @@ const Settings = () => {
 	const HEADING_SX = { mt: theme.spacing(2), mb: theme.spacing(2) };
 	const { t } = useTranslation();
 	const dispatch = useDispatch();
-
 	// Handlers
 	const handleChange = async (e) => {
 		const { name, value, checked } = e.target;
@@ -159,7 +171,9 @@ const Settings = () => {
 				HEADING_SX={HEADING_SX}
 				settingsData={settingsData}
 				setSettingsData={setSettingsData}
-				isApiKeySet={settingsData?.pagespeedKeySet ?? false}
+				isApiKeySet={isApiKeySet}
+				apiKeyHasBeenReset={apiKeyHasBeenReset}
+				setApiKeyHasBeenReset={setApiKeyHasBeenReset}
 			/>
 			<SettingsURL
 				HEADING_SX={HEADING_SX}
@@ -187,7 +201,9 @@ const Settings = () => {
 				handleChange={handleChange}
 				settingsData={settingsData}
 				setSettingsData={setSettingsData}
-				isPasswordSet={settingsData?.emailPasswordSet ?? false}
+				isEmailPasswordSet={isEmailPasswordSet}
+				emailPasswordHasBeenReset={emailPasswordHasBeenReset}
+				setEmailPasswordHasBeenReset={setEmailPasswordHasBeenReset}
 			/>
 			<SettingsAbout />
 			<Stack