update: add changes tracking and disable button logic

elementor · Dec 2, 2024 · ac4f5b3 · ac4f5b3
1 parent df444a8
commit ac4f5b3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -4,7 +4,8 @@ import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
 const BottomBar = () => {
-	const { selectedMenu, iconDesign, iconPosition } = useSettings();
+	const { selectedMenu, iconDesign, iconPosition, hasChanges, setHasChanges } =
+		useSettings();
 	const { save } = useStorage();
 	const { success, error } = useToastNotification();
 
@@ -21,6 +22,7 @@ const BottomBar = () => {
 					},
 				}).then(() => {
 					success('Settings saved!');
+					setHasChanges(false);
 				});
 			} catch (e) {
 				error('Failed to save settings!');
@@ -36,7 +38,12 @@ const BottomBar = () => {
 			width="100%"
 			borderTop="1px solid rgba(0, 0, 0, 0.12)"
 		>
-			<Button variant="contained" color="info" onClick={saveSettings}>
+			<Button
+				variant="contained"
+				color="info"
+				onClick={saveSettings}
+				disabled={!hasChanges}
+			>
 				{__('Save Changes', 'pojo-accessibility')}
 			</Button>
 		</Box>

diff --git a/modules/settings/assets/js/hooks/use-icon-design.js b/modules/settings/assets/js/hooks/use-icon-design.js
@@ -1,13 +1,15 @@
 import { useSettings } from '@ea11y/hooks';
 
 export const useIconDesign = () => {
-	const { iconDesign, setIconDesign } = useSettings();
+	const { iconDesign, setIconDesign, setHasChanges } = useSettings();
 
 	const updateIconDesign = (newValues) => {
 		setIconDesign((prev) => ({
 			...prev,
 			...newValues,
 		}));
+
+		setHasChanges(true);
 	};
 
 	return { iconDesign, updateIconDesign };

diff --git a/modules/settings/assets/js/hooks/use-icon-positioon.js b/modules/settings/assets/js/hooks/use-icon-positioon.js
@@ -2,7 +2,7 @@ import { useSettings } from '@ea11y/hooks';
 import { useCallback } from '@wordpress/element';
 
 export const useIconPosition = () => {
-	const { iconPosition, setIconPosition } = useSettings();
+	const { iconPosition, setIconPosition, setHasChanges } = useSettings();
 
 	const updateIconPosition = useCallback(
 		(device, key, value) => {
@@ -13,6 +13,7 @@ export const useIconPosition = () => {
 					[key]: value,
 				},
 			}));
+			setHasChanges(true);
 		},
 		[setIconPosition],
 	);
@@ -32,6 +33,7 @@ export const useIconPosition = () => {
 				},
 			},
 		}));
+		setHasChanges(true);
 	};
 
 	return { iconPosition, updateIconPosition, updateExactPosition };

diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
@@ -63,6 +63,8 @@ export const SettingsProvider = ({ children }) => {
 			position: 'top-left',
 		},
 	});
+
+	const [hasChanges, setHasChanges] = useState(false);
 	return (
 		<SettingsContext.Provider
 			value={{
@@ -80,6 +82,8 @@ export const SettingsProvider = ({ children }) => {
 				setIconPosition,
 				iconDesign,
 				setIconDesign,
+				hasChanges,
+				setHasChanges,
 			}}
 		>
 			{children}