From 61066c5edef75a66931d00727147cc7192107d12 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 1 Nov 2017 15:42:17 +0100
Subject: [PATCH] Components: Extract a reusable PostFeaturedImage component

---
 editor/post-featured-image/index.js           | 93 +++++++++++++++++++
 .../style.scss                                |  8 +-
 editor/sidebar/featured-image/index.js        | 75 ++-------------
 3 files changed, 104 insertions(+), 72 deletions(-)
 create mode 100644 editor/post-featured-image/index.js
 rename editor/{sidebar/featured-image => post-featured-image}/style.scss (67%)

diff --git a/editor/post-featured-image/index.js b/editor/post-featured-image/index.js
new file mode 100644
index 00000000000000..86754a68425e8f
--- /dev/null
+++ b/editor/post-featured-image/index.js
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { flowRight } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Spinner, ResponsiveWrapper, withAPIData } from '@wordpress/components';
+import { MediaUploadButton } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getEditedPostAttribute } from '../selectors';
+import { editPost } from '../actions';
+
+function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media } ) {
+	return (
+		<div className="editor-post-featured-image">
+			{ !! featuredImageId &&
+				<MediaUploadButton
+					buttonProps={ { className: 'button-link editor-post-featured-image__preview' } }
+					onSelect={ onUpdateImage }
+					type="image"
+				>
+					{ media && !! media.data &&
+						<ResponsiveWrapper
+							naturalWidth={ media.data.media_details.width }
+							naturalHeight={ media.data.media_details.height }
+						>
+							<img src={ media.data.source_url } alt={ __( 'Featured image' ) } />
+						</ResponsiveWrapper>
+					}
+					{ media && media.isLoading && <Spinner /> }
+				</MediaUploadButton>
+			}
+			{ !! featuredImageId && media && ! media.isLoading &&
+				<p className="editor-post-featured-image__howto">
+					{ __( 'Click the image to edit or update' ) }
+				</p>
+			}
+			{ ! featuredImageId &&
+				<MediaUploadButton
+					buttonProps={ { className: 'editor-post-featured-image__toggle button-link' } }
+					onSelect={ onUpdateImage }
+					type="image"
+				>
+					{ __( 'Set featured image' ) }
+				</MediaUploadButton>
+			}
+			{ !! featuredImageId &&
+				<Button className="editor-post-featured-image__toggle button-link" onClick={ onRemoveImage }>
+					{ __( 'Remove featured image' ) }
+				</Button>
+			}
+		</div>
+	);
+}
+
+const applyConnect = connect(
+	( state ) => {
+		return {
+			featuredImageId: getEditedPostAttribute( state, 'featured_media' ),
+		};
+	},
+	{
+		onUpdateImage( image ) {
+			return editPost( { featured_media: image.id } );
+		},
+		onRemoveImage() {
+			return editPost( { featured_media: 0 } );
+		},
+	}
+);
+
+const applyWithAPIData = withAPIData( ( { featuredImageId } ) => {
+	if ( ! featuredImageId ) {
+		return {};
+	}
+
+	return {
+		media: `/wp/v2/media/${ featuredImageId }`,
+	};
+} );
+
+export default flowRight(
+	applyConnect,
+	applyWithAPIData,
+)( PostFeaturedImage );
diff --git a/editor/sidebar/featured-image/style.scss b/editor/post-featured-image/style.scss
similarity index 67%
rename from editor/sidebar/featured-image/style.scss
rename to editor/post-featured-image/style.scss
index a6b4683158fe18..8418acce1410bc 100644
--- a/editor/sidebar/featured-image/style.scss
+++ b/editor/post-featured-image/style.scss
@@ -1,4 +1,4 @@
-.editor-featured-image__content {
+.editor-post-featured-image {
 	padding: 10px 0 0;
 
 	.spinner {
@@ -6,7 +6,7 @@
 	}
 }
 
-.editor-featured-image__toggle {
+.editor-post-featured-image__toggle {
 	text-decoration: underline;
 	color: $blue-wordpress;
 
@@ -20,12 +20,12 @@
 	}
 }
 
-.editor-featured-image__preview {
+.editor-post-featured-image__preview {
 	display: block;
 	width: 100%;
 }
 
-.editor-featured-image__howto {
+.editor-post-featured-image__howto {
 	color: $dark-gray-300;
 	font-style: italic;
 	margin: 10px 0;
diff --git a/editor/sidebar/featured-image/index.js b/editor/sidebar/featured-image/index.js
index 1ecdff9d264afe..cedc1f87f21abc 100644
--- a/editor/sidebar/featured-image/index.js
+++ b/editor/sidebar/featured-image/index.js
@@ -2,103 +2,42 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { flowRight } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, PanelBody, Spinner, ResponsiveWrapper, withAPIData } from '@wordpress/components';
-import { MediaUploadButton } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
-import { getEditedPostAttribute, isEditorSidebarPanelOpened } from '../../selectors';
-import { editPost, toggleSidebarPanel } from '../../actions';
+import PostFeaturedImage from '../../post-featured-image';
+import { isEditorSidebarPanelOpened } from '../../selectors';
+import { toggleSidebarPanel } from '../../actions';
 
 /**
  * Module Constants
  */
 const PANEL_NAME = 'featured-image';
 
-function FeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, isOpened, onTogglePanel } ) {
+function FeaturedImage( { isOpened, onTogglePanel } ) {
 	return (
 		<PanelBody title={ __( 'Featured Image' ) } opened={ isOpened } onToggle={ onTogglePanel }>
-			<div className="editor-featured-image__content">
-				{ !! featuredImageId &&
-					<MediaUploadButton
-						buttonProps={ { className: 'button-link editor-featured-image__preview' } }
-						onSelect={ onUpdateImage }
-						type="image"
-					>
-						{ media && !! media.data &&
-							<ResponsiveWrapper
-								naturalWidth={ media.data.media_details.width }
-								naturalHeight={ media.data.media_details.height }
-							>
-								<img src={ media.data.source_url } alt={ __( 'Featured image' ) } />
-							</ResponsiveWrapper>
-						}
-						{ media && media.isLoading && <Spinner /> }
-					</MediaUploadButton>
-				}
-				{ !! featuredImageId && media && ! media.isLoading &&
-					<p className="editor-featured-image__howto">
-						{ __( 'Click the image to edit or update' ) }
-					</p>
-				}
-				{ ! featuredImageId &&
-					<MediaUploadButton
-						buttonProps={ { className: 'editor-featured-image__toggle button-link' } }
-						onSelect={ onUpdateImage }
-						type="image"
-					>
-						{ __( 'Set featured image' ) }
-					</MediaUploadButton>
-				}
-				{ !! featuredImageId &&
-					<Button className="editor-featured-image__toggle button-link" onClick={ onRemoveImage }>
-						{ __( 'Remove featured image' ) }
-					</Button>
-				}
-			</div>
+			<PostFeaturedImage />
 		</PanelBody>
 	);
 }
 
-const applyConnect = connect(
+export default connect(
 	( state ) => {
 		return {
-			featuredImageId: getEditedPostAttribute( state, 'featured_media' ),
 			isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ),
 		};
 	},
 	{
-		onUpdateImage( image ) {
-			return editPost( { featured_media: image.id } );
-		},
-		onRemoveImage() {
-			return editPost( { featured_media: 0 } );
-		},
 		onTogglePanel() {
 			return toggleSidebarPanel( PANEL_NAME );
 		},
 	}
-);
-
-const applyWithAPIData = withAPIData( ( { featuredImageId } ) => {
-	if ( ! featuredImageId ) {
-		return {};
-	}
-
-	return {
-		media: `/wp/v2/media/${ featuredImageId }`,
-	};
-} );
-
-export default flowRight(
-	applyConnect,
-	applyWithAPIData,
 )( FeaturedImage );