woocommerce/plugins/woocommerce-admin/client/analytics/components/report-table/index.js

/** @format */
/**
 * External dependencies
 */
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { get, orderBy } from 'lodash';
import PropTypes from 'prop-types';

/**
 * WooCommerce dependencies
 */
import { TableCard } from '@woocommerce/components';
import { onQueryChange } from '@woocommerce/navigation';

/**
 * Internal dependencies
 */
import ReportError from 'analytics/components/report-error';
import { getReportChartData, getReportTableData } from 'store/reports/utils';

class ReportTable extends Component {
	render() {
		const {
			getHeadersContent,
			getRowsContent,
			getSummary,
			itemIdField,
			primaryData,
			tableData,
			// These two props are not used in the render function, but are destructured
			// so they are not included in the `tableProps` variable.
			endpoint,
			tableQuery,
			...tableProps
		} = this.props;

		const { items, query } = tableData;

		const isError = tableData.isError || primaryData.isError;

		if ( isError ) {
			return <ReportError isError />;
		}

		const isRequesting = tableData.isRequesting || primaryData.isRequesting;

		const headers = getHeadersContent();
		const orderedItems = orderBy( items.data, query.orderby, query.order );
		const ids = itemIdField ? orderedItems.map( item => item[ itemIdField ] ) : null;
		const rows = getRowsContent( orderedItems );
		const totals = get( primaryData, [ 'data', 'totals' ], null );
		const totalCount = items.totalCount || 0;
		const summary = getSummary ? getSummary( totals, totalCount ) : null;

		return (
			<TableCard
				downloadable
				headers={ headers }
				ids={ ids }
				isLoading={ isRequesting }
				onQueryChange={ onQueryChange }
				rows={ rows }
				rowsPerPage={ parseInt( query.per_page ) }
				summary={ summary }
				totalRows={ totalCount }
				{ ...tableProps }
			/>
		);
	}
}

ReportTable.propTypes = {
	/**
	 * The endpoint to use in API calls.
	 */
	endpoint: PropTypes.string,
	/**
	 * A function that returns the headers object to build the table.
	 */
	getHeadersContent: PropTypes.func.isRequired,
	/**
	 * A function that returns the rows array to build the table.
	 */
	getRowsContent: PropTypes.func.isRequired,
	/**
	 * A function that returns the summary object to build the table.
	 */
	getSummary: PropTypes.func,
	/**
	 * The name of the property in the item object which contains the id.
	 */
	itemIdField: PropTypes.string,
	/**
	 * Primary data of that report.
	 */
	primaryData: PropTypes.object.isRequired,
	/**
	 * Table data of that report.
	 */
	tableData: PropTypes.object.isRequired,
	/**
	 * Properties to be added to the query sent to the report table endpoint.
	 */
	tableQuery: PropTypes.object,
	/**
	 * String to display as the title of the table.
	 */
	title: PropTypes.string.isRequired,
};

ReportTable.defaultProps = {
	tableData: null,
	tableQuery: {},
};

export default compose(
	withSelect( ( select, props ) => {
		const { endpoint, getSummary, query, tableData, tableQuery } = props;
		const chartEndpoint = 'variations' === endpoint ? 'products' : endpoint;
		const primaryData = getSummary
			? getReportChartData( chartEndpoint, 'primary', query, select )
			: {};
		const queriedTableData = tableData || getReportTableData( endpoint, query, select, tableQuery );

		return {
			primaryData,
			tableData: queriedTableData,
		};
	} )
)( ReportTable );