Refactor BlockCompare block to use React hooks (WordPress#22909)

gutenbergfreaks · Jun 5, 2020 · e724276 · e724276
1 parent d4e2d90
commit e724276
Showing 1 changed file with 39 additions and 47 deletions.
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
@@ -11,16 +11,21 @@ import { diffChars } from 'diff/lib/diff/character';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
 import { getSaveContent, getSaveElement } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import BlockView from './block-view';
 
-class BlockCompare extends Component {
-	getDifference( originalContent, newContent ) {
+function BlockCompare( {
+	block,
+	onKeep,
+	onConvert,
+	convertor,
+	convertButtonText,
+} ) {
+	function getDifference( originalContent, newContent ) {
 		const difference = diffChars( originalContent, newContent );
 
 		return difference.map( ( item, pos ) => {
@@ -37,16 +42,9 @@ class BlockCompare extends Component {
 		} );
 	}
 
-	getOriginalContent( block ) {
-		return {
-			rawContent: block.originalContent,
-			renderedContent: getSaveElement( block.name, block.attributes ),
-		};
-	}
-
-	getConvertedContent( block ) {
+	function getConvertedContent( convertedBlock ) {
 		// The convertor may return an array of items or a single item
-		const newBlocks = castArray( block );
+		const newBlocks = castArray( convertedBlock );
 
 		// Get converted block details
 		const newContent = newBlocks.map( ( item ) =>
@@ -62,43 +60,37 @@ class BlockCompare extends Component {
 		};
 	}
 
-	render() {
-		const {
-			block,
-			onKeep,
-			onConvert,
-			convertor,
-			convertButtonText,
-		} = this.props;
-		const original = this.getOriginalContent( block );
-		const converted = this.getConvertedContent( convertor( block ) );
-		const difference = this.getDifference(
-			original.rawContent,
-			converted.rawContent
-		);
+	const original = {
+		rawContent: block.originalContent,
+		renderedContent: getSaveElement( block.name, block.attributes ),
+	};
+	const converted = getConvertedContent( convertor( block ) );
+	const difference = getDifference(
+		original.rawContent,
+		converted.rawContent
+	);
 
-		return (
-			<div className="block-editor-block-compare__wrapper">
-				<BlockView
-					title={ __( 'Current' ) }
-					className="block-editor-block-compare__current"
-					action={ onKeep }
-					actionText={ __( 'Convert to HTML' ) }
-					rawContent={ original.rawContent }
-					renderedContent={ original.renderedContent }
-				/>
+	return (
+		<div className="block-editor-block-compare__wrapper">
+			<BlockView
+				title={ __( 'Current' ) }
+				className="block-editor-block-compare__current"
+				action={ onKeep }
+				actionText={ __( 'Convert to HTML' ) }
+				rawContent={ original.rawContent }
+				renderedContent={ original.renderedContent }
+			/>
 
-				<BlockView
-					title={ __( 'After Conversion' ) }
-					className="block-editor-block-compare__converted"
-					action={ onConvert }
-					actionText={ convertButtonText }
-					rawContent={ difference }
-					renderedContent={ converted.renderedContent }
-				/>
-			</div>
-		);
-	}
+			<BlockView
+				title={ __( 'After Conversion' ) }
+				className="block-editor-block-compare__converted"
+				action={ onConvert }
+				actionText={ convertButtonText }
+				rawContent={ difference }
+				renderedContent={ converted.renderedContent }
+			/>
+		</div>
+	);
 }
 
 export default BlockCompare;