diff --git a/modules/ppcp-settings/resources/js/data/store.js b/modules/ppcp-settings/resources/js/data/store.js index a4acaf548..01b713cc5 100644 --- a/modules/ppcp-settings/resources/js/data/store.js +++ b/modules/ppcp-settings/resources/js/data/store.js @@ -1,20 +1,23 @@ import { createReduxStore, register, combineReducers } from '@wordpress/data'; import { controls } from '@wordpress/data-controls'; import { STORE_NAME } from './constants'; -import * as onboarding from './onboarding'; + +// Import Redux modules. +import * as Onboarding from './onboarding'; const actions = {}; const selectors = {}; const resolvers = {}; -[ onboarding ].forEach( ( item ) => { - Object.assign( actions, { ...item.actions } ); - Object.assign( selectors, { ...item.selectors } ); - Object.assign( resolvers, { ...item.resolvers } ); +[ Onboarding ].forEach( ( item ) => { + Object.assign( actions, { ...( item.actions || {} ) } ); + Object.assign( selectors, { ...( item.selectors || {} ) } ); + Object.assign( resolvers, { ...( item.resolvers || {} ) } ); + Object.assign( controls, { ...( item.controls || {} ) } ); } ); const reducer = combineReducers( { - onboarding: onboarding.reducer, + [ Onboarding.STORE_KEY ]: Onboarding.reducer, } ); export const initStore = () => { @@ -28,31 +31,53 @@ export const initStore = () => { register( store ); - /* eslint-disable no-console */ - // Provide a debug tool to inspect the Redux store via the JS console. - if ( window.ppcpSettings?.debug && console?.groupCollapsed ) { - window.ppcpSettings.dumpStore = () => { - const storeSelector = `wp.data.select('${ STORE_NAME }')`; - console.group( `[STORE] ${ storeSelector }` ); - - const storeState = wp.data.select( STORE_NAME ); - Object.keys( selectors ).forEach( ( selector ) => { - console.groupCollapsed( `[SELECTOR] .${ selector }()` ); - console.table( storeState[ selector ]() ); - console.groupEnd(); - } ); - - console.groupEnd(); - }; - window.ppcpSettings.resetStore = () => { - wp.data.dispatch( STORE_NAME ).resetOnboarding(); - wp.data.dispatch( STORE_NAME ).persist(); - }; - window.ppcpSettings.startOnboarding = () => { - wp.data.dispatch( STORE_NAME ).setCompleted( false ); - wp.data.dispatch( STORE_NAME ).setOnboardingStep( 0 ); - wp.data.dispatch( STORE_NAME ).persist(); - }; - } - /* eslint-enable no-console */ + addDebugTools(); +}; + +const addDebugTools = () => { + const context = window.ppcpSettings; + + // Provide a debug tool to inspect the Redux store via the JS console. + if ( ! context?.debug ) { + return; + } + + const getSelectors = () => wp.data.select( STORE_NAME ); + const getActions = () => wp.data.dispatch( STORE_NAME ); + + context.dumpStore = () => { + /* eslint-disable no-console */ + if ( ! console?.groupCollapsed ) { + console.error( 'console.groupCollapsed is not supported.' ); + return; + } + + const storeSelector = `wp.data.select('${ STORE_NAME }')`; + console.group( `[STORE] ${ storeSelector }` ); + + const select = getSelectors(); + Object.keys( selectors ).forEach( ( selector ) => { + console.groupCollapsed( `[SELECTOR] .${ selector }()` ); + console.table( select[ selector ]() ); + console.groupEnd(); + } ); + + console.groupEnd(); + /* eslint-enable no-console */ + }; + + context.resetStore = () => { + const dispatch = getActions(); + + dispatch.resetOnboarding(); + dispatch.persist(); + }; + + context.startOnboarding = () => { + const dispatch = getActions(); + + dispatch.setCompleted( false ); + dispatch.setOnboardingStep( 0 ); + dispatch.persist(); + }; };