Use products data store for getPermalinkParts selector (#36706)

* Add generated_slug and permalink_template to Product

* Update getPermalinkParts to use products data store instead of posts data store

* Remove ts-expect-error directive

* Changelog

* Add resolver for getPermalinkParts
This commit is contained in:
Matt Sherman 2023-02-15 17:02:55 +01:00 committed by GitHub
parent 993f1f4879
commit e05a191156
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 36 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Use products data store for getPermalinkParts selector.

View File

@ -19,7 +19,6 @@ registerStore< State >( STORE_NAME, {
reducer: reducer as Reducer< ProductState >,
actions,
controls,
// @ts-expect-error as the registerStore type is not allowing the createRegistrySelector selector.
selectors,
resolvers,
} );

View File

@ -2,12 +2,17 @@
* External dependencies
*/
import { addQueryArgs } from '@wordpress/url';
import { apiFetch } from '@wordpress/data-controls';
import {
apiFetch,
dispatch as deprecatedDispatch,
select,
} from '@wordpress/data-controls';
import { controls } from '@wordpress/data';
/**
* Internal dependencies
*/
import { WC_PRODUCT_NAMESPACE } from './constants';
import { STORE_NAME, WC_PRODUCT_NAMESPACE } from './constants';
import { Product, ProductQuery } from './types';
import {
getProductError,
@ -19,6 +24,11 @@ import {
} from './actions';
import { request } from '../utils';
const dispatch =
controls && controls.dispatch ? controls.dispatch : deprecatedDispatch;
const resolveSelect =
controls && controls.resolveSelect ? controls.resolveSelect : select;
export function* getProducts( query: Partial< ProductQuery > ) {
// id is always required.
const productsQuery = {
@ -56,6 +66,11 @@ export function* getProduct( productId: number ) {
} );
yield getProductSuccess( productId, product );
yield dispatch( STORE_NAME, 'finishResolution', 'getPermalinkParts', [
productId,
] );
return product;
} catch ( error ) {
yield getProductError( productId, error );
@ -81,3 +96,7 @@ export function* getProductsTotalCount( query: Partial< ProductQuery > ) {
throw error;
}
}
export function* getPermalinkParts( productId: number ) {
yield resolveSelect( STORE_NAME, 'getProduct', [ productId ] );
}

View File

@ -2,7 +2,6 @@
* External dependencies
*/
import createSelector from 'rememo';
import { createRegistrySelector } from '@wordpress/data';
/**
* Internal dependencies
@ -122,22 +121,9 @@ export const isPending = (
return false;
};
export const getPermalinkParts = createRegistrySelector(
( select ) => ( state: ProductState, productId: number ) => {
const product = select( 'core' ).getEntityRecord(
'postType',
'product',
productId,
// @ts-expect-error query object is not part of the @wordpress/core-data types yet.
{
_fields: [
'id',
'permalink_template',
'slug',
'generated_slug',
],
}
);
export const getPermalinkParts = ( state: ProductState, productId: number ) => {
const product = state.data[ productId ];
if ( product && product.permalink_template ) {
const postName = product.slug || product.generated_slug;
@ -152,8 +138,7 @@ export const getPermalinkParts = createRegistrySelector(
};
}
return null;
}
);
};
export type ProductsSelectors = {
getCreateProductError: WPDataSelector< typeof getCreateProductError >;
@ -162,7 +147,5 @@ export type ProductsSelectors = {
getProductsTotalCount: WPDataSelector< typeof getProductsTotalCount >;
getProductsError: WPDataSelector< typeof getProductsError >;
isPending: WPDataSelector< typeof isPending >;
getPermalinkParts: (
productId: number
) => { prefix: string; postName: string; suffix: string } | null;
getPermalinkParts: WPDataSelector< typeof getPermalinkParts >;
} & WPDataSelectors;

View File

@ -66,6 +66,7 @@ export type Product< Status = ProductStatus, Type = ProductType > = Omit<
downloads: ProductDownload[];
external_url: string;
featured: boolean;
generated_slug: string;
id: number;
low_stock_amount: number;
manage_stock: boolean;
@ -73,6 +74,7 @@ export type Product< Status = ProductStatus, Type = ProductType > = Omit<
name: string;
on_sale: boolean;
permalink: string;
permalink_template: string;
price: string;
price_html: string;
purchasable: boolean;
@ -108,9 +110,11 @@ export const productReadOnlyProperties = [
'date_created_gmt',
'date_modified',
'date_modified_gmt',
'generated_slug',
'id',
'on_sale',
'permalink',
'permalink_template',
'price',
'price_html',
'purchasable',