From a48a038f25d83f7189af3d8dc749d14cf0c566a5 Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Wed, 27 Mar 2019 10:43:31 -0600
Subject: [PATCH] Create ProductStockCard component, add loading placeholder to
 stock panel.

---
 .../activity-panel/panels/stock/card.js       | 43 ++++++++++++++++
 .../activity-panel/panels/stock/index.js      | 51 +++++++++----------
 2 files changed, 67 insertions(+), 27 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js

diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js
new file mode 100644
index 00000000000..869be9283a2
--- /dev/null
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js
@@ -0,0 +1,43 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Link, ProductImage } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import { ActivityCard } from '../../activity-card';
+
+class ProductStockCard extends Component {
+	render() {
+		const { product } = this.props;
+		const title = (
+			<Link href={ 'post.php?action=edit&post=' + product.id } type="wp-admin">
+				{ product.name }
+			</Link>
+		);
+
+		return (
+			<ActivityCard
+				className="woocommerce-stock-activity-card"
+				title={ title }
+				icon={ <ProductImage product={ product } /> }
+				actions={ <Button isDefault>{ __( 'Update stock', 'woocommerce-admin' ) }</Button> }
+			>
+				<span className="woocommerce-stock-activity-card__stock-quantity">
+					{ sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) }
+				</span>
+			</ActivityCard>
+		);
+	}
+}
+
+export default ProductStockCard;
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
index a293944cafd..162fcff960a 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
@@ -2,52 +2,49 @@
 /**
  * External dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 
 /**
  * WooCommerce dependencies
  */
-import { Link, ProductImage, Section } from '@woocommerce/components';
+import { Section } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
-import { ActivityCard } from '../../activity-card';
+import { ActivityCardPlaceholder } from '../../activity-card';
 import ActivityHeader from '../../activity-header';
+import ProductStockCard from './card';
 
 class StockPanel extends Component {
 	render() {
-		const product = {
-			id: 913,
-			name: 'Octopus Tshirt',
-			permalink: '',
-			image: {
-				src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
+		const products = [
+			{
+				id: 913,
+				name: 'Octopus Tshirt',
+				permalink: '',
+				image: {
+					src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
+				},
+				stock_quantity: 2,
 			},
-			stock_quantity: 2,
-		};
-		const title = (
-			<Link href={ 'post.php?action=edit&post=' + product.id } type="wp-admin">
-				{ product.name }
-			</Link>
-		);
+		];
+		const isRequesting = false;
 
 		return (
 			<Fragment>
 				<ActivityHeader title={ __( 'Stock', 'woocommerce-admin' ) } />
 				<Section>
-					<ActivityCard
-						className="woocommerce-stock-activity-card"
-						title={ title }
-						icon={ <ProductImage product={ product } /> }
-						actions={ <Button isDefault>{ __( 'Update stock', 'woocommerce-admin' ) }</Button> }
-					>
-						<span className="woocommerce-stock-activity-card__stock-quantity">
-							{ sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) }
-						</span>
-					</ActivityCard>
+					{ isRequesting ? (
+						<ActivityCardPlaceholder
+							className="woocommerce-stock-activity-card"
+							hasAction
+							lines={ 1 }
+						/>
+					) : (
+						products.map( product => <ProductStockCard key={ product.id } product={ product } /> )
+					) }
 				</Section>
 			</Fragment>
 		);