diff --git a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js index 2bb543609d0..033b17fad69 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js +++ b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js @@ -29,7 +29,6 @@ class ReportTable extends Component { itemIdField, primaryData, tableData, - totalsCountField, // These two props are not used in the render function, but are destructured // so they are not included in the `tableProps` variable. endpoint, @@ -48,12 +47,11 @@ class ReportTable extends Component { const isRequesting = tableData.isRequesting || primaryData.isRequesting; const headers = getHeadersContent(); - const orderedItems = orderBy( items, query.orderby, query.order ); + const orderedItems = orderBy( items.data, query.orderby, query.order ); const ids = orderedItems.map( item => item[ itemIdField ] ); const rows = getRowsContent( orderedItems ); const totals = get( primaryData, [ 'data', 'totals' ], null ); - const summary = getSummary( totals ); - const totalRows = get( totals, [ totalsCountField ], items.length ); + const summary = getSummary ? getSummary( totals ) : null; return ( ); @@ -109,25 +107,16 @@ ReportTable.propTypes = { * String to display as the title of the table. */ title: PropTypes.string.isRequired, - /** - * Name of the property in the primary data totals object which contains the - * total number of items. - */ - totalsCountField: PropTypes.string, }; ReportTable.defaultProps = { - getSummary: () => null, tableQuery: {}, - totalsCountField: '', }; export default compose( withSelect( ( select, props ) => { - const { endpoint, query, tableQuery } = props; - // @TODO allow loading the primary data for the variations table once #926 is fixed. - const primaryData = - endpoint === 'variations' ? {} : getReportChartData( endpoint, 'primary', query, select ); + const { endpoint, getSummary, query, tableQuery } = props; + const primaryData = getSummary ? getReportChartData( endpoint, 'primary', query, select ) : {}; const tableData = getReportTableData( endpoint, query, select, tableQuery ); return { diff --git a/plugins/woocommerce-admin/client/analytics/report/categories/table.js b/plugins/woocommerce-admin/client/analytics/report/categories/table.js index 91421dd69f3..9eab5a1303c 100644 --- a/plugins/woocommerce-admin/client/analytics/report/categories/table.js +++ b/plugins/woocommerce-admin/client/analytics/report/categories/table.js @@ -133,7 +133,6 @@ export default class CategoriesReportTable extends Component { getSummary={ this.getSummary } itemIdField="category_id" query={ query } - totalsCountField="categories_count" title={ __( 'Categories', 'wc-admin' ) } /> ); diff --git a/plugins/woocommerce-admin/client/analytics/report/coupons/table.js b/plugins/woocommerce-admin/client/analytics/report/coupons/table.js index 3b4afad0d61..6af281cb9b1 100644 --- a/plugins/woocommerce-admin/client/analytics/report/coupons/table.js +++ b/plugins/woocommerce-admin/client/analytics/report/coupons/table.js @@ -160,7 +160,6 @@ export default class CouponsReportTable extends Component { getSummary={ this.getSummary } itemIdField="coupon_id" query={ query } - totalsCountField="coupons_count" title={ __( 'Coupons', 'wc-admin' ) } /> ); diff --git a/plugins/woocommerce-admin/client/analytics/report/products/table.js b/plugins/woocommerce-admin/client/analytics/report/products/table.js index c70a049b036..a7099a21d00 100644 --- a/plugins/woocommerce-admin/client/analytics/report/products/table.js +++ b/plugins/woocommerce-admin/client/analytics/report/products/table.js @@ -210,7 +210,6 @@ export default class ProductsReportTable extends Component { order: query.order || 'desc', extended_product_info: true, } } - totalsCountField="products_count" title={ __( 'Products', 'wc-admin' ) } /> ); diff --git a/plugins/woocommerce-admin/client/analytics/report/taxes/table.js b/plugins/woocommerce-admin/client/analytics/report/taxes/table.js index 536455e636e..a20cba87e4b 100644 --- a/plugins/woocommerce-admin/client/analytics/report/taxes/table.js +++ b/plugins/woocommerce-admin/client/analytics/report/taxes/table.js @@ -153,7 +153,6 @@ export default class TaxesReportTable extends Component { getSummary={ this.getSummary } itemIdField="tax_rate_id" query={ query } - totalsCountField="taxes_count" title={ __( 'Taxes', 'wc-admin' ) } /> ); diff --git a/plugins/woocommerce-admin/client/store/reports/items/actions.js b/plugins/woocommerce-admin/client/store/reports/items/actions.js index 82528a5a251..579290e4203 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/actions.js +++ b/plugins/woocommerce-admin/client/store/reports/items/actions.js @@ -1,12 +1,13 @@ /** @format */ export default { - setReportItems( endpoint, items, query ) { + setReportItems( endpoint, query, data, totalCount ) { return { type: 'SET_REPORT_ITEMS', endpoint, - items, query: query || {}, + data, + totalCount, }; }, setReportItemsError( endpoint, query ) { diff --git a/plugins/woocommerce-admin/client/store/reports/items/reducer.js b/plugins/woocommerce-admin/client/store/reports/items/reducer.js index 9156fac664a..ac75b509c1f 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/reducer.js +++ b/plugins/woocommerce-admin/client/store/reports/items/reducer.js @@ -20,7 +20,10 @@ export default function reportItemsReducer( state = DEFAULT_STATE, action ) { case 'SET_REPORT_ITEMS': return merge( {}, state, { [ action.endpoint ]: { - [ queryKey ]: action.items, + [ queryKey ]: { + data: action.data, + totalCount: action.totalCount, + }, }, } ); diff --git a/plugins/woocommerce-admin/client/store/reports/items/resolvers.js b/plugins/woocommerce-admin/client/store/reports/items/resolvers.js index b1a1719b7d0..dcf1abe3aaa 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/resolvers.js +++ b/plugins/woocommerce-admin/client/store/reports/items/resolvers.js @@ -26,9 +26,9 @@ export default { const response = await fetch( SWAGGERNAMESPACE + 'reports/' + endpoint + stringifyQuery( query ) ); - const items = await response.json(); + const itemsData = await response.json(); - dispatch( 'wc-admin' ).setReportItems( endpoint, items, query ); + dispatch( 'wc-admin' ).setReportItems( endpoint, query, itemsData ); } catch ( error ) { dispatch( 'wc-admin' ).setReportItemsError( endpoint, query ); } @@ -37,11 +37,14 @@ export default { } try { - const items = await apiFetch( { + const response = await apiFetch( { + parse: false, path: NAMESPACE + 'reports/' + endpoint + stringifyQuery( query ), } ); - dispatch( 'wc-admin' ).setReportItems( endpoint, items, query ); + const itemsData = await response.json(); + const totalCount = parseInt( response.headers.get( 'x-wp-total' ) ); + dispatch( 'wc-admin' ).setReportItems( endpoint, query, itemsData, totalCount ); } catch ( error ) { dispatch( 'wc-admin' ).setReportItemsError( endpoint, query ); } diff --git a/plugins/woocommerce-admin/client/store/reports/items/selectors.js b/plugins/woocommerce-admin/client/store/reports/items/selectors.js index bd5023f9fe7..cb4fd0e64d5 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/selectors.js +++ b/plugins/woocommerce-admin/client/store/reports/items/selectors.js @@ -21,7 +21,7 @@ import { getJsonString } from 'store/utils'; * @return {Object} Report details */ function getReportItems( state, endpoint, query = {} ) { - return get( state, [ 'reports', 'items', endpoint, getJsonString( query ) ], [] ); + return get( state, [ 'reports', 'items', endpoint, getJsonString( query ) ], { data: [] } ); } export default { diff --git a/plugins/woocommerce-admin/client/store/reports/items/test/reducer.js b/plugins/woocommerce-admin/client/store/reports/items/test/reducer.js index a0dc91763eb..d743b2cf77c 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/test/reducer.js +++ b/plugins/woocommerce-admin/client/store/reports/items/test/reducer.js @@ -27,17 +27,22 @@ describe( 'reportItemsReducer()', () => { const query = { orderby: 'orders_count', }; - const items = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const itemsData = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const itemsTotalCount = 50; const state = reportItemsReducer( originalState, { type: 'SET_REPORT_ITEMS', endpoint, query, - items, + data: itemsData, + totalCount: itemsTotalCount, } ); const queryKey = getJsonString( query ); - expect( state[ endpoint ][ queryKey ] ).toEqual( items ); + expect( state[ endpoint ][ queryKey ] ).toEqual( { + data: itemsData, + totalCount: itemsTotalCount, + } ); } ); it( 'tracks multiple queries in items data', () => { @@ -45,28 +50,40 @@ describe( 'reportItemsReducer()', () => { orderby: 'id', }; const otherQueryKey = getJsonString( otherQuery ); - const otherItems = [ { id: 1 }, { id: 2 }, { id: 3 } ]; + const otherItemsData = [ { id: 1 }, { id: 2 }, { id: 3 } ]; + const otherItemsTotalCount = 70; const otherQueryState = { [ endpoint ]: { - [ otherQueryKey ]: otherItems, + [ otherQueryKey ]: { + data: otherItemsData, + totalCount: otherItemsTotalCount, + }, }, }; const originalState = deepFreeze( otherQueryState ); const query = { orderby: 'orders_count', }; - const items = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const itemsData = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const itemsTotalCount = 50; const state = reportItemsReducer( originalState, { type: 'SET_REPORT_ITEMS', endpoint, query, - items, + data: itemsData, + totalCount: itemsTotalCount, } ); const queryKey = getJsonString( query ); - expect( state[ endpoint ][ queryKey ] ).toEqual( items ); - expect( state[ endpoint ][ otherQueryKey ] ).toEqual( otherItems ); + expect( state[ endpoint ][ queryKey ] ).toEqual( { + data: itemsData, + totalCount: itemsTotalCount, + } ); + expect( state[ endpoint ][ otherQueryKey ] ).toEqual( { + data: otherItemsData, + totalCount: otherItemsTotalCount, + } ); } ); it( 'returns with received error data', () => { diff --git a/plugins/woocommerce-admin/client/store/reports/items/test/resolvers.js b/plugins/woocommerce-admin/client/store/reports/items/test/resolvers.js index b7cd5b9dd1b..af96d505aca 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/test/resolvers.js +++ b/plugins/woocommerce-admin/client/store/reports/items/test/resolvers.js @@ -24,16 +24,28 @@ jest.mock( '@wordpress/api-fetch', () => jest.fn() ); describe( 'getReportItems', () => { const ITEMS_1 = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const ITEMS_1_COUNT = 50; const ITEMS_2 = [ { id: 1 }, { id: 2 }, { id: 3 } ]; + const ITEMS_2_COUNT = 75; const endpoint = 'products'; beforeAll( () => { apiFetch.mockImplementation( options => { if ( options.path === `/wc/v3/reports/${ endpoint }` ) { - return Promise.resolve( ITEMS_1 ); + return Promise.resolve( { + headers: { + get: () => ITEMS_1_COUNT, + }, + json: () => Promise.resolve( ITEMS_1 ), + } ); } if ( options.path === `/wc/v3/reports/${ endpoint }?orderby=id` ) { - return Promise.resolve( ITEMS_2 ); + return Promise.resolve( { + headers: { + get: () => ITEMS_2_COUNT, + }, + json: () => Promise.resolve( ITEMS_2 ), + } ); } } ); } ); @@ -41,12 +53,22 @@ describe( 'getReportItems', () => { it( 'returns requested report data', async () => { expect.assertions( 1 ); await getReportItems( endpoint ); - expect( dispatch().setReportItems ).toHaveBeenCalledWith( endpoint, ITEMS_1, undefined ); + expect( dispatch().setReportItems ).toHaveBeenCalledWith( + endpoint, + undefined, + ITEMS_1, + ITEMS_1_COUNT + ); } ); it( 'returns requested report data for a specific query', async () => { expect.assertions( 1 ); await getReportItems( endpoint, { orderby: 'id' } ); - expect( dispatch().setReportItems ).toHaveBeenCalledWith( endpoint, ITEMS_2, { orderby: 'id' } ); + expect( dispatch().setReportItems ).toHaveBeenCalledWith( + endpoint, + { orderby: 'id' }, + ITEMS_2, + ITEMS_2_COUNT + ); } ); } ); diff --git a/plugins/woocommerce-admin/client/store/reports/items/test/selectors.js b/plugins/woocommerce-admin/client/store/reports/items/test/selectors.js index d73d85b40ad..504217506cb 100644 --- a/plugins/woocommerce-admin/client/store/reports/items/test/selectors.js +++ b/plugins/woocommerce-admin/client/store/reports/items/test/selectors.js @@ -26,23 +26,28 @@ const queryKey = getJsonString( query ); const endpoint = 'coupons'; describe( 'getReportItems()', () => { - it( 'returns an empty array when no items are available', () => { + it( 'returns an empty object when no items are available', () => { const state = deepFreeze( {} ); - expect( getReportItems( state, endpoint, query ) ).toEqual( [] ); + expect( getReportItems( state, endpoint, query ) ).toEqual( { data: [] } ); } ); it( 'returns stored items for current query', () => { - const items = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const itemsData = [ { id: 1214 }, { id: 1215 }, { id: 1216 } ]; + const itemsTotalCount = 50; + const queryState = { + data: itemsData, + totalCount: itemsTotalCount, + }; const state = deepFreeze( { reports: { items: { [ endpoint ]: { - [ queryKey ]: items, + [ queryKey ]: queryState, }, }, }, } ); - expect( getReportItems( state, endpoint, query ) ).toEqual( items ); + expect( getReportItems( state, endpoint, query ) ).toEqual( queryState ); } ); } );