Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add AbortSignal (from trunk) into merged branch

This commit is contained in:
Dan Q 2023-10-12 10:29:43 +01:00
parent 744d07cbee
commit 53d3f95b3d
2 changed files with 11 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
plugins/woocommerce-admin/client/marketplace/components/content/content.tsx
View File

@ -20,6 +20,7 @@ import Discover from '../discover/discover';
import Products from '../products/products';
import SearchResults from '../search-results/search-results';
import { MarketplaceContext } from '../../contexts/marketplace-context';
import { fetchSearchResults } from '../../utils/functions';
export default function Content(): JSX.Element {
const marketplaceContextValue = useContext( MarketplaceContext );
@ -59,40 +60,9 @@ export default function Content(): JSX.Element {
params.append( 'country', wccomSettings.storeCountry );
}
const wccomSearchEndpoint =
MARKETPLACE_HOST +
MARKETPLACE_SEARCH_API_PATH +
'?' +
params.toString();
// Fetch data from WCCOM API
fetch( wccomSearchEndpoint, { signal: abortController.signal } )
.then( ( response ) => response.json() )
.then( ( response ) => {
/**
* Product card component expects a Product type.
* So we build that object from the API response.
*/
const productList = response.products.map(
( product: SearchAPIProductType ): Product => {
return {
id: product.id,
title: product.title,
image: product.image,
type: product.type,
description: product.excerpt,
vendorName: product.vendor_name,
vendorUrl: product.vendor_url,
icon: product.icon,
url: product.link,
// Due to backwards compatibility, raw_price is from search API, price is from featured API
price: product.raw_price ?? product.price,
averageRating: product.rating ?? 0,
reviewsCount: product.reviews_count ?? 0,
};
}
);
setProducts( productList );
fetchSearchResults( params, abortController.signal )
.then( ( products ) => {
setProducts( products );
} )
.catch( () => {
setProducts( [] );

11
plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
View File

@ -63,7 +63,7 @@ async function apiFetchWithCache( params: object ): Promise< object > {
}
// Wrapper around fetch() that caches results in memory
async function fetchJsonWithCache( url: string ): Promise< object > {
async function fetchJsonWithCache( url: string, abortSignal?: AbortSignal ): Promise< object > {
// Attempt to fetch from cache:
if ( fetchCache.get( url ) ) {
return new Promise( ( resolve ) => {
@ -73,7 +73,7 @@ async function fetchJsonWithCache( url: string ): Promise< object > {
// Failing that, fetch from net:
return new Promise( ( resolve, reject ) => {
fetch( url )
fetch( url, { signal: abortSignal } )
.then( ( response ) => {
if ( ! response.ok ) {
throw new Error( response.statusText );
@ -93,7 +93,8 @@ async function fetchJsonWithCache( url: string ): Promise< object > {
// Fetch search results for a given set of URLSearchParams from the WooCommerce.com API
async function fetchSearchResults(
params: URLSearchParams
params: URLSearchParams,
abortSignal?: AbortSignal
): Promise< Product[] > {
const url =
MARKETPLACE_HOST +
@ -103,7 +104,7 @@ async function fetchSearchResults(
// Fetch data from WCCOM API
return new Promise( ( resolve, reject ) => {
fetchJsonWithCache( url )
fetchJsonWithCache( url, abortSignal )
.then( ( json ) => {
/**
* Product card component expects a Product type.
@ -114,6 +115,8 @@ async function fetchSearchResults(
return {
id: product.id,
title: product.title,
image: product.image,
type: product.type,
description: product.excerpt,
vendorName: product.vendor_name,
vendorUrl: product.vendor_url,