Refactor header toolbar items to use @wordpress/data hooks (#23315)

WordPress · Jun 19, 2020 · ad7eea3 · ad7eea3
1 parent 4b9fc09
commit ad7eea3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 65 deletions.
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
@@ -3,17 +3,20 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { redo as redoIcon } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
-function EditorHistoryRedo( { hasRedo, redo, innerRef, ...props } ) {
+function EditorHistoryRedo( props, ref ) {
+	const hasRedo = useSelect( ( select ) =>
+		select( 'core/editor' ).hasEditorRedo()
+	);
+	const { redo } = useDispatch( 'core/editor' );
 	return (
 		<Button
 			{ ...props }
-			ref={ innerRef }
+			ref={ ref }
 			icon={ redoIcon }
 			label={ __( 'Redo' ) }
 			shortcut={ displayShortcut.primaryShift( 'z' ) }
@@ -27,15 +30,4 @@ function EditorHistoryRedo( { hasRedo, redo, innerRef, ...props } ) {
 	);
 }
 
-const EnhancedEditorHistoryRedo = compose( [
-	withSelect( ( select ) => ( {
-		hasRedo: select( 'core/editor' ).hasEditorRedo(),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		redo: dispatch( 'core/editor' ).redo,
-	} ) ),
-] )( EditorHistoryRedo );
-
-export default forwardRef( ( props, ref ) => (
-	<EnhancedEditorHistoryRedo { ...props } innerRef={ ref } />
-) );
+export default forwardRef( EditorHistoryRedo );
diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js
@@ -3,17 +3,20 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { undo as undoIcon } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
-function EditorHistoryUndo( { hasUndo, undo, innerRef, ...props } ) {
+function EditorHistoryUndo( props, ref ) {
+	const hasUndo = useSelect( ( select ) =>
+		select( 'core/editor' ).hasEditorUndo()
+	);
+	const { undo } = useDispatch( 'core/editor' );
 	return (
 		<Button
 			{ ...props }
-			ref={ innerRef }
+			ref={ ref }
 			icon={ undoIcon }
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
@@ -27,15 +30,4 @@ function EditorHistoryUndo( { hasUndo, undo, innerRef, ...props } ) {
 	);
 }
 
-const EnhancedEditorHistoryUndo = compose( [
-	withSelect( ( select ) => ( {
-		hasUndo: select( 'core/editor' ).hasEditorUndo(),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		undo: dispatch( 'core/editor' ).undo,
-	} ) ),
-] )( EditorHistoryUndo );
-
-export default forwardRef( ( props, ref ) => (
-	<EnhancedEditorHistoryUndo { ...props } innerRef={ ref } />
-) );
+export default forwardRef( EditorHistoryUndo );
diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { info } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
@@ -12,12 +12,10 @@ import { forwardRef } from '@wordpress/element';
  */
 import TableOfContentsPanel from './panel';
 
-function TableOfContents( {
-	hasBlocks,
-	hasOutlineItemsDisabled,
-	innerRef,
-	...props
-} ) {
+function TableOfContents( { hasOutlineItemsDisabled, ...props }, ref ) {
+	const hasBlocks = useSelect(
+		( select ) => !! select( 'core/block-editor' ).getBlockCount()
+	);
 	return (
 		<Dropdown
 			position="bottom"
@@ -26,7 +24,7 @@ function TableOfContents( {
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
 					{ ...props }
-					ref={ innerRef }
+					ref={ ref }
 					onClick={ hasBlocks ? onToggle : undefined }
 					icon={ info }
 					aria-expanded={ isOpen }
@@ -45,12 +43,4 @@ function TableOfContents( {
 	);
 }
 
-const TableOfContentsWithSelect = withSelect( ( select ) => {
-	return {
-		hasBlocks: !! select( 'core/block-editor' ).getBlockCount(),
-	};
-} )( TableOfContents );
-
-export default forwardRef( ( props, ref ) => (
-	<TableOfContentsWithSelect { ...props } innerRef={ ref } />
-) );
+export default forwardRef( TableOfContents );
diff --git a/packages/editor/src/components/table-of-contents/panel.js b/packages/editor/src/components/table-of-contents/panel.js
@@ -2,21 +2,25 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import WordCount from '../word-count';
 import DocumentOutline from '../document-outline';
 
-function TableOfContentsPanel( {
-	headingCount,
-	paragraphCount,
-	numberOfBlocks,
-	hasOutlineItemsDisabled,
-	onRequestClose,
-} ) {
+function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) {
+	const { headingCount, paragraphCount, numberOfBlocks } = useSelect(
+		( select ) => {
+			const { getGlobalBlockCount } = select( 'core/block-editor' );
+			return {
+				headingCount: getGlobalBlockCount( 'core/heading' ),
+				paragraphCount: getGlobalBlockCount( 'core/paragraph' ),
+				numberOfBlocks: getGlobalBlockCount(),
+			};
+		}
+	);
 	return (
 		/*
 		 * Disable reason: The `list` ARIA role is redundant but
@@ -72,11 +76,4 @@ function TableOfContentsPanel( {
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getGlobalBlockCount } = select( 'core/block-editor' );
-	return {
-		headingCount: getGlobalBlockCount( 'core/heading' ),
-		paragraphCount: getGlobalBlockCount( 'core/paragraph' ),
-		numberOfBlocks: getGlobalBlockCount(),
-	};
-} )( TableOfContentsPanel );
+export default TableOfContentsPanel;