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

[Product Editor] Attribute create term failed request causes unlimited loading state (#50093) 

* Fix unhandled promise rejection when creating an attribute term and the create request fails

* Add changelog file

* Fix linter error

* Fix compilation error
This commit is contained in:
Maikel Perez 2024-07-30 08:59:10 -04:00 committed by GitHub
parent 71b865fa63
commit dc2c2eda8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-49402 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix unhandled promise rejection when creating an attribute term and the create request fails

55
packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx
View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import {
createElement,
useEffect,
@ -12,7 +13,12 @@ import {
Button,
FormTokenField as CoreFormTokenField,
} from '@wordpress/components';
import { useSelect, useDispatch, select as sel } from '@wordpress/data';
import {
useSelect,
useDispatch,
select as sel,
dispatch,
} from '@wordpress/data';
import { cleanForSlug } from '@wordpress/url';
import {
EXPERIMENTAL_PRODUCT_ATTRIBUTE_TERMS_STORE_NAME,
@ -281,22 +287,39 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
// Create the new terms.
const promises = newTokens.map( async ( token ) => {
const newTerm = ( await createProductAttributeTerm(
{
name: token.value,
slug: token.slug,
attribute_id: attributeId,
},
{
optimisticQueryUpdate: selectItemsQuery,
optimisticUrlParameters: [ attributeId ],
}
) ) as ProductAttributeTerm;
try {
const newTerm = ( await createProductAttributeTerm(
{
name: token.value,
slug: token.slug,
attribute_id: attributeId,
},
{
optimisticQueryUpdate: selectItemsQuery,
optimisticUrlParameters: [ attributeId ],
}
) ) satisfies ProductAttributeTerm;
return newTerm;
return newTerm;
} catch ( error ) {
dispatch( 'core/notices' ).createErrorNotice(
sprintf(
/* translators: %s: the attribute term */
__(
'There was an error trying to create the attribute term "%s".',
'woocommerce'
),
token.value
)
);
return undefined;
}
} );
const newTerms = await Promise.all( promises );
const storedTerms = newTerms.filter(
( term ) => term !== undefined
) as ProductAttributeTerm[];
// Remove the recently created terms from the temporary state,
setTemporaryTerms( ( prevTerms ) =>
@ -324,7 +347,11 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
);
// Call the callback to update the Form terms.
onTermsSelect( [ ...newSelectedTerms, ...newTerms ], index, attribute );
onTermsSelect(
[ ...newSelectedTerms, ...storedTerms ],
index,
attribute
);
}
/*