File Manager

📁 Media Files

📁 .. (Parent Directory) 📁 hoc/ 📁 layout/ 📁 schema-utils/ ⚡ character-limit-status.js ⚡ confirmation-dialog.js ⚡ dashboard-breadcrumb.js ⚡ error-boundary.js ⚡ global-remove-image-button.js ⚡ global-save-button.js ⚡ global-search.js ⚡ icon-badge.js ⚡ improve-with-ai-button.js ⚡ loading-skeleton.js ⚡ logo.js ⚡ media-preview.js ⚡ modal-wrapper.js ⚡ not-allowed.js ⚡ page-check-status-indicator.js ⚡ page-content-wrapper.js ⚡ page-header.js ⚡ preview-input-with-suffix.js ⚡ sidebar-skeleton.js ⚡ social-preview.js ⚡ tabs.js ⚡ tanstack-router-dev-tools.js ⚡ tooltip.js ⚡ upgrade-cta-alert.js ⚡ user-dropdown.js ⚡ version-badge.js

⬆️ Upload Files

📁 Create Folder

📄 Create File

💻 Terminal

📦 Extract Archive

⚡ Edit: global-save-button.js

Size: 3.32 KB | Modified: 2026-04-21 02:50:19

import { useRef, useState } from '@wordpress/element';
import { Button } from '@bsf/force-ui';
import { LoaderCircle, Check } from 'lucide-react';
import { __ } from '@wordpress/i18n';
import { ADMIN_SETTINGS_URL } from '@/global/constants/api';
import { STORE_NAME } from '@/admin-store/constants';
import { useSelect, useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import { DotIcon } from '@/global/components/icons';

/* global toast */

const GlobalSaveButton = ( {
	onClick,
	onSuccess, // New prop for handling success callback
	buttonTextInitial = __( 'Save', 'surerank' ),
	icon,
	disabled,
	...props
} ) => {
	const [ buttonText, setButtonText ] = useState( buttonTextInitial );
	const [ saving, setSaving ] = useState( false );
	const saveCompleted = useRef( true );

const handleSaveClick = async () => {
		if ( saving || disabled || ! saveCompleted.current ) {
			return;
		}
		saveCompleted.current = false; // Reset for next save
		setSaving( true );
		setButtonText( __( 'Saving..', 'surerank' ) );

try {
			const response = await onClick();
			if ( ! response.success ) {
				throw new Error( response.message );
			}
			setButtonText( __( 'Saved', 'surerank' ) );

if ( onSuccess && typeof onSuccess === 'function' ) {
				await onSuccess( response );
			} else {
				toast.success(
					response?.message ||
						__( 'Settings saved successfully.', 'surerank' )
				);
			}

// Return a promise that resolves after the button text reset
			return new Promise( ( resolve ) => {
				setTimeout( () => {
					setButtonText( buttonTextInitial );
					saveCompleted.current = true;
					resolve( response );
				}, 1000 );
			} );
		} catch ( error ) {
			toast.error( __( 'Failed to save settings.', 'surerank' ), {
				description:
					error?.message || __( 'Please try again.', 'surerank' ),
			} );

setButtonText( buttonTextInitial );
			saveCompleted.current = true;
		} finally {
			setSaving( false );
		}
	};

return (
		<Button onClick={ handleSaveClick } icon={ getIcon() } { ...props }>
			{ buttonText }
		</Button>
	);
};

export const SaveSettingsButton = ( { onSuccess } ) => {
	const { unsavedSettings } = useSelect( ( select ) => {
		const { getUnsavedSettings } = select( STORE_NAME );
		return {
			unsavedSettings: getUnsavedSettings() || {},
		};
	}, [] );
	const { resetUnsavedSettings } = useDispatch( STORE_NAME );

const handleSave = async () => {
		const queryParams = { data: unsavedSettings };

const response = await apiFetch( {
			path: ADMIN_SETTINGS_URL,
			method: 'POST',
			data: queryParams,
		} );

if ( response.success ) {
			resetUnsavedSettings();
		}

return response;
	};

const hasUnsavedSettings = Object.keys( unsavedSettings || {} ).length > 0;

return (
		<GlobalSaveButton
			onClick={ handleSave }
			onSuccess={ onSuccess } // Pass the onSuccess callback
			className={
				! hasUnsavedSettings
					? 'opacity-60 bg-background-brand cursor-not-allowed pointer-events-none'
					: ''
			}
			icon={ hasUnsavedSettings ? <DotIcon /> : null }
		>
			{ __( 'Save', 'surerank' ) }
		</GlobalSaveButton>
	);
};

export default GlobalSaveButton;

Supports: PHP, ASPX, HTML, JavaScript, CSS and other text-based files

📥 Download

File manager