PCH: Enhance Request Handling in Provider Classes

build/content-helper/dashboard-widget.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '58c71232f1e12c0b0925');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => 'a9ac73db3b76299e492d');

build/content-helper/editor-sidebar.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '7cda9ce01084868d6502');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'a522b73f43053e03c73b');

src/content-helper/common/base-provider.tsx

@@ -0,0 +1,168 @@
+/**
+ * WordPress dependencies
+ */
+// eslint-disable-next-line import/named
+import apiFetch, { APIFetchOptions } from '@wordpress/api-fetch';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ContentHelperError, ContentHelperErrorCode } from './content-helper-error';
+
+/**
+ * The response structure of the API.
+ *
+ * @since 3.15.0
+ */
+export interface ContentHelperAPIResponse<T> {
+	error?: Error;
+	data: T;
+}
+
+/**
+ * The result of the getOrCreateController method.
+ *
+ * @since 3.15.0
+ */
+type GetAbortControllerResult = {
+	abortController: AbortController;
+	abortId: string;
+};
+
+/**
+ * Base class for all providers.
+ *
+ * Provides a common interface for fetching data from the API, with support
+ * for cancelling requests.
+ *
+ * @since 3.15.0
+ */
+export abstract class BaseProvider {
+	/**
+	 * A map of AbortControllers used to cancel fetch requests.
+	 *
+	 * @since 3.15.0
+	 */
+	private abortControllers: Map<string, AbortController> = new Map();
+
+	/**
+	 * Protected empty constructor to prevent instantiation.
+	 *
+	 * @since 3.15.0
+	 */
+	protected constructor() {} // eslint-disable-line no-useless-constructor
+
+	/**
+	 * Cancels the fetch request.
+	 *
+	 * If an ID is provided, it cancels the request with that ID.
+	 * If no ID is provided, it cancels the most recent request.
+	 *
+	 * @since 3.15.0
+	 *
+	 * @param {string?} id The (optional) ID of the request to cancel.
+	 */
+	public cancelRequest( id?: string ): void {
+		// If an ID is provided, cancel the request with that ID.
+		if ( id ) {
+			const controller = this.abortControllers.get( id );
+			if ( controller ) {
+				controller.abort();
+				this.abortControllers.delete( id );
+			}
+			return;
+		}
+
+		// Otherwise, cancel the most recent request.
+		const lastKey = Array.from( this.abortControllers.keys() ).pop();
+		if ( lastKey ) {
+			const controller = this.abortControllers.get( lastKey );
+			if ( controller ) {
+				controller.abort();
+				this.abortControllers.delete( lastKey );
+			}
+		}
+	}
+
+	/**
+	 * Cancels all fetch requests for the provider.
+	 *
+	 * @since 3.15.0
+	 */
+	public cancelAll(): void {
+		this.abortControllers.forEach( ( controller ) => controller.abort() );
+		this.abortControllers.clear();
+	}
+
+	/**
+	 * Private method to manage creating and storing AbortControllers.
+	 *
+	 * @param {string?} id The (optional) ID of the request.
+	 *
+	 * @return {GetAbortControllerResult} The AbortController and its ID.
+	 */
+	private getOrCreateController( id?: string ): GetAbortControllerResult {
+		if ( id && this.abortControllers.has( id ) ) {
+			return {
+				abortController: this.abortControllers.get( id )!,
+				abortId: id,
+			};
+		}
+
+		// If no ID is provided, generate one.
+		const abortId = id ?? 'auto-' + Date.now();
+		// Create a new AbortController.
+		const controller = new AbortController();
+		// Store the AbortController.
+		this.abortControllers.set( abortId, controller );
+
+		return {
+			abortController: controller,
+			abortId,
+		};
+	}
+
+	/**
+	 * Fetches data from the API. Either resolves with the data or rejects with an error.
+	 *
+	 * This method is a wrapper around apiFetch() that automatically adds the AbortController signal.
+	 *
+	 * @param {APIFetchOptions} options The options to pass to apiFetch
+	 * @param {string?}         id      The (optional) ID of the request
+	 *
+	 * @return {Promise<ContentHelperAPIResponse<any>>} The fetched data
+	 */
+	protected async fetch<T>( options: APIFetchOptions, id?: string ): Promise<T> {
+		const { abortController, abortId } = this.getOrCreateController( id );
+		options.signal = abortController.signal;
+		try {
+			const response = await apiFetch<ContentHelperAPIResponse<T>>( options );
+
+			// Validate API side errors.
+			if ( response.error ) {
+				return Promise.reject(
+					new ContentHelperError(
+						response.error.message,
+						ContentHelperErrorCode.ParselyApiResponseContainsError,
+					),
+				);
+			}
+
+			return response.data;
+		} catch ( wpError: any ) { // eslint-disable-line @typescript-eslint/no-explicit-any
+			if ( wpError.name === 'AbortError' ) {
+				return Promise.reject(
+					new ContentHelperError(
+						__( 'The operation was aborted.', 'wp-parsely' ),
+						ContentHelperErrorCode.ParselyAborted,
+					),
+				);
+			}
+			return Promise.reject( new ContentHelperError( wpError.message, wpError.code ) );
+		} finally {
+			// Clean-up the AbortController after a successful request.
+			this.abortControllers.delete( abortId );
+		}
+	}
+}

src/content-helper/dashboard-widget/components/top-posts.tsx

@@ -43,7 +43,7 @@ export function TopPosts(): JSX.Element {
 	 * @since 3.7.0
 	 */
 	useEffect( () => {
-		const provider = new DashboardWidgetProvider();
+		const provider = DashboardWidgetProvider.getInstance();
 
 		const fetchPosts = async ( retries: number ) => {
 			provider.getTopPosts( settings, page )

src/content-helper/dashboard-widget/provider.ts

@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import { BaseProvider } from '../common/base-provider';
 import {
 	ContentHelperError,
 	ContentHelperErrorCode,
@@ -16,18 +16,31 @@ import { getApiPeriodParams } from '../common/utils/api';
 import { PostData } from '../common/utils/post';
 import { TopPostsSettings } from '../common/settings';
 
-/**
- * The form of the response returned by the /stats/posts WordPress REST API
- * endpoint.
- */
-interface TopPostsApiResponse {
-	error?: Error;
-	data?: PostData[];
-}
-
 export const TOP_POSTS_DEFAULT_LIMIT = 5;
 
-export class DashboardWidgetProvider {
+export class DashboardWidgetProvider extends BaseProvider {
+	/**
+	 * The singleton instance of the DashboardWidgetProvider.
+	 *
+	 * @since 3.15.0
+	 */
+	private static instance: DashboardWidgetProvider;
+
+	/**
+	 * Returns the singleton instance of the DashboardWidgetProvider.
+	 *
+	 * @since 3.15.0
+	 *
+	 * @return {DashboardWidgetProvider} The singleton instance.
+	 */
+	public static getInstance(): DashboardWidgetProvider {
+		if ( ! this.instance ) {
+			this.instance = new DashboardWidgetProvider();
+		}
+
+		return this.instance;
+	}
+
 	/**
 	 * Returns the site's top posts.
 	 *
@@ -69,31 +82,16 @@ export class DashboardWidgetProvider {
 	private async fetchTopPostsFromWpEndpoint(
 		settings: TopPostsSettings, page: number
 	): Promise<PostData[]> {
-		let response;
-
-		try {
-			response = await apiFetch( {
-				path: addQueryArgs( '/wp-parsely/v1/stats/posts/', {
-					limit: TOP_POSTS_DEFAULT_LIMIT,
-					...getApiPeriodParams( settings.Period ),
-					sort: settings.Metric,
-					page,
-					itm_source: 'wp-parsely-content-helper',
-				} ),
-			} ) as TopPostsApiResponse;
-		} catch ( wpError: any ) { // eslint-disable-line @typescript-eslint/no-explicit-any
-			return Promise.reject( new ContentHelperError(
-				wpError.message, wpError.code
-			) );
-		}
-
-		if ( response?.error ) {
-			return Promise.reject( new ContentHelperError(
-				response.error.message,
-				ContentHelperErrorCode.ParselyApiResponseContainsError
-			) );
-		}
+		const response = this.fetch<PostData[]>( {
+			path: addQueryArgs( '/wp-parsely/v1/stats/posts/', {
+				limit: TOP_POSTS_DEFAULT_LIMIT,
+				...getApiPeriodParams( settings.Period ),
+				sort: settings.Metric,
+				page,
+				itm_source: 'wp-parsely-content-helper',
+			} ),
+		} );
 
-		return response?.data ?? [];
+		return response ?? [];
 	}
 }

src/content-helper/editor-sidebar/performance-stats/component.tsx

@@ -211,7 +211,7 @@ export const PerformanceStats = (
 	const { settings, setSettings } = useSettings<SidebarSettings>();
 
 	useEffect( () => {
-		const provider = new PerformanceStatsProvider();
+		const provider = PerformanceStatsProvider.getInstance();
 
 		const fetchPosts = async ( retries: number ) => {
 			provider.getPerformanceStats( period )