Expose metadata as object from useProductMetadata hook (#43860)

* Add useParentMetadata hook

* Move functionality to existing useProductMetadata hook

* Update changelog

* Remove deleted hook from index

* Update useProductMetadata API and unit tests

packages/js/product-editor/changelog/add-useparentmetadata

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Expose metadata as object from useProductMetadata hook

packages/js/product-editor/src/hooks/test/use-product-metadata.test.ts

@@ -10,9 +10,15 @@ import useProductMetadata from '../use-product-metadata';
 
 const mockFnMetadataProp = jest.fn();
 jest.mock( '@wordpress/core-data', () => ( {
-	useEntityProp: jest.fn().mockImplementation( () => {
-		return [
-			[
+	useEntityId: jest.fn().mockReturnValue( 123 ),
+} ) );
+
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn().mockImplementation( ( callback ) => {
+		return callback(
+			jest.fn().mockReturnValue( {
+				getEditedEntityRecord: () => ( {
+					meta_data: [
 						{
 							key: 'field1',
 							value: 'value1',
@@ -26,8 +32,14 @@ jest.mock( '@wordpress/core-data', () => ( {
 							value: 'value1',
 						},
 					],
-			mockFnMetadataProp,
-		];
+				} ),
+			} )
+		);
+	} ),
+	useDispatch: jest.fn().mockImplementation( () => {
+		return {
+			editEntityRecord: mockFnMetadataProp,
+		};
 	} ),
 } ) );
 
@@ -45,7 +57,12 @@ describe( 'useProductMetadata', () => {
 				value: 'value2',
 			},
 		] );
-		expect( mockFnMetadataProp ).toHaveBeenCalledWith( [
+		expect( mockFnMetadataProp ).toHaveBeenCalledWith(
+			'postType',
+			'product',
+			123,
+			{
+				meta_data: [
 					{
 						key: 'existing_field',
 						value: 'value1',
@@ -58,6 +75,18 @@ describe( 'useProductMetadata', () => {
 						key: 'field2',
 						value: 'value2',
 					},
-		] );
+				],
+			}
+		);
+	} );
+	it( 'should return the metadata as an object for easy readings', async () => {
+		const { metadata } = renderHook( () =>
+			useProductMetadata( { postType: 'product', id: 123 } )
+		).result.current;
+		expect( metadata ).toEqual( {
+			field1: 'value1',
+			field2: 'value1',
+			existing_field: 'value1',
+		} );
 	} );
 } );

packages/js/product-editor/src/hooks/use-product-metadata.ts

@@ -1,30 +1,62 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore No types for this exist yet.
+// eslint-disable-next-line @woocommerce/dependency-group
+import { useEntityId } from '@wordpress/core-data';
 /**
  * External dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Product } from '@woocommerce/data';
 /**
  * Internal dependencies
  */
 import { Metadata } from '../types';
 
-function useProductMetadata( postType?: string ) {
-	const [ metadata, setMetadata ] = useEntityProp< Metadata< string >[] >(
+interface Options {
+	postType?: string;
+	id?: number;
+}
+
+function useProductMetadata( options?: Options ) {
+	const postType = options?.postType || 'product';
+	const thisId = useEntityId( 'postType', postType );
+	const id = options?.id || thisId;
+
+	// @ts-expect-error There are no types for this.
+	const { editEntityRecord } = useDispatch( 'core' );
+
+	return useSelect(
+		( select ) => {
+			// @ts-expect-error There are no types for this.
+			const { getEditedEntityRecord } = select( 'core' );
+			const { meta_data: metadata }: Product = getEditedEntityRecord(
 				'postType',
-		postType || 'product',
-		'meta_data'
+				postType,
+				id
 			);
 
 			return {
+				metadata: metadata.reduce( function ( acc, cur ) {
+					acc[ cur.key ] = cur.value;
+					return acc;
+				}, {} as Record< string, string | undefined > ),
 				updateMetadata: ( entries: Metadata< string >[] ) => {
-			setMetadata( [
+					editEntityRecord( 'postType', postType, id, {
+						meta_data: [
 							...metadata.filter(
 								( item ) =>
-						entries.findIndex( ( e ) => e.key === item.key ) === -1
+									entries.findIndex(
+										( e ) => e.key === item.key
+									) === -1
 							),
 							...entries,
-			] );
+						],
+					} );
 				},
 			};
+		},
+		[ id ]
+	);
 }
 
 export default useProductMetadata;