Components: Extract PostFormatCheck component to avoid duplication

WordPress · Oct 27, 2017 · 24f6cb7 · 24f6cb7
1 parent be143b0
commit 24f6cb7
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 71 deletions.
diff --git a/editor/post-format/check.js b/editor/post-format/check.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { get, flowRight } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withAPIData } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getCurrentPostType } from '../selectors';
+
+function PostFormatCheck( { postType, children } ) {
+	if ( ! get( postType.data, [ 'supports', 'post-formats' ] ) ) {
+		return null;
+	}
+
+	return children;
+}
+
+export default flowRight( [
+	connect(
+		( state ) => {
+			return {
+				postTypeSlug: getCurrentPostType( state ),
+			};
+		},
+	),
+	withAPIData( ( props ) => {
+		const { postTypeSlug } = props;
+
+		return {
+			postType: `/wp/v2/types/${ postTypeSlug }?context=edit`,
+		};
+	} ),
+] )( PostFormatCheck );
diff --git a/editor/post-format/index.js b/editor/post-format/index.js
@@ -2,19 +2,20 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { get, find, flowRight } from 'lodash';
+import { find, flowRight } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withInstanceId, withAPIData } from '@wordpress/components';
+import { withInstanceId } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { getEditedPostAttribute, getSuggestedPostFormat, getCurrentPostType } from '../selectors';
+import PostFormatCheck from './check';
+import { getEditedPostAttribute, getSuggestedPostFormat } from '../selectors';
 import { editPost } from '../actions';
 
 const POST_FORMATS = [
@@ -30,41 +31,39 @@ const POST_FORMATS = [
 	{ id: 'chat', caption: __( 'Chat' ) },
 ];
 
-function PostFormat( { postType, onUpdatePostFormat, postFormat = 'standard', suggestedFormat, instanceId } ) {
-	if ( ! get( postType.data, [ 'supports', 'post-formats' ] ) ) {
-		return null;
-	}
-
+function PostFormat( { onUpdatePostFormat, postFormat = 'standard', suggestedFormat, instanceId } ) {
 	const postFormatSelectorId = 'post-format-selector-' + instanceId;
 	const suggestion = find( POST_FORMATS, ( format ) => format.id === suggestedFormat );
 
 	// Disable reason: We need to change the value immiediately to show/hide the suggestion if needed
 
 	/* eslint-disable jsx-a11y/no-onchange */
 	return (
-		<div className="editor-post-format">
-			<div className="editor-post-format__content">
-				<label htmlFor={ postFormatSelectorId }>{ __( 'Post Format' ) }</label>
-				<select
-					value={ postFormat }
-					onChange={ ( event ) => onUpdatePostFormat( event.target.value ) }
-					id={ postFormatSelectorId }
-				>
-					{ POST_FORMATS.map( format => (
-						<option key={ format.id } value={ format.id }>{ format.caption }</option>
-					) ) }
-				</select>
-			</div>
-
-			{ suggestion && suggestion.id !== postFormat && (
-				<div className="editor-post-format__suggestion">
-					{ __( 'Suggestion:' ) }{ ' ' }
-					<button className="button-link" onClick={ () => onUpdatePostFormat( suggestion.id ) }>
-						{ suggestion.caption }
-					</button>
+		<PostFormatCheck>
+			<div className="editor-post-format">
+				<div className="editor-post-format__content">
+					<label htmlFor={ postFormatSelectorId }>{ __( 'Post Format' ) }</label>
+					<select
+						value={ postFormat }
+						onChange={ ( event ) => onUpdatePostFormat( event.target.value ) }
+						id={ postFormatSelectorId }
+					>
+						{ POST_FORMATS.map( format => (
+							<option key={ format.id } value={ format.id }>{ format.caption }</option>
+						) ) }
+					</select>
 				</div>
-			) }
-		</div>
+
+				{ suggestion && suggestion.id !== postFormat && (
+					<div className="editor-post-format__suggestion">
+						{ __( 'Suggestion:' ) }{ ' ' }
+						<button className="button-link" onClick={ () => onUpdatePostFormat( suggestion.id ) }>
+							{ suggestion.caption }
+						</button>
+					</div>
+				) }
+			</div>
+		</PostFormatCheck>
 	);
 	/* eslint-enable jsx-a11y/no-onchange */
 }
@@ -75,7 +74,6 @@ export default flowRight( [
 			return {
 				postFormat: getEditedPostAttribute( state, 'format' ),
 				suggestedFormat: getSuggestedPostFormat( state ),
-				postTypeSlug: getCurrentPostType( state ),
 			};
 		},
 		{
@@ -84,12 +82,5 @@ export default flowRight( [
 			},
 		},
 	),
-	withAPIData( ( props ) => {
-		const { postTypeSlug } = props;
-
-		return {
-			postType: `/wp/v2/types/${ postTypeSlug }?context=edit`,
-		};
-	} ),
 	withInstanceId,
 ] )( PostFormat );
diff --git a/editor/sidebar/post-format/index.js b/editor/sidebar/post-format/index.js
@@ -1,45 +1,22 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-import { get, flowRight } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { PanelRow, withAPIData } from '@wordpress/components';
+import { PanelRow } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import PostFormatSelector from '../../post-format';
-import { getCurrentPostType } from '../../selectors';
-
-function PostFormat( { postType } ) {
-	if ( ! get( postType.data, [ 'supports', 'post-formats' ] ) ) {
-		return null;
-	}
+import PostFormatCheck from '../../post-format/check';
+import PostFormatForm from '../../post-format';
 
+export function PostFormat() {
 	return (
-		<PanelRow>
-			<PostFormatSelector />
-		</PanelRow>
+		<PostFormatCheck>
+			<PanelRow>
+				<PostFormatForm />
+			</PanelRow>
+		</PostFormatCheck>
 	);
 }
 
-export default flowRight( [
-	connect(
-		( state ) => {
-			return {
-				postTypeSlug: getCurrentPostType( state ),
-			};
-		},
-	),
-	withAPIData( ( props ) => {
-		const { postTypeSlug } = props;
-
-		return {
-			postType: `/wp/v2/types/${ postTypeSlug }?context=edit`,
-		};
-	} ),
-] )( PostFormat );
+export default PostFormat;