Move api requests to controls

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js

@@ -1,10 +1,9 @@
 import { useState } from '@wordpress/element';
-import apiFetch from '@wordpress/api-fetch';
-import { REST_WEBHOOKS_SIMULATE } from '../../../../../../data/common/constants';
 import { __ } from '@wordpress/i18n';
 import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { CommonHooks } from '../../../../../../data';
 
 const SimulationBlock = () => {
 	const {
@@ -13,26 +12,12 @@ const SimulationBlock = () => {
 		createErrorNotice,
 		removeNotice,
 	} = useDispatch( noticesStore );
-
+	const { startWebhookSimulation, checkWebhookSimulationState } =
+		CommonHooks.useWebhooks();
 	const [ simulating, setSimulating ] = useState( false );
-
 	const sleep = ( ms ) => {
 		return new Promise( ( resolve ) => setTimeout( resolve, ms ) );
 	};
-
-	const startWebhookSimulation = async () => {
-		return apiFetch( {
-			method: 'POST',
-			path: REST_WEBHOOKS_SIMULATE,
-		} );
-	};
-
-	const checkWebhookSimulationState = async () => {
-		return apiFetch( {
-			path: REST_WEBHOOKS_SIMULATE,
-		} );
-	};
-
 	const startSimulation = async ( maxRetries ) => {
 		const simulationStartNoticeId =
 			'paypal-webhook-simulation-start-notice';
@@ -59,6 +44,7 @@ const SimulationBlock = () => {
 		try {
 			await startWebhookSimulation();
 		} catch ( error ) {
+			console.error( error );
 			setSimulating( false );
 			createErrorNotice(
 				__(

modules/ppcp-settings/resources/js/data/common/action-types.js

@@ -25,4 +25,7 @@ export default {
 	DO_REFRESH_MERCHANT: 'COMMON:DO_REFRESH_MERCHANT',
 	DO_REFRESH_FEATURES: 'DO_REFRESH_FEATURES',
 	DO_RESUBSCRIBE_WEBHOOKS: 'COMMON:DO_RESUBSCRIBE_WEBHOOKS',
+	DO_START_WEBHOOK_SIMULATION: 'COMMON:DO_START_WEBHOOK_SIMULATION',
+	DO_CHECK_WEBHOOK_SIMULATION_STATE:
+		'COMMON:DO_CHECK_WEBHOOK_SIMULATION_STATE',
 };

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

@@ -241,3 +241,21 @@ export const resubscribeWebhooks = function* () {
 
 	return result;
 };
+
+/**
+ * Side effect. Starts webhook simulation.
+ *
+ * @return {Action} The action.
+ */
+export const startWebhookSimulation = function* () {
+	return yield { type: ACTION_TYPES.DO_START_WEBHOOK_SIMULATION };
+};
+
+/**
+ * Side effect. Checks webhook simulation.
+ *
+ * @return {Action} The action.
+ */
+export const checkWebhookSimulationState = function* () {
+	return yield { type: ACTION_TYPES.DO_CHECK_WEBHOOK_SIMULATION_STATE };
+};

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

@@ -16,6 +16,7 @@ import {
 	REST_PERSIST_PATH,
 	REST_REFRESH_FEATURES_PATH,
 	REST_WEBHOOKS,
+	REST_WEBHOOKS_SIMULATE,
 } from './constants';
 import ACTION_TYPES from './action-types';
 
@@ -123,4 +124,17 @@ export const controls = {
 			path: REST_WEBHOOKS,
 		} );
 	},
+
+	async [ ACTION_TYPES.DO_START_WEBHOOK_SIMULATION ]() {
+		return await apiFetch( {
+			method: 'POST',
+			path: REST_WEBHOOKS_SIMULATE,
+		} );
+	},
+
+	async [ ACTION_TYPES.DO_CHECK_WEBHOOK_SIMULATION_STATE ]() {
+		return await apiFetch( {
+			path: REST_WEBHOOKS_SIMULATE,
+		} );
+	},
 };

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -9,8 +9,7 @@
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { REST_WEBHOOKS, STORE_NAME } from './constants';
+import { STORE_NAME } from './constants';
-import apiFetch from '@wordpress/api-fetch';
 
 const useTransient = ( key ) =>
 	useSelect(
@@ -31,10 +30,11 @@ const useHooks = () => {
 		setManualConnectionMode,
 		setClientId,
 		setClientSecret,
-		setWebhooks,
 		connectToSandbox,
 		connectToProduction,
 		connectViaIdAndSecret,
+		startWebhookSimulation,
+		checkWebhookSimulationState,
 	} = useDispatch( STORE_NAME );
 
 	// Transient accessors.
@@ -78,19 +78,14 @@ const useHooks = () => {
 		setClientSecret: ( value ) => {
 			return savePersistent( setClientSecret, value );
 		},
-		setWebhooks: async () => {
-			const response = await apiFetch( {
-				method: 'GET',
-				path: REST_WEBHOOKS,
-			} );
-			setWebhooks( response?.data?.webhooks );
-		},
 		connectToSandbox,
 		connectToProduction,
 		connectViaIdAndSecret,
 		merchant,
 		wooSettings,
 		webhooks,
+		startWebhookSimulation,
+		checkWebhookSimulationState,
 	};
 };