Avoid duplicated product request (#46934)

* Add getPermalinkParts utility

* Use getPermalinkParts utility

* Add changelog

packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Avoid duplicated product request #46934

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 {
+import { Product } from '@woocommerce/data';
-	PRODUCTS_STORE_NAME,
-	WCDataSelector,
-	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(
+	const { prefix: permalinkPrefix, suffix: permalinkSuffix } =
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		getPermalinkParts( product );
-		// @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 {
 		ref: nameRef,

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 {
+import { Product } from '@woocommerce/data';
-	Product,
-	PRODUCTS_STORE_NAME,
-	WCDataSelector,
-} 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(
+	const { prefix: permalinkPrefix, suffix: permalinkSuffix } =
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		getPermalinkParts( values );
-		// @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 hasNameError = () => {
 		return Boolean( touched.name ) && Boolean( errors.name );

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,
+	};
+};

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,