Refactor MetaBoxesArea to to functional components using hooks.

packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js

@@ -6,83 +6,66 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
 
-class MetaBoxesArea extends Component {
-	/**
-	 * @inheritdoc
-	 */
-	constructor() {
-		super( ...arguments );
-		this.bindContainerNode = this.bindContainerNode.bind( this );
-	}
+/**
+ * Render metabox area.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.location metabox location.
+ * @return {WPComponent} The component to be rendered.
+ */
+function MetaBoxesArea( { location } ) {
+	const container = useRef( null );
+	const formRef = useRef( null );
 
-	/**
-	 * @inheritdoc
-	 */
-	componentDidMount() {
-		this.form = document.querySelector(
-			'.metabox-location-' + this.props.location
+	useEffect( () => {
+		formRef.current = document.querySelector(
+			'.metabox-location-' + location
 		);
-		if ( this.form ) {
-			this.container.appendChild( this.form );
-		}
-	}
 
-	/**
-	 * Get the meta box location form from the original location.
-	 */
-	componentWillUnmount() {
-		if ( this.form ) {
-			document.querySelector( '#metaboxes' ).appendChild( this.form );
+		if ( formRef.current ) {
+			container.current.appendChild( formRef.current );
 		}
-	}
 
-	/**
-	 * Binds the metabox area container node.
-	 *
-	 * @param {Element} node DOM Node.
-	 */
-	bindContainerNode( node ) {
-		this.container = node;
-	}
+		return () => {
+			if ( formRef.current ) {
+				document
+					.querySelector( '#metaboxes' )
+					.appendChild( formRef.current );
+			}
+		};
+	}, [ location ] );
 
-	/**
-	 * @inheritdoc
-	 */
-	render() {
-		const { location, isSaving } = this.props;
+	const isSaving = useSelect( ( select ) => {
+		return select( editPostStore ).isSavingMetaBoxes();
+	}, [] );
 
-		const classes = classnames(
-			'edit-post-meta-boxes-area',
-			`is-${ location }`,
-			{
-				'is-loading': isSaving,
-			}
-		);
+	const classes = classnames(
+		'edit-post-meta-boxes-area',
+		`is-${ location }`,
+		{
+			'is-loading': isSaving,
+		}
+	);
 
-		return (
-			<div className={ classes }>
-				{ isSaving && <Spinner /> }
-				<div
-					className="edit-post-meta-boxes-area__container"
-					ref={ this.bindContainerNode }
-				/>
-				<div className="edit-post-meta-boxes-area__clear" />
-			</div>
-		);
-	}
+	return (
+		<div className={ classes }>
+			{ isSaving && <Spinner /> }
+			<div
+				className="edit-post-meta-boxes-area__container"
+				ref={ container }
+			/>
+			<div className="edit-post-meta-boxes-area__clear" />
+		</div>
+	);
 }
 
-export default withSelect( ( select ) => {
-	return {
-		isSaving: select( editPostStore ).isSavingMetaBoxes(),
-	};
-} )( MetaBoxesArea );
+export default MetaBoxesArea;