From a6212c88baf4f688b64f948c7bdb454043f83407 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 29 Nov 2024 10:59:55 +0400
Subject: [PATCH] Editor: Refactor 'PostPublishPanelPostpublish' to function
 component (#67398)

* Editor: Refactor 'PostPublishPanelPostpublish' to function component
* Extract copy button

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
---
 .../post-publish-panel/postpublish.js         | 238 +++++++++---------
 1 file changed, 114 insertions(+), 124 deletions(-)

diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 29ee1871057ea1..98afb4d1d573e7 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -3,8 +3,8 @@
  */
 import { PanelBody, Button, TextControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -41,142 +41,132 @@ const getFuturePostUrl = ( post ) => {
 	return post.permalink_template;
 };
 
-function CopyButton( { text, onCopy, children } ) {
-	const ref = useCopyToClipboard( text, onCopy );
+function CopyButton( { text } ) {
+	const [ showCopyConfirmation, setShowCopyConfirmation ] = useState( false );
+	const timeoutIdRef = useRef();
+	const ref = useCopyToClipboard( text, () => {
+		setShowCopyConfirmation( true );
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
+		}
+		timeoutIdRef.current = setTimeout( () => {
+			setShowCopyConfirmation( false );
+		}, 4000 );
+	} );
+
+	useEffect( () => {
+		return () => {
+			if ( timeoutIdRef.current ) {
+				clearTimeout( timeoutIdRef.current );
+			}
+		};
+	}, [] );
+
 	return (
 		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
-			{ children }
+			{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) }
 		</Button>
 	);
 }
 
-class PostPublishPanelPostpublish extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			showCopyConfirmation: false,
+export default function PostPublishPanelPostpublish( {
+	focusOnMount,
+	children,
+} ) {
+	const { post, postType, isScheduled } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			getCurrentPost,
+			isCurrentPostScheduled,
+		} = select( editorStore );
+		const { getPostType } = select( coreStore );
+
+		return {
+			post: getCurrentPost(),
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			isScheduled: isCurrentPostScheduled(),
 		};
-		this.onCopy = this.onCopy.bind( this );
-		this.onSelectInput = this.onSelectInput.bind( this );
-		this.postLink = createRef();
-	}
-
-	componentDidMount() {
-		if ( this.props.focusOnMount ) {
-			this.postLink.current.focus();
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.dismissCopyConfirmation );
-	}
-
-	onCopy() {
-		this.setState( {
-			showCopyConfirmation: true,
-		} );
+	}, [] );
+
+	const postLabel = postType?.labels?.singular_name;
+	const viewPostLabel = postType?.labels?.view_item;
+	const addNewPostLabel = postType?.labels?.add_new_item;
+	const link =
+		post.status === 'future' ? getFuturePostUrl( post ) : post.link;
+	const addLink = addQueryArgs( 'post-new.php', {
+		post_type: post.type,
+	} );
+
+	const postLinkRef = useCallback(
+		( node ) => {
+			if ( focusOnMount && node ) {
+				node.focus();
+			}
+		},
+		[ focusOnMount ]
+	);
 
-		clearTimeout( this.dismissCopyConfirmation );
-		this.dismissCopyConfirmation = setTimeout( () => {
-			this.setState( {
-				showCopyConfirmation: false,
-			} );
-		}, 4000 );
-	}
+	const postPublishNonLinkHeader = isScheduled ? (
+		<>
+			{ __( 'is now scheduled. It will go live on' ) }{ ' ' }
+			<PostScheduleLabel />.
+		</>
+	) : (
+		__( 'is now live.' )
+	);
 
-	onSelectInput( event ) {
-		event.target.select();
-	}
+	return (
+		<div className="post-publish-panel__postpublish">
+			<PanelBody className="post-publish-panel__postpublish-header">
+				<a ref={ postLinkRef } href={ link }>
+					{ decodeEntities( post.title ) || __( '(no title)' ) }
+				</a>{ ' ' }
+				{ postPublishNonLinkHeader }
+			</PanelBody>
+			<PanelBody>
+				<p className="post-publish-panel__postpublish-subheader">
+					<strong>{ __( 'What’s next?' ) }</strong>
+				</p>
+				<div className="post-publish-panel__postpublish-post-address-container">
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						className="post-publish-panel__postpublish-post-address"
+						readOnly
+						label={ sprintf(
+							/* translators: %s: post type singular name */
+							__( '%s address' ),
+							postLabel
+						) }
+						value={ safeDecodeURIComponent( link ) }
+						onFocus={ ( event ) => event.target.select() }
+					/>
 
-	render() {
-		const { children, isScheduled, post, postType } = this.props;
-		const postLabel = postType?.labels?.singular_name;
-		const viewPostLabel = postType?.labels?.view_item;
-		const addNewPostLabel = postType?.labels?.add_new_item;
-		const link =
-			post.status === 'future' ? getFuturePostUrl( post ) : post.link;
-		const addLink = addQueryArgs( 'post-new.php', {
-			post_type: post.type,
-		} );
-
-		const postPublishNonLinkHeader = isScheduled ? (
-			<>
-				{ __( 'is now scheduled. It will go live on' ) }{ ' ' }
-				<PostScheduleLabel />.
-			</>
-		) : (
-			__( 'is now live.' )
-		);
-
-		return (
-			<div className="post-publish-panel__postpublish">
-				<PanelBody className="post-publish-panel__postpublish-header">
-					<a ref={ this.postLink } href={ link }>
-						{ decodeEntities( post.title ) || __( '(no title)' ) }
-					</a>{ ' ' }
-					{ postPublishNonLinkHeader }
-				</PanelBody>
-				<PanelBody>
-					<p className="post-publish-panel__postpublish-subheader">
-						<strong>{ __( 'What’s next?' ) }</strong>
-					</p>
-					<div className="post-publish-panel__postpublish-post-address-container">
-						<TextControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
-							className="post-publish-panel__postpublish-post-address"
-							readOnly
-							label={ sprintf(
-								/* translators: %s: post type singular name */
-								__( '%s address' ),
-								postLabel
-							) }
-							value={ safeDecodeURIComponent( link ) }
-							onFocus={ this.onSelectInput }
-						/>
-
-						<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
-							<CopyButton text={ link } onCopy={ this.onCopy }>
-								{ this.state.showCopyConfirmation
-									? __( 'Copied!' )
-									: __( 'Copy' ) }
-							</CopyButton>
-						</div>
+					<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
+						<CopyButton text={ link } />
 					</div>
+				</div>
 
-					<div className="post-publish-panel__postpublish-buttons">
-						{ ! isScheduled && (
-							<Button
-								variant="primary"
-								href={ link }
-								__next40pxDefaultSize
-							>
-								{ viewPostLabel }
-							</Button>
-						) }
+				<div className="post-publish-panel__postpublish-buttons">
+					{ ! isScheduled && (
 						<Button
-							variant={ isScheduled ? 'primary' : 'secondary' }
+							variant="primary"
+							href={ link }
 							__next40pxDefaultSize
-							href={ addLink }
 						>
-							{ addNewPostLabel }
+							{ viewPostLabel }
 						</Button>
-					</div>
-				</PanelBody>
-				{ children }
-			</div>
-		);
-	}
+					) }
+					<Button
+						variant={ isScheduled ? 'primary' : 'secondary' }
+						__next40pxDefaultSize
+						href={ addLink }
+					>
+						{ addNewPostLabel }
+					</Button>
+				</div>
+			</PanelBody>
+			{ children }
+		</div>
+	);
 }
-
-export default withSelect( ( select ) => {
-	const { getEditedPostAttribute, getCurrentPost, isCurrentPostScheduled } =
-		select( editorStore );
-	const { getPostType } = select( coreStore );
-
-	return {
-		post: getCurrentPost(),
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-		isScheduled: isCurrentPostScheduled(),
-	};
-} )( PostPublishPanelPostpublish );