Last active
December 15, 2023 22:00
-
-
Save HardeepAsrani/950f4796759a5c7a29fb537837e3a47d to your computer and use it in GitHub Desktop.
useSettings.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* WordPress dependencies. | |
*/ | |
import api from '@wordpress/api'; | |
import { __ } from '@wordpress/i18n'; | |
import { dispatch } from '@wordpress/data'; | |
import { | |
useEffect, | |
useState | |
} from '@wordpress/element'; | |
/** | |
* useSettings Hook. | |
* | |
* useSettings hook to get/update WordPress' settings database. | |
* | |
* Setting field needs to be registered to REST for this function to work. | |
* | |
* This hook works similar to get_option and update_option in PHP just without the option for a default value. | |
* For notificiations to work, you need to add a Snackbar section to your React codebase if it isn't being | |
* used inside the block editor. | |
* | |
* @see https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/components/editor-snackbars/index.js | |
* @author Hardeep Asrani <[email protected]> | |
* @version 1.1 | |
* | |
*/ | |
const useSettings = () => { | |
const { createNotice } = dispatch( 'core/notices' ); | |
const [ settings, setSettings ] = useState({}); | |
const [ status, setStatus ] = useState( 'loading' ); | |
const getSettings = () => { | |
api.loadPromise.then( async() => { | |
try { | |
const settings = new api.models.Settings(); | |
const response = await settings.fetch(); | |
setSettings( response ); | |
} catch ( error ) { | |
setStatus( 'error' ); | |
} finally { | |
setStatus( 'loaded' ); | |
} | |
}); | |
}; | |
useEffect( () => { | |
getSettings(); | |
}, []); | |
const getOption = option => { | |
return settings?.[option]; | |
}; | |
const updateOption = ( option, value, success = __( 'Settings saved.', 'textdomain' ) ) => { | |
setStatus( 'saving' ); | |
const save = new api.models.Settings({ [option]: value }).save(); | |
save.success( ( response, status ) => { | |
if ( 'success' === status ) { | |
setStatus( 'loaded' ); | |
createNotice( | |
'success', | |
success, | |
{ | |
isDismissible: true, | |
type: 'snackbar' | |
} | |
); | |
} | |
if ( 'error' === status ) { | |
setStatus( 'error' ); | |
createNotice( | |
'error', | |
__( 'An unknown error occurred.', 'textdomain' ), | |
{ | |
isDismissible: true, | |
type: 'snackbar' | |
} | |
); | |
} | |
getSettings(); | |
}); | |
save.error( ( response ) => { | |
setStatus( 'error' ); | |
createNotice( | |
'error', | |
response.responseJSON.message ? response.responseJSON.message : __( 'An unknown error occurred.', 'textdomain' ), | |
{ | |
isDismissible: true, | |
type: 'snackbar' | |
} | |
); | |
}); | |
}; | |
return [ getOption, updateOption, status ]; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment