Editor: Use hooks instead of HoCs in the post-taxonomies components (#…

…58446) * Editor: Use hooks instead of HoCs in the post taxonomies components * Combine filters
WordPress · Jan 30, 2024 · df8142a · df8142a
1 parent 4853ce5
commit df8142a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 88 deletions.
diff --git a/packages/editor/src/components/post-taxonomies/check.js b/packages/editor/src/components/post-taxonomies/check.js
@@ -1,31 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostTaxonomiesCheck( { postType, taxonomies, children } ) {
-	const hasTaxonomies = taxonomies?.some( ( taxonomy ) =>
-		taxonomy.types.includes( postType )
-	);
+export default function PostTaxonomiesCheck( { children } ) {
+	const hasTaxonomies = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const taxonomies = select( coreStore ).getTaxonomies( {
+			per_page: -1,
+		} );
+		return taxonomies?.some( ( taxonomy ) =>
+			taxonomy.types.includes( postType )
+		);
+	}, [] );
 	if ( ! hasTaxonomies ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-		};
-	} ),
-] )( PostTaxonomiesCheck );
diff --git a/packages/editor/src/components/post-taxonomies/index.js b/packages/editor/src/components/post-taxonomies/index.js
@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -15,19 +14,20 @@ import { store as editorStore } from '../../store';
 
 const identity = ( x ) => x;
 
-export function PostTaxonomies( {
-	postType,
-	taxonomies,
-	taxonomyWrapper = identity,
-} ) {
-	const availableTaxonomies = ( taxonomies ?? [] ).filter( ( taxonomy ) =>
-		taxonomy.types.includes( postType )
-	);
-	const visibleTaxonomies = availableTaxonomies.filter(
-		// In some circumstances .visibility can end up as undefined so optional chaining operator required.
-		// https://github.com/WordPress/gutenberg/issues/40326
-		( taxonomy ) => taxonomy.visibility?.show_ui
+export function PostTaxonomies( { taxonomyWrapper = identity } ) {
+	const { postType, taxonomies } = useSelect( ( select ) => {
+		return {
+			postType: select( editorStore ).getCurrentPostType(),
+			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
+		};
+	}, [] );
+	const visibleTaxonomies = ( taxonomies ?? [] ).filter(
+		( taxonomy ) =>
+			// In some circumstances .visibility can end up as undefined so optional chaining operator required.
+			// https://github.com/WordPress/gutenberg/issues/40326
+			taxonomy.types.includes( postType ) && taxonomy.visibility?.show_ui
 	);
+
 	return visibleTaxonomies.map( ( taxonomy ) => {
 		const TaxonomyComponent = taxonomy.hierarchical
 			? HierarchicalTermSelector
@@ -43,11 +43,4 @@ export function PostTaxonomies( {
 	} );
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-		};
-	} ),
-] )( PostTaxonomies );
+export default PostTaxonomies;
diff --git a/packages/editor/src/components/post-taxonomies/test/index.js b/packages/editor/src/components/post-taxonomies/test/index.js
@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { PostTaxonomies } from '../';
+import PostTaxonomies from '../';
 
 describe( 'PostTaxonomies', () => {
 	const genresTaxonomy = {
@@ -87,20 +87,30 @@ describe( 'PostTaxonomies', () => {
 	it( 'should render no children if taxonomy data not available', () => {
 		const taxonomies = null;
 
-		const { container } = render(
-			<PostTaxonomies postType="page" taxonomies={ taxonomies } />
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'page' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue(
+			taxonomies
 		);
 
+		const { container } = render( <PostTaxonomies /> );
+
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render taxonomy components for taxonomies assigned to post type', () => {
-		const { rerender } = render(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [ genresTaxonomy, categoriesTaxonomy ] }
-			/>
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'book' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
+			genresTaxonomy,
+			categoriesTaxonomy,
+		] );
+
+		render( <PostTaxonomies /> );
 
 		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
 		expect(
@@ -112,59 +122,35 @@ describe( 'PostTaxonomies', () => {
 		expect(
 			screen.queryByRole( 'button', { name: 'Add new category' } )
 		).not.toBeInTheDocument();
-
-		rerender(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [
-					genresTaxonomy,
-					{
-						...categoriesTaxonomy,
-						types: [ 'post', 'page', 'book' ],
-					},
-				] }
-			/>
-		);
-
-		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
-		expect(
-			screen.getByRole( 'group', { name: 'Categories' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Add new genre' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Add new category' } )
-		).toBeVisible();
 	} );
 
 	it( 'should not render taxonomy components that hide their ui', () => {
-		const { rerender } = render(
-			<PostTaxonomies postType="book" taxonomies={ [ genresTaxonomy ] } />
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'book' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
+			genresTaxonomy,
+			{
+				...categoriesTaxonomy,
+				types: [ 'post', 'page', 'book' ],
+				visibility: {
+					show_ui: false,
+				},
+			},
+		] );
+
+		render( <PostTaxonomies /> );
 
 		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
 		expect(
 			screen.getByRole( 'button', { name: 'Add new genre' } )
 		).toBeVisible();
-
-		rerender(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [
-					{
-						...genresTaxonomy,
-						visibility: { show_ui: false },
-					},
-				] }
-			/>
-		);
-
 		expect(
-			screen.queryByRole( 'group', { name: 'Genres' } )
+			screen.queryByRole( 'group', { name: 'Categories' } )
 		).not.toBeInTheDocument();
 		expect(
-			screen.queryByRole( 'button', { name: 'Add new genre' } )
+			screen.queryByRole( 'button', { name: 'Add new category' } )
 		).not.toBeInTheDocument();
 	} );
 } );