From d84ab9f5eaf1eff8495e6c6a6ec4da98b097930e Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 5 Feb 2025 18:51:41 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20Styles=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/styling/action-types.js | 11 ++---- .../resources/js/data/styling/actions.js | 26 +++++++++---- .../resources/js/data/styling/controls.js | 23 ----------- .../resources/js/data/styling/index.js | 5 +-- .../resources/js/data/styling/resolvers.js | 39 ++++++++++--------- 5 files changed, 43 insertions(+), 61 deletions(-) delete mode 100644 modules/ppcp-settings/resources/js/data/styling/controls.js diff --git a/modules/ppcp-settings/resources/js/data/styling/action-types.js b/modules/ppcp-settings/resources/js/data/styling/action-types.js index d487b1f5f..ca5da189d 100644 --- a/modules/ppcp-settings/resources/js/data/styling/action-types.js +++ b/modules/ppcp-settings/resources/js/data/styling/action-types.js @@ -6,13 +6,10 @@ export default { // Transient data. - SET_TRANSIENT: 'STYLE:SET_TRANSIENT', + SET_TRANSIENT: 'ppcp/style/SET_TRANSIENT', // Persistent data. - SET_PERSISTENT: 'STYLE:SET_PERSISTENT', - RESET: 'STYLE:RESET', - HYDRATE: 'STYLE:HYDRATE', - - // Controls - always start with "DO_". - DO_PERSIST_DATA: 'STYLE:DO_PERSIST_DATA', + SET_PERSISTENT: 'ppcp/style/SET_PERSISTENT', + RESET: 'ppcp/style/RESET', + HYDRATE: 'ppcp/style/HYDRATE', }; diff --git a/modules/ppcp-settings/resources/js/data/styling/actions.js b/modules/ppcp-settings/resources/js/data/styling/actions.js index f7bdb4339..48c248c2b 100644 --- a/modules/ppcp-settings/resources/js/data/styling/actions.js +++ b/modules/ppcp-settings/resources/js/data/styling/actions.js @@ -7,10 +7,10 @@ * @file */ -import { select } from '@wordpress/data'; +import apiFetch from '@wordpress/api-fetch'; import ACTION_TYPES from './action-types'; -import { STORE_NAME } from './constants'; +import { REST_PERSIST_PATH } from './constants'; /** * @typedef {Object} Action An action object that is handled by a reducer or control. @@ -69,12 +69,22 @@ export const setPersistent = ( prop, value ) => ( { export const setIsReady = ( state ) => setTransient( 'isReady', state ); /** - * Side effect. Triggers the persistence of store data to the server. + * Thunk action creator. Triggers the persistence of store data to the server. * - * @return {Action} The action. + * @return {Function} The thunk function. */ -export const persist = function* () { - const data = yield select( STORE_NAME ).persistentData(); +export function persist() { + return async ( { select } ) => { + const data = select.persistentData(); - yield { type: ACTION_TYPES.DO_PERSIST_DATA, data }; -}; + try { + await apiFetch( { + path: REST_PERSIST_PATH, + method: 'POST', + data, + } ); + } catch ( e ) { + console.error( 'Error saving progress.', e ); + } + }; +} diff --git a/modules/ppcp-settings/resources/js/data/styling/controls.js b/modules/ppcp-settings/resources/js/data/styling/controls.js deleted file mode 100644 index 9295b62bc..000000000 --- a/modules/ppcp-settings/resources/js/data/styling/controls.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Controls: Implement side effects, typically asynchronous operations. - * - * Controls use ACTION_TYPES keys as identifiers. - * They are triggered by corresponding actions and handle external interactions. - * - * @file - */ - -import apiFetch from '@wordpress/api-fetch'; - -import { REST_PERSIST_PATH } from './constants'; -import ACTION_TYPES from './action-types'; - -export const controls = { - async [ ACTION_TYPES.DO_PERSIST_DATA ]( { data } ) { - return await apiFetch( { - path: REST_PERSIST_PATH, - method: 'POST', - data, - } ); - }, -}; diff --git a/modules/ppcp-settings/resources/js/data/styling/index.js b/modules/ppcp-settings/resources/js/data/styling/index.js index 3bd6e4459..ef8fc1b80 100644 --- a/modules/ppcp-settings/resources/js/data/styling/index.js +++ b/modules/ppcp-settings/resources/js/data/styling/index.js @@ -1,13 +1,11 @@ import { createReduxStore, register } from '@wordpress/data'; -import { controls as wpControls } from '@wordpress/data-controls'; import { STORE_NAME } from './constants'; import reducer from './reducer'; import * as selectors from './selectors'; import * as actions from './actions'; import * as hooks from './hooks'; -import { resolvers } from './resolvers'; -import { controls } from './controls'; +import * as resolvers from './resolvers'; /** * Initializes and registers the settings store with WordPress data layer. @@ -18,7 +16,6 @@ import { controls } from './controls'; export const initStore = () => { const store = createReduxStore( STORE_NAME, { reducer, - controls: { ...wpControls, ...controls }, actions, selectors, resolvers, diff --git a/modules/ppcp-settings/resources/js/data/styling/resolvers.js b/modules/ppcp-settings/resources/js/data/styling/resolvers.js index e59794746..6ea82e35c 100644 --- a/modules/ppcp-settings/resources/js/data/styling/resolvers.js +++ b/modules/ppcp-settings/resources/js/data/styling/resolvers.js @@ -8,29 +8,30 @@ * @file */ -import { dispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { apiFetch } from '@wordpress/data-controls'; +import apiFetch from '@wordpress/api-fetch'; -import { STORE_NAME, REST_HYDRATE_PATH } from './constants'; +import { REST_HYDRATE_PATH } from './constants'; -export const resolvers = { - /** - * Retrieve settings from the site's REST API. - */ - *persistentData() { +/** + * Retrieve settings from the site's REST API. + */ +export function persistentData() { + return async ( { dispatch, registry } ) => { try { - const result = yield apiFetch( { path: REST_HYDRATE_PATH } ); + const result = await apiFetch( { path: REST_HYDRATE_PATH } ); - yield dispatch( STORE_NAME ).hydrate( result ); - yield dispatch( STORE_NAME ).setIsReady( true ); + await dispatch.hydrate( result ); + await dispatch.setIsReady( true ); } catch ( e ) { - yield dispatch( 'core/notices' ).createErrorNotice( - __( - 'Error retrieving style-details.', - 'woocommerce-paypal-payments' - ) - ); + await registry + .dispatch( 'core/notices' ) + .createErrorNotice( + __( + 'Error retrieving Styling details.', + 'woocommerce-paypal-payments' + ) + ); } - }, -}; + }; +}