From df8142a17dae77a0ab0e2e4ae0109ef227b02bd1 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 30 Jan 2024 19:10:52 +0400 Subject: [PATCH] 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 --- .../src/components/post-taxonomies/check.js | 26 +++--- .../src/components/post-taxonomies/index.js | 37 ++++---- .../components/post-taxonomies/test/index.js | 88 ++++++++----------- 3 files changed, 63 insertions(+), 88 deletions(-) diff --git a/packages/editor/src/components/post-taxonomies/check.js b/packages/editor/src/components/post-taxonomies/check.js index a9d0c7e0cf97c..c5621d724cd83 100644 --- a/packages/editor/src/components/post-taxonomies/check.js +++ b/packages/editor/src/components/post-taxonomies/check.js @@ -1,8 +1,7 @@ /** * 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'; /** @@ -10,22 +9,19 @@ import { store as coreStore } from '@wordpress/core-data'; */ 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 index ee565bd4fe6ef..30468e0409183 100644 --- 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 index 0a38814306175..1f386f4c2fab1 100644 --- 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( - + jest.spyOn( + select( editorStore ), + 'getCurrentPostType' + ).mockReturnValue( 'page' ); + jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( + taxonomies ); + const { container } = render( ); + expect( container ).toBeEmptyDOMElement(); } ); it( 'should render taxonomy components for taxonomies assigned to post type', () => { - const { rerender } = render( - - ); + jest.spyOn( + select( editorStore ), + 'getCurrentPostType' + ).mockReturnValue( 'book' ); + jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [ + genresTaxonomy, + categoriesTaxonomy, + ] ); + + render( ); 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( - - ); - - 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( - - ); + jest.spyOn( + select( editorStore ), + 'getCurrentPostType' + ).mockReturnValue( 'book' ); + jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [ + genresTaxonomy, + { + ...categoriesTaxonomy, + types: [ 'post', 'page', 'book' ], + visibility: { + show_ui: false, + }, + }, + ] ); + + render( ); expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible(); expect( screen.getByRole( 'button', { name: 'Add new genre' } ) ).toBeVisible(); - - rerender( - - ); - 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(); } ); } );