Editor: Use hooks instead of HOC in 'PostPublishButtonOrToggle' (#67413)

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ntsekouras <[email protected]>

packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js

@@ -1,33 +1,55 @@
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostPublishButton from './index';
 import { store as editorStore } from '../../store';
 
-export function PostPublishButtonOrToggle( {
+const IS_TOGGLE = 'toggle';
+const IS_BUTTON = 'button';
+
+export default function PostPublishButtonOrToggle( {
 	forceIsDirty,
-	hasPublishAction,
-	isBeingScheduled,
-	isPending,
-	isPublished,
-	isPublishSidebarEnabled,
-	isPublishSidebarOpened,
-	isScheduled,
-	togglePublishSidebar,
 	setEntitiesSavedStatesCallback,
-	postStatusHasChanged,
-	postStatus,
 } ) {
-	const IS_TOGGLE = 'toggle';
-	const IS_BUTTON = 'button';
-	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
 	let component;
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	const { togglePublishSidebar } = useDispatch( editorStore );
+	const {
+		hasPublishAction,
+		isBeingScheduled,
+		isPending,
+		isPublished,
+		isPublishSidebarEnabled,
+		isPublishSidebarOpened,
+		isScheduled,
+		postStatus,
+		postStatusHasChanged,
+	} = useSelect( ( select ) => {
+		return {
+			hasPublishAction:
+				!! select( editorStore ).getCurrentPost()?._links?.[
+					'wp:action-publish'
+				] ?? false,
+			isBeingScheduled:
+				select( editorStore ).isEditedPostBeingScheduled(),
+			isPending: select( editorStore ).isCurrentPostPending(),
+			isPublished: select( editorStore ).isCurrentPostPublished(),
+			isPublishSidebarEnabled:
+				select( editorStore ).isPublishSidebarEnabled(),
+			isPublishSidebarOpened:
+				select( editorStore ).isPublishSidebarOpened(),
+			isScheduled: select( editorStore ).isCurrentPostScheduled(),
+			postStatus:
+				select( editorStore ).getEditedPostAttribute( 'status' ),
+			postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
+		};
+	}, [] );
 
 	/**
 	 * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
@@ -76,27 +98,3 @@ export function PostPublishButtonOrToggle( {
 		/>
 	);
 }
-
-export default compose(
-	withSelect( ( select ) => ( {
-		hasPublishAction:
-			select( editorStore ).getCurrentPost()?._links?.[
-				'wp:action-publish'
-			] ?? false,
-		isBeingScheduled: select( editorStore ).isEditedPostBeingScheduled(),
-		isPending: select( editorStore ).isCurrentPostPending(),
-		isPublished: select( editorStore ).isCurrentPostPublished(),
-		isPublishSidebarEnabled:
-			select( editorStore ).isPublishSidebarEnabled(),
-		isPublishSidebarOpened: select( editorStore ).isPublishSidebarOpened(),
-		isScheduled: select( editorStore ).isCurrentPostScheduled(),
-		postStatus: select( editorStore ).getEditedPostAttribute( 'status' ),
-		postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { togglePublishSidebar } = dispatch( editorStore );
-		return {
-			togglePublishSidebar,
-		};
-	} )
-)( PostPublishButtonOrToggle );

packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js

@@ -7,37 +7,48 @@ import { render, screen } from '@testing-library/react';
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
+import PostPublishButtonOrToggle from '../post-publish-button-or-toggle';
 
 jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 
 describe( 'PostPublishButtonOrToggle should render a', () => {
 	afterEach( () => {
 		useViewportMatch.mockRestore();
 	} );
 
 	it( 'button when the post is published (1)', () => {
-		render( <PostPublishButtonOrToggle isPublished /> );
+		useSelect.mockImplementation( () => ( {
+			isPublished: true,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();
 	} );
 
 	it( 'button when the post is scheduled (2)', () => {
-		render( <PostPublishButtonOrToggle isScheduled isBeingScheduled /> );
+		useSelect.mockImplementation( () => ( {
+			isScheduled: true,
+			isBeingScheduled: true,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();
 	} );
 
 	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
-		render(
-			<PostPublishButtonOrToggle isPending hasPublishAction={ false } />
-		);
+		useSelect.mockImplementation( () => ( {
+			isPending: true,
+			hasPublishAction: false,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
 
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
@@ -46,16 +57,20 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
 
 	it( 'toggle when post is not (1), (2), (3), the viewport is <= medium, and the publish sidebar is enabled', () => {
 		useViewportMatch.mockReturnValue( true );
+		useSelect.mockImplementation( () => ( {
+			isPublishSidebarEnabled: true,
+		} ) );
 		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Publish' } )
 		).toBeVisible();
 	} );
 
 	it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
-		render(
-			<PostPublishButtonOrToggle isPublishSidebarEnabled={ false } />
-		);
+		useSelect.mockImplementation( () => ( {
+			isPublishSidebarEnabled: false,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();