diff --git a/packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice b/packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice new file mode 100644 index 00000000000..398d63c773b --- /dev/null +++ b/packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Avoid duplicated product request #46934 diff --git a/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx index 60cd751eb01..45147413ce1 100644 --- a/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx @@ -12,11 +12,7 @@ import { import { __ } from '@wordpress/i18n'; import { starEmpty, starFilled } from '@wordpress/icons'; import { cleanForSlug } from '@wordpress/url'; -import { - PRODUCTS_STORE_NAME, - WCDataSelector, - Product, -} from '@woocommerce/data'; +import { Product } from '@woocommerce/data'; import { useWooBlockProps } from '@woocommerce/block-templates'; import classNames from 'classnames'; import { @@ -40,7 +36,7 @@ import { useValidation } from '../../../contexts/validation-context'; import { useProductEdits } from '../../../hooks/use-product-edits'; import useProductEntityProp from '../../../hooks/use-product-entity-prop'; import { ProductEditorBlockEditProps } from '../../../types'; -import { AUTO_DRAFT_NAME } from '../../../utils'; +import { AUTO_DRAFT_NAME, getPermalinkParts } from '../../../utils'; import { NameBlockAttributes } from './types'; export function NameBlockEdit( { @@ -74,21 +70,8 @@ export function NameBlockEdit( { 'name' ); - const { permalinkPrefix, permalinkSuffix } = useSelect( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - ( select: WCDataSelector ) => { - const { getPermalinkParts } = select( PRODUCTS_STORE_NAME ); - if ( productId ) { - const parts = getPermalinkParts( productId ); - return { - permalinkPrefix: parts?.prefix, - permalinkSuffix: parts?.suffix, - }; - } - return {}; - } - ); + const { prefix: permalinkPrefix, suffix: permalinkSuffix } = + getPermalinkParts( product ); const { ref: nameRef, diff --git a/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx b/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx index b964a445da3..f5f1c3c6443 100644 --- a/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx +++ b/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx @@ -2,15 +2,10 @@ * External dependencies */ import { Button, TextControl } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { cleanForSlug } from '@wordpress/url'; import { useFormContext } from '@woocommerce/components'; -import { - Product, - PRODUCTS_STORE_NAME, - WCDataSelector, -} from '@woocommerce/data'; +import { Product } from '@woocommerce/data'; import { useState, createElement, @@ -23,6 +18,7 @@ import { import { PRODUCT_DETAILS_SLUG } from '../../constants'; import { EditProductLinkModal } from '../edit-product-link-modal'; import { useProductHelper } from '../../hooks/use-product-helper'; +import { getPermalinkParts } from '../../utils'; export const DetailsNameField = ( {} ) => { const { updateProductWithStatus } = useProductHelper(); @@ -31,21 +27,8 @@ export const DetailsNameField = ( {} ) => { const { getInputProps, values, touched, errors, setValue, resetForm } = useFormContext< Product >(); - const { permalinkPrefix, permalinkSuffix } = useSelect( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - ( select: WCDataSelector ) => { - const { getPermalinkParts } = select( PRODUCTS_STORE_NAME ); - if ( values.id ) { - const parts = getPermalinkParts( values.id ); - return { - permalinkPrefix: parts?.prefix, - permalinkSuffix: parts?.suffix, - }; - } - return {}; - } - ); + const { prefix: permalinkPrefix, suffix: permalinkSuffix } = + getPermalinkParts( values ); const hasNameError = () => { return Boolean( touched.name ) && Boolean( errors.name ); diff --git a/packages/js/product-editor/src/utils/get-permalink-parts.ts b/packages/js/product-editor/src/utils/get-permalink-parts.ts new file mode 100644 index 00000000000..7be51c2eb45 --- /dev/null +++ b/packages/js/product-editor/src/utils/get-permalink-parts.ts @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { Product } from '@woocommerce/data'; + +export type PermalinkParts = { + prefix: string | undefined; + postName: string | undefined; + suffix: string | undefined; +}; + +export const getPermalinkParts = ( product: Product ): PermalinkParts => { + let postName, prefix, suffix; + if ( product && product.permalink_template ) { + postName = product.slug || product.generated_slug; + [ prefix, suffix ] = product.permalink_template.split( + /%(?:postname|pagename)%/ + ); + } + return { + prefix, + postName, + suffix, + }; +}; diff --git a/packages/js/product-editor/src/utils/index.ts b/packages/js/product-editor/src/utils/index.ts index 9f2cd6d758a..b380f59e2dc 100644 --- a/packages/js/product-editor/src/utils/index.ts +++ b/packages/js/product-editor/src/utils/index.ts @@ -8,6 +8,7 @@ import { getCheckboxTracks } from './get-checkbox-tracks'; import { getCurrencySymbolProps } from './get-currency-symbol-props'; import { getDerivedProductType } from './get-derived-product-type'; import { getHeaderTitle } from './get-header-title'; +import { getPermalinkParts } from './get-permalink-parts'; import { getProductStatus, PRODUCT_STATUS_LABELS } from './get-product-status'; import { getProductStockStatus, @@ -42,6 +43,7 @@ export { getCurrencySymbolProps, getDerivedProductType, getHeaderTitle, + getPermalinkParts, getProductStatus, getProductStockStatus, getProductStockStatusClass,