Move “numbers” widget to a new file

This commit is contained in:
Kelly Dwan 2018-05-03 14:23:17 -04:00
parent 549af77be8
commit 03e53e1a1e
2 changed files with 42 additions and 22 deletions

View File

@ -2,38 +2,23 @@
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { applyFilters } from '@wordpress/hooks';
import { Button, withAPIData } from '@wordpress/components';
import { Component, compose } from '@wordpress/element';
/**
* External dependencies
* Internal dependencies
*/
import './style.scss';
import useFilters from '../use-filters';
import WidgetNumbers from './widgets/numbers';
class Dashboard extends Component {
render() {
const { products } = this.props;
const totalProducts = products.data && products.data.length || 0;
return (
<div>
<h2>{ applyFilters( 'woodash.example2', __( 'Example Widget', 'woo-dash' ) ) }</h2>
<div className="wd_widget">
<div className="wd_widget-item">
{ sprintf( _n( '%d New Customer', '%d New Customers', 4, 'woo-dash' ), 4 ) }
</div>
<div className="wd_widget-item">
{ sprintf( _n( '%d New Order', '%d New Orders', 10, 'woo-dash' ), 10 ) }
</div>
<div className="wd_widget-item">
{ sprintf( _n( '%d Product', '%d Products', totalProducts, 'woo-dash' ), totalProducts ) }
</div>
<div className="wd_widget-item">
<Button isPrimary href="#">{ __( 'View Orders', 'woo-dash' ) }</Button>
</div>
</div>
<WidgetNumbers />
<h3>{ applyFilters( 'woodash.example', __( 'Example Text', 'woo-dash' ) ) }</h3>
</div>
@ -43,7 +28,4 @@ class Dashboard extends Component {
export default compose( [
useFilters( [ 'woodash.example', 'woodash.example2' ] ),
withAPIData( () => ( {
products: '/wc/v2/products',
} ) ),
] )( Dashboard );

View File

@ -0,0 +1,38 @@
/** @format */
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { Button, withAPIData } from '@wordpress/components';
import { Component, compose } from '@wordpress/element';
class WidgetNumbers extends Component {
render() {
const { orders, products } = this.props;
const totalOrders = orders.data && orders.data.length || 0;
const totalProducts = products.data && products.data.length || 0;
return (
<div className="wd_widget">
<div className="wd_widget-item">
{ sprintf( _n( '%d New Customer', '%d New Customers', 4, 'woo-dash' ), 4 ) }
</div>
<div className="wd_widget-item">
{ sprintf( _n( '%d New Order', '%d New Orders', totalOrders, 'woo-dash' ), totalOrders ) }
</div>
<div className="wd_widget-item">
{ sprintf( _n( '%d Product', '%d Products', totalProducts, 'woo-dash' ), totalProducts ) }
</div>
<div className="wd_widget-item">
<Button isPrimary href="#">{ __( 'View Orders', 'woo-dash' ) }</Button>
</div>
</div>
);
}
}
export default compose( [
withAPIData( () => ( {
orders: '/wc/v2/orders?status=processing',
products: '/wc/v2/products',
} ) ),
] )( WidgetNumbers );