Editor: Use hooks instead of HoCs in 'PostSticky' components

packages/editor/src/components/post-sticky/check.js

@@ -1,28 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostStickyCheck( { hasStickyAction, postType, children } ) {
+export default function PostStickyCheck( { children } ) {
+	const { hasStickyAction, postType } = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		return {
+			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
+			postType: select( editorStore ).getCurrentPostType(),
+		};
+	}, [] );
+
 	if ( postType !== 'post' || ! hasStickyAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const post = select( editorStore ).getCurrentPost();
-		return {
-			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
-			postType: select( editorStore ).getCurrentPostType(),
-		};
-	} ),
-] )( PostStickyCheck );

packages/editor/src/components/post-sticky/index.js

@@ -3,40 +3,30 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
 
-export function PostSticky( { onUpdateSticky, postSticky = false } ) {
+export default function PostSticky() {
+	const postSticky = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getEditedPostAttribute( 'sticky' ) ?? false
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				label={ __( 'Stick to the top of the blog' ) }
 				checked={ postSticky }
-				onChange={ () => onUpdateSticky( ! postSticky ) }
+				onChange={ () => editPost( { sticky: ! postSticky } ) }
 			/>
 		</PostStickyCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postSticky:
-				select( editorStore ).getEditedPostAttribute( 'sticky' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onUpdateSticky( postSticky ) {
-				dispatch( editorStore ).editPost( { sticky: postSticky } );
-			},
-		};
-	} ),
-] )( PostSticky );

packages/editor/src/components/post-sticky/test/index.js

@@ -3,40 +3,55 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostStickyCheck } from '../check';
+import PostStickyCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function setupUseSelectMock( { hasStickyAction, postType } ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getCurrentPostType: () => postType,
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-sticky': hasStickyAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
-		render(
-			<PostStickyCheck postType="page" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect(
 			screen.queryByText( 'Can Toggle Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ false }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect(
 			screen.queryByText( 'Can Toggle Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
 	} );
 } );