From b611401c77b8b132e7d906cfb5f1c6a3ef49f33d Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Fri, 19 Jun 2020 12:08:04 -0300
Subject: [PATCH] Refactor header toolbar items to use @wordpress/data hooks

---
 .../src/components/editor-history/redo.js     | 24 +++++----------
 .../src/components/editor-history/undo.js     | 24 +++++----------
 .../src/components/table-of-contents/index.js | 24 +++++----------
 .../src/components/table-of-contents/panel.js | 29 +++++++++----------
 4 files changed, 36 insertions(+), 65 deletions(-)

diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
index 2e359963bd172..7bfd25a81ba71 100644
--- 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
index eb1f80b217198..bb6d3907e85b1 100644
--- 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
index cb3e1fb033ea0..9d3d3e959b326 100644
--- 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
index 355d16c46ccfc..f9a40ddceefa2 100644
--- a/packages/editor/src/components/table-of-contents/panel.js
+++ b/packages/editor/src/components/table-of-contents/panel.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,13 +10,17 @@ import { withSelect } from '@wordpress/data';
 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;