fix: only fetch settings once; use the fetchSettings util

Author: Arukuen

src/deprecated/v2/welcome/admin.js

@@ -7,7 +7,7 @@ import {
 } from '@wordpress/element'
 import { send as ajaxSend } from '@wordpress/ajax'
 import { Spinner } from '@wordpress/components'
-import { loadPromise, models } from '@wordpress/api'
+import { models } from '@wordpress/api'
 
 /**
  * External dependencies
@@ -16,6 +16,7 @@ import {
 	i18n,
 	v2nonce as nonce,
 } from 'stackable'
+import { fetchSettings } from '~stackable/util/admin'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
 
 export class BlockToggler extends Component {
@@ -116,11 +117,8 @@ export const OptimizationSettings = ( { searchSettings } ) => {
 	const [ optimizeScriptLoad, setOptimizeScriptLoad ] = useState( false )
 
 	useEffect( () => {
-		loadPromise.then( () => {
-			const settings = new models.Settings()
-			settings.fetch().then( response => {
-				setOptimizeScriptLoad( !! response.stackable_optimize_script_load )
-			} )
+		fetchSettings().then( response => {
+			setOptimizeScriptLoad( !! response.stackable_optimize_script_load )
 		} )
 	}, [] )
 

src/welcome/admin.js

@@ -17,7 +17,7 @@ import domReady from '@wordpress/dom-ready'
 import {
 	Button, Flex, FlexItem, Spinner, CheckboxControl, Modal,
 } from '@wordpress/components'
-import { loadPromise, models } from '@wordpress/api'
+import { models } from '@wordpress/api'
 import { applyFilters } from '@wordpress/hooks'
 
 /**
@@ -31,7 +31,7 @@ import {
 	defaultBreakpoints,
 } from 'stackable'
 import classnames from 'classnames'
-import { importBlocks } from '~stackable/util/admin'
+import { fetchSettings, importBlocks } from '~stackable/util/admin'
 import { createRoot } from '~stackable/util/element'
 import AdminSelectSetting from '~stackable/components/admin-select-setting'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
@@ -309,11 +309,8 @@ const RestSettingsNotice = () => {
 	const [ error, setError ] = useState( null )
 
 	useEffect( () => {
-		loadPromise.then( () => {
-			const settings = new models.Settings()
-			settings.fetch().catch( error => {
-				setError( error )
-			} )
+		fetchSettings().catch( error => {
+			setError( error )
 		} )
 	}, [] )
 
@@ -536,13 +533,10 @@ const Settings = () => {
 	}, [ unsavedChanges, settings ] )
 
 	useEffect( () => {
-		loadPromise.then( () => {
-			const settings = new models.Settings()
-			settings.fetch().then( response => {
-				setSettings( response )
-				// Should only be set initially since we have to reload after setting for it to work with the backend
-				setHasV2Tab( hasV2Compatibility( response ) )
-			} )
+		fetchSettings().then( response => {
+			setSettings( response )
+			// Should only be set initially since we have to reload after setting for it to work with the backend
+			setHasV2Tab( hasV2Compatibility( response ) )
 		} )
 	}, [] )
 
@@ -830,12 +824,12 @@ const Responsiveness = props => {
 								label={ __( 'Tablet Breakpoint', i18n ) }
 								searchedSettings={ dynamicBreakpoints.children }
 								type="number"
-								value={ settings.stackable_dynamic_breakpoints.tablet || '' } // eslint-disable-line camelcase
+								value={ settings.stackable_dynamic_breakpoints?.tablet || '' } // eslint-disable-line camelcase
 								onChange={ value => {
 									handleSettingsChange( {
 										stackable_dynamic_breakpoints: { // eslint-disable-line camelcase
 											tablet: value,
-											mobile: settings.stackable_dynamic_breakpoints.mobile || '', // eslint-disable-line camelcase
+											mobile: settings.stackable_dynamic_breakpoints?.mobile || '', // eslint-disable-line camelcase
 										},
 									} )
 								} }
@@ -845,11 +839,11 @@ const Responsiveness = props => {
 								label={ __( 'Mobile Breakpoint', i18n ) }
 								searchedSettings={ dynamicBreakpoints.children }
 								type="number"
-								value={ settings.stackable_dynamic_breakpoints.mobile || '' } // eslint-disable-line camelcase
+								value={ settings.stackable_dynamic_breakpoints?.mobile || '' } // eslint-disable-line camelcase
 								onChange={ value => {
 									handleSettingsChange( {
 										stackable_dynamic_breakpoints: { // eslint-disable-line camelcase
-											tablet: settings.stackable_dynamic_breakpoints.tablet || '', // eslint-disable-line camelcase
+											tablet: settings.stackable_dynamic_breakpoints?.tablet || '', // eslint-disable-line camelcase
 											mobile: value,
 										},
 									} )