♻️ Refactor onboarding actions to use controls

modules/ppcp-settings/resources/js/data/onboarding/actions.js

@@ -1,7 +1,10 @@
-import { select } from '@wordpress/data';
-import { apiFetch } from '@wordpress/data-controls';
 import ACTION_TYPES from './action-types';
-import { NAMESPACE, STORE_NAME } from '../constants';
+
+/**
+ * @typedef {Object} Action An action object that is handled by a reducer or control.
+ * @property {string}  type    - The action type.
+ * @property {Object?} payload - Optional payload for the action.
+ */
 
 /**
  * Special. Resets all values in the onboarding store to initial defaults.
@@ -169,67 +172,23 @@ export const setProducts = ( products ) => {
 };
 
 /**
- * Attempts to establish a connection using client ID and secret via the server-side
- * connection endpoint.
+ * Side effect. Triggers the persistence of onboarding data to the server.
  *
- * @return {Object} The server response object
+ * @return {Action} The action.
  */
-export function* connectViaIdAndSecret() {
-	let result = null;
-
-	try {
-		const path = `${ NAMESPACE }/connect_manual`;
-		const { clientId, clientSecret, useSandbox } =
-			yield select( STORE_NAME ).getPersistentData();
-
-		yield setManualConnectionIsBusy( true );
-
-		result = yield apiFetch( {
-			path,
-			method: 'POST',
-			data: {
-				clientId,
-				clientSecret,
-				useSandbox,
-			},
-		} );
-	} catch ( e ) {
-		result = {
-			success: false,
-			error: e,
-		};
-	} finally {
-		yield setManualConnectionIsBusy( false );
-	}
-
-	return result;
-}
+export const persist = () => {
+	return {
+		type: ACTION_TYPES.DO_PERSIST_DATA,
+	};
+};
 
 /**
- * Saves the persistent details to the WP database.
+ * Side effect. Initiates a manual connection attempt using the provided client ID and secret.
  *
- * @return {boolean} True, if the values were successfully saved.
+ * @return {Action} The action.
  */
-export function* persist() {
-	let error = null;
-
-	try {
-		const path = `${ NAMESPACE }/onboarding`;
-		const data = select( STORE_NAME ).getPersistentData();
-
-		yield setIsSaving( true );
-
-		yield apiFetch( {
-			path,
-			method: 'post',
-			data,
-		} );
-	} catch ( e ) {
-		error = e;
-		console.error( 'Error saving progress.', e );
-	} finally {
-		yield setIsSaving( false );
-	}
-
-	return error === null;
-}
+export const connectViaIdAndSecret = () => {
+	return {
+		type: ACTION_TYPES.DO_MANUAL_CONNECTION,
+	};
+};

modules/ppcp-settings/resources/js/data/onboarding/constants.js

@@ -8,3 +8,22 @@
  */
 export const STORE_KEY = 'onboarding';
 
+/**
+ * REST path to persist data of this module to the WP DB.
+ *
+ * Used by: Controls
+ * See: OnboardingRestEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_PERSIST_PATH = 'onboarding';
+
+/**
+ * REST path to perform the manual connection check, using client ID and secret,
+ *
+ * Used by: Controls
+ * See: ConnectManualRestEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_MANUAL_CONNECTION_PATH = 'connect_manual';

modules/ppcp-settings/resources/js/data/onboarding/controls.js

@@ -0,0 +1,64 @@
+import { select } from '@wordpress/data';
+import { apiFetch } from '@wordpress/api-fetch';
+
+import { NAMESPACE, STORE_NAME } from '../constants';
+import { REST_PERSIST_PATH, REST_MANUAL_CONNECTION_PATH } from './constants';
+import ACTION_TYPES from './action-types';
+import { setIsSaving, setManualConnectionIsBusy } from './actions';
+
+export const controls = {
+	[ ACTION_TYPES.DO_PERSIST_DATA ]: async ( { dispatch } ) => {
+		let error = null;
+
+		try {
+			const path = `${ NAMESPACE }/${ REST_PERSIST_PATH }`;
+			const data = select( STORE_NAME ).onboardingPersistentData();
+
+			dispatch( setIsSaving( true ) );
+
+			await apiFetch( {
+				path,
+				method: 'post',
+				data,
+			} );
+		} catch ( e ) {
+			error = e;
+			console.error( 'Error saving progress.', e );
+		} finally {
+			dispatch( setIsSaving( false ) );
+		}
+
+		return error === null;
+	},
+
+	[ ACTION_TYPES.DO_MANUAL_CONNECTION ]: async ( { dispatch } ) => {
+		let result = null;
+
+		try {
+			const path = `${ NAMESPACE }/${ REST_MANUAL_CONNECTION_PATH }`;
+			const { clientId, clientSecret, useSandbox } =
+				select( STORE_NAME ).onboardingPersistentData();
+
+			dispatch( setManualConnectionIsBusy( true ) );
+
+			result = await apiFetch( {
+				path,
+				method: 'POST',
+				data: {
+					clientId,
+					clientSecret,
+					useSandbox,
+				},
+			} );
+		} catch ( e ) {
+			result = {
+				success: false,
+				error: e,
+			};
+		} finally {
+			dispatch( setManualConnectionIsBusy( false ) );
+		}
+
+		return result;
+	},
+};

modules/ppcp-settings/resources/js/data/onboarding/index.js

@@ -3,5 +3,6 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
 import * as resolvers from './resolvers';
+import { controls } from './controls';
 
-export { reducer, selectors, actions, resolvers, STORE_KEY };
+export { reducer, selectors, actions, resolvers, controls, STORE_KEY };