BrowserURL: Refactor to a function component and use hooks (#71035)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: R1shabh-Gupta <rishabhwp@git.wordpress.org>

Author: 3 people

packages/edit-post/src/components/browser-url/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { store as editorStore } from '@wordpress/editor';
 
@@ -17,65 +17,35 @@ export function getPostEditURL( postId ) {
 	return addQueryArgs( 'post.php', { post: postId, action: 'edit' } );
 }
 
-export class BrowserURL extends Component {
-	constructor() {
-		super( ...arguments );
+export default function BrowserURL() {
+	const [ historyId, setHistoryId ] = useState( null );
+	const { postId, postStatus } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		const post = getCurrentPost();
+		let { id, status, type } = post;
+		const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
+			type
+		);
+		if ( isTemplate ) {
+			id = post.wp_id;
+		}
 
-		this.state = {
-			historyId: null,
+		return {
+			postId: id,
+			postStatus: status,
 		};
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { postId, postStatus } = this.props;
-		const { historyId } = this.state;
-
-		if (
-			( postId !== prevProps.postId || postId !== historyId ) &&
-			postStatus !== 'auto-draft' &&
-			postId
-		) {
-			this.setBrowserURL( postId );
+	}, [] );
+
+	useEffect( () => {
+		if ( postId && postId !== historyId && postStatus !== 'auto-draft' ) {
+			window.history.replaceState(
+				{ id: postId },
+				'Post ' + postId,
+				getPostEditURL( postId )
+			);
+			setHistoryId( postId );
 		}
-	}
+	}, [ postId, postStatus, historyId ] );
 
-	/**
-	 * Replaces the browser URL with a post editor link for the given post ID.
-	 *
-	 * Note it is important that, since this function may be called when the
-	 * editor first loads, the result generated `getPostEditURL` matches that
-	 * produced by the server. Otherwise, the URL will change unexpectedly.
-	 *
-	 * @param {number} postId Post ID for which to generate post editor URL.
-	 */
-	setBrowserURL( postId ) {
-		window.history.replaceState(
-			{ id: postId },
-			'Post ' + postId,
-			getPostEditURL( postId )
-		);
-
-		this.setState( () => ( {
-			historyId: postId,
-		} ) );
-	}
-
-	render() {
-		return null;
-	}
+	return null;
 }
-
-export default withSelect( ( select ) => {
-	const { getCurrentPost } = select( editorStore );
-	const post = getCurrentPost();
-	let { id, status, type } = post;
-	const isTemplate = [ 'wp_template', 'wp_template_part' ].includes( type );
-	if ( isTemplate ) {
-		id = post.wp_id;
-	}
-
-	return {
-		postId: id,
-		postStatus: status,
-	};
-} )( BrowserURL );

packages/edit-post/src/components/browser-url/test/index.js

@@ -3,10 +3,26 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { getPostEditURL, BrowserURL } from '../';
+import { default as BrowserURL, getPostEditURL } from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( { postId, postStatus } ) {
+	useSelect.mockImplementation( () => {
+		return {
+			postId,
+			postStatus,
+		};
+	} );
+}
 
 describe( 'getPostEditURL', () => {
 	it( 'should generate relative path with post and action arguments', () => {
@@ -32,20 +48,28 @@ describe( 'BrowserURL', () => {
 	} );
 
 	it( 'not update URL if post is auto-draft', () => {
-		const { rerender } = render( <BrowserURL /> );
-
-		rerender( <BrowserURL postId={ 1 } postStatus="auto-draft" /> );
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'auto-draft',
+		} );
 
+		render( <BrowserURL /> );
 		expect( replaceStateSpy ).not.toHaveBeenCalled();
 	} );
 
 	it( 'update URL if post is no longer auto-draft', () => {
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'auto-draft',
+		} );
 		const { rerender } = render( <BrowserURL /> );
 
-		rerender( <BrowserURL postId={ 1 } postStatus="auto-draft" /> );
-
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'draft',
+		} );
 
+		rerender( <BrowserURL /> );
 		expect( replaceStateSpy ).toHaveBeenCalledWith(
 			{ id: 1 },
 			'Post 1',
@@ -54,26 +78,32 @@ describe( 'BrowserURL', () => {
 	} );
 
 	it( 'not update URL if history is already set', () => {
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'draft',
+		} );
 		const { rerender } = render( <BrowserURL /> );
 
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
-
 		replaceStateSpy.mockReset();
 
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
-
+		rerender( <BrowserURL /> );
 		expect( replaceStateSpy ).not.toHaveBeenCalled();
 	} );
 
 	it( 'update URL if post ID changes', () => {
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'draft',
+		} );
 		const { rerender } = render( <BrowserURL /> );
 
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
-
+		setupUseSelectMock( {
+			postId: 2,
+			postStatus: 'draft',
+		} );
 		replaceStateSpy.mockReset();
 
-		rerender( <BrowserURL postId={ 2 } postStatus="draft" /> );
-
+		rerender( <BrowserURL /> );
 		expect( replaceStateSpy ).toHaveBeenCalledWith(
 			{ id: 2 },
 			'Post 2',