From f603fb266d0650c13aa55cfeb557c4ece69388ce Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 23 Jan 2024 09:36:50 +0100 Subject: [PATCH] DownloadableBlocksPanel: remove withSelect in favor of useSelect --- .../downloadable-blocks-panel/index.js | 133 +++++++++--------- .../index.js | 9 +- 2 files changed, 69 insertions(+), 73 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index 4686600312851..4ceee3ddcb16e 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -3,9 +3,8 @@ */ import { __ } from '@wordpress/i18n'; import { Spinner } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; -import { withSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { getBlockType } from '@wordpress/blocks'; /** @@ -18,16 +17,71 @@ import { store as blockDirectoryStore } from '../../store'; const EMPTY_ARRAY = []; -function DownloadableBlocksPanel( { - downloadableItems, +const useDownloadableBlocks = ( filterValue ) => + useSelect( + ( select ) => { + const { + getDownloadableBlocks, + isRequestingDownloadableBlocks, + getInstalledBlockTypes, + } = select( blockDirectoryStore ); + + const hasPermission = select( coreStore ).canUser( + 'read', + 'block-directory/search' + ); + + let downloadableBlocks = EMPTY_ARRAY; + if ( hasPermission ) { + downloadableBlocks = getDownloadableBlocks( filterValue ); + + // Filter out blocks that are already installed. + const installedBlockTypes = getInstalledBlockTypes(); + const installableBlocks = downloadableBlocks.filter( + ( { name } ) => { + // Check if the block has just been installed, in which case it + // should still show in the list to avoid suddenly disappearing. + // `installedBlockTypes` only returns blocks stored in state + // immediately after installation, not all installed blocks. + const isJustInstalled = installedBlockTypes.some( + ( blockType ) => blockType.name === name + ); + const isPreviouslyInstalled = getBlockType( name ); + return isJustInstalled || ! isPreviouslyInstalled; + } + ); + + // Keep identity of the `downloadableBlocks` array if nothing was filtered out + if ( installableBlocks.length !== downloadableBlocks.length ) { + downloadableBlocks = installableBlocks; + } + + // Return identical empty array when there are no blocks + if ( downloadableBlocks.length === 0 ) { + downloadableBlocks = EMPTY_ARRAY; + } + } + + return { + hasPermission, + downloadableBlocks, + isLoading: isRequestingDownloadableBlocks( filterValue ), + }; + }, + [ filterValue ] + ); + +export default function DownloadableBlocksPanel( { onSelect, onHover, hasLocalBlocks, - hasPermission, - isLoading, isTyping, + filterValue, } ) { - if ( typeof hasPermission === 'undefined' || isLoading || isTyping ) { + const { hasPermission, downloadableBlocks, isLoading } = + useDownloadableBlocks( filterValue ); + + if ( hasPermission === undefined || isLoading || isTyping ) { return ( <> { hasPermission && ! hasLocalBlocks && ( @@ -55,71 +109,20 @@ function DownloadableBlocksPanel( { return null; } - return !! downloadableItems.length ? ( + if ( downloadableBlocks.length === 0 ) { + return hasLocalBlocks ? null : ; + } + + return ( - ) : ( - ! hasLocalBlocks && ); } - -export default compose( [ - withSelect( ( select, { filterValue } ) => { - const { - getDownloadableBlocks, - isRequestingDownloadableBlocks, - getInstalledBlockTypes, - } = select( blockDirectoryStore ); - - const hasPermission = select( coreStore ).canUser( - 'read', - 'block-directory/search' - ); - - function getInstallableBlocks( term ) { - const downloadableBlocks = getDownloadableBlocks( term ); - const installedBlockTypes = getInstalledBlockTypes(); - // Filter out blocks that are already installed. - const installableBlocks = downloadableBlocks.filter( ( block ) => { - // Check if the block has just been installed, in which case it - // should still show in the list to avoid suddenly disappearing. - // `installedBlockTypes` only returns blocks stored in state - // immediately after installation, not all installed blocks. - const isJustInstalled = !! installedBlockTypes.find( - ( blockType ) => blockType.name === block.name - ); - const isPreviouslyInstalled = getBlockType( block.name ); - return isJustInstalled || ! isPreviouslyInstalled; - } ); - - if ( downloadableBlocks.length === installableBlocks.length ) { - return downloadableBlocks; - } - return installableBlocks; - } - - let downloadableItems = hasPermission - ? getInstallableBlocks( filterValue ) - : []; - - if ( downloadableItems.length === 0 ) { - downloadableItems = EMPTY_ARRAY; - } - - const isLoading = isRequestingDownloadableBlocks( filterValue ); - - return { - downloadableItems, - hasPermission, - isLoading, - }; - } ), -] )( DownloadableBlocksPanel ); diff --git a/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js b/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js index badcc407c78cb..34fc9011b9a1c 100644 --- a/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js @@ -16,13 +16,7 @@ function InserterMenuDownloadableBlocksPanel() { return ( <__unstableInserterMenuExtension> - { ( { - onSelect, - onHover, - filterValue, - hasItems, - rootClientId, - } ) => { + { ( { onSelect, onHover, filterValue, hasItems } ) => { if ( debouncedFilterValue !== filterValue ) { debouncedSetFilterValue( filterValue ); } @@ -35,7 +29,6 @@ function InserterMenuDownloadableBlocksPanel() {