hello-theme/modules/admin-home/assets/js/components/settings/settings-provider.js

import { createContext, useEffect, useState } from 'react';
import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';
import { dispatch } from '@wordpress/data';

export const SettingsContext = createContext();

export const SettingsProvider = ({ children }) => {
	const [isLoading, setIsLoading] = useState(true);
	const [themeSettings, setThemeSettings] = useState({});
	const [settingsUpdated, setSettingsUpdated] = useState(false);
	const [whatsNew, setWhatsNew] = useState([]);

	const updateSetting = (settingsName, settingsValue) => {
		setThemeSettings({
			...themeSettings,
			[settingsName]: settingsValue,
		});
		setSettingsUpdated(true);
	};

	useEffect(() => {
		if (!settingsUpdated) {
			return;
		}

		setIsLoading(true);
		apiFetch({
			path: '/elementor-hello-elementor/v1/theme-settings',
			method: 'POST',
			data: { settings: themeSettings },
		})
			.then(async () => {
				dispatch('core/notices').createNotice(
					'success',
					__('Settings Saved', 'hello-elementor'),
					{
						type: 'snackbar',
						isDismissible: true,
					},
				);
			})
			.catch(() => {
				dispatch('core/notices').createNotice(
					'error',
					__('Error when saving settings', 'hello-elementor'),
					{
						type: 'snackbar',
						isDismissible: true,
					},
				);
			})
			.finally(() => {
				setIsLoading(false);
				setSettingsUpdated(false);
			});
	}, [settingsUpdated, themeSettings]);

	useEffect(() => {
		Promise.all([
			apiFetch({ path: '/elementor-hello-elementor/v1/theme-settings' }),
			apiFetch({ path: '/elementor-hello-elementor/v1/whats-new' }),
		])
			.then(([settings, whatsNewData]) => {
				setWhatsNew(whatsNewData);
				setThemeSettings(settings.settings);
			})
			.finally(() => {
				setIsLoading(false);
			});
	}, []);

	return (
		<SettingsContext.Provider
			value={{
				themeSettings,
				updateSetting,
				isLoading,
				whatsNew,
			}}
		>
			{children}
		</SettingsContext.Provider>
	);
};