From 1ecb5ae6100902470e67ec1241c2d7ee5b6d257b Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 6 Feb 2025 14:29:06 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Settings=20store:=20Refact?= =?UTF-8?q?or=20to=20use=20thunks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/data/settings/action-types.js | 6 -- .../resources/js/data/settings/actions.js | 29 ++++++--- .../resources/js/data/settings/controls.js | 34 ---------- .../resources/js/data/settings/index.js | 5 +- .../resources/js/data/settings/resolvers.js | 63 +++++++------------ 5 files changed, 43 insertions(+), 94 deletions(-) delete mode 100644 modules/ppcp-settings/resources/js/data/settings/controls.js diff --git a/modules/ppcp-settings/resources/js/data/settings/action-types.js b/modules/ppcp-settings/resources/js/data/settings/action-types.js index d13c0cbcf..87a431f02 100644 --- a/modules/ppcp-settings/resources/js/data/settings/action-types.js +++ b/modules/ppcp-settings/resources/js/data/settings/action-types.js @@ -31,10 +31,4 @@ export default { * to set up the initial state with data from the server. */ HYDRATE: 'ppcp/settings/HYDRATE', - - /** - * Triggers the persistence of store data to the server. - * Used when changes need to be saved to the backend. - */ - DO_PERSIST_DATA: 'ppcp/settings/DO_PERSIST_DATA', }; diff --git a/modules/ppcp-settings/resources/js/data/settings/actions.js b/modules/ppcp-settings/resources/js/data/settings/actions.js index ef2877470..9a5ac0a7c 100644 --- a/modules/ppcp-settings/resources/js/data/settings/actions.js +++ b/modules/ppcp-settings/resources/js/data/settings/actions.js @@ -7,9 +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. @@ -70,12 +71,22 @@ export const setPersistent = ( prop, value ) => ( { export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady ); /** - * Side effect. Triggers the persistence of store data to the server. - * Yields an action with the current persistent data to be saved. + * 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(); - yield { type: ACTION_TYPES.DO_PERSIST_DATA, data }; -}; +export function persist() { + return async ( { select } ) => { + const data = select.persistentData(); + + 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/settings/controls.js b/modules/ppcp-settings/resources/js/data/settings/controls.js deleted file mode 100644 index 11e5e6a04..000000000 --- a/modules/ppcp-settings/resources/js/data/settings/controls.js +++ /dev/null @@ -1,34 +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'; - -/** - * Control handlers for settings store actions. - * Each handler maps to an ACTION_TYPE and performs the corresponding async operation. - */ -export const controls = { - /** - * Persists settings data to the server via REST API. - * Triggered by the DO_PERSIST_DATA action to save settings changes. - * - * @param {Object} action The action object - * @param {Object} action.data The settings data to persist - * @return {Promise} The API response - */ - 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/settings/index.js b/modules/ppcp-settings/resources/js/data/settings/index.js index bc7580adc..764203434 100644 --- a/modules/ppcp-settings/resources/js/data/settings/index.js +++ b/modules/ppcp-settings/resources/js/data/settings/index.js @@ -8,15 +8,13 @@ */ 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. @@ -27,7 +25,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/settings/resolvers.js b/modules/ppcp-settings/resources/js/data/settings/resolvers.js index da28dd66d..de0991223 100644 --- a/modules/ppcp-settings/resources/js/data/settings/resolvers.js +++ b/modules/ppcp-settings/resources/js/data/settings/resolvers.js @@ -8,50 +8,31 @@ * @file */ -import { dispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { apiFetch } from '@wordpress/data-controls'; -import { STORE_NAME, REST_HYDRATE_PATH } from './constants'; +import apiFetch from '@wordpress/api-fetch'; -export const resolvers = { - /** - * Retrieve PayPal settings from the site's REST API. - * Hydrates the store with the retrieved data and marks it as ready. - * - * @generator - * @yield {Object} API fetch and dispatch actions - */ - *persistentData() { +import { REST_HYDRATE_PATH } from './constants'; + +/** + * Retrieve settings from the site's REST API. + */ +export function persistentData() { + return async ( { dispatch, registry } ) => { try { - // Fetch settings data from REST API - const result = yield apiFetch( { - path: REST_HYDRATE_PATH, - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', - }, - } ); + const result = await apiFetch( { path: REST_HYDRATE_PATH } ); - // Update store with retrieved data - yield dispatch( STORE_NAME ).hydrate( result ); - // Mark store as ready for use - yield dispatch( STORE_NAME ).setIsReady( true ); + await dispatch.hydrate( result ); + await dispatch.setIsReady( true ); } catch ( e ) { - // Log detailed error information for debugging - console.error( 'Full error details:', { - error: e, - path: REST_HYDRATE_PATH, - store: STORE_NAME, - } ); - - // Display user-friendly error notice - yield dispatch( 'core/notices' ).createErrorNotice( - __( - 'Error retrieving PayPal settings details.', - 'woocommerce-paypal-payments' - ) - ); + // TODO: Add the module name to the error message. + await registry + .dispatch( 'core/notices' ) + .createErrorNotice( + __( + 'Error retrieving PayPal Settings details.', + 'woocommerce-paypal-payments' + ) + ); } - }, -}; + }; +}