diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js index fb17203bf7ca..60fad2d0e888 100644 --- a/assets/js/dashboard/stats/locations/index.js +++ b/assets/js/dashboard/stats/locations/index.js @@ -11,9 +11,7 @@ import { getFiltersByKeyPrefix } from '../../util/filters'; function Countries({query, site, onClick}) { function fetchData() { - return api.get(apiPath(site, '/countries'), query, {limit: 9}).then((res) => { - return res.map(row => Object.assign({}, row, {percentage: undefined})) - }) + return api.get(apiPath(site, '/countries'), query, { limit: 9 }) } function renderIcon(country) { diff --git a/assets/js/dashboard/stats/locations/map.js b/assets/js/dashboard/stats/locations/map.js index f96ebb4ef4d1..fbc29b0f3433 100644 --- a/assets/js/dashboard/stats/locations/map.js +++ b/assets/js/dashboard/stats/locations/map.js @@ -75,7 +75,10 @@ class Countries extends React.Component { fetchCountries() { return api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/countries`, this.props.query, {limit: 300}) - .then((res) => this.setState({loading: false, countries: res})) + .then((response) => { + const results = response.results ? response.results : response + this.setState({loading: false, countries: results}) + }) } resizeMap() { diff --git a/assets/js/dashboard/stats/modals/conversions.js b/assets/js/dashboard/stats/modals/conversions.js index 4e69f987f332..eb49612dcfe6 100644 --- a/assets/js/dashboard/stats/modals/conversions.js +++ b/assets/js/dashboard/stats/modals/conversions.js @@ -36,11 +36,12 @@ function ConversionsModal(props) { function fetchData() { api.get(url.apiPath(site, `/conversions`), query, { limit: 100, page }) - .then((res) => { + .then((response) => { + const results = response.results ? response.results : response setLoading(false) - setList(list.concat(res)) + setList(list.concat(results)) setPage(page + 1) - setMoreResultsAvailable(res.length >= 100) + setMoreResultsAvailable(results.length >= 100) }) } diff --git a/assets/js/dashboard/stats/modals/entry-pages.js b/assets/js/dashboard/stats/modals/entry-pages.js index baa8ff0763bb..f94ccdd91980 100644 --- a/assets/js/dashboard/stats/modals/entry-pages.js +++ b/assets/js/dashboard/stats/modals/entry-pages.js @@ -33,13 +33,15 @@ class EntryPagesModal extends React.Component { query, { limit: 100, page } ) - .then( - (res) => this.setState((state) => ({ + .then((response) => { + const results = response.results ? response.results : response + + this.setState((state) => ({ loading: false, - pages: state.pages.concat(res), - moreResultsAvailable: res.length === 100 + pages: state.pages.concat(results), + moreResultsAvailable: results.length === 100 })) - ) + }) } loadMore() { diff --git a/assets/js/dashboard/stats/modals/exit-pages.js b/assets/js/dashboard/stats/modals/exit-pages.js index ecb464232225..e64bd7ebb0ee 100644 --- a/assets/js/dashboard/stats/modals/exit-pages.js +++ b/assets/js/dashboard/stats/modals/exit-pages.js @@ -28,7 +28,10 @@ class ExitPagesModal extends React.Component { const { query, page } = this.state; api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/exit-pages`, query, { limit: 100, page }) - .then((res) => this.setState((state) => ({ loading: false, pages: state.pages.concat(res), moreResultsAvailable: res.length === 100 }))) + .then((response) => { + const results = response.results ? response.results : response + this.setState((state) => ({ loading: false, pages: state.pages.concat(results), moreResultsAvailable: results.length === 100 })) + }) } loadMore() { diff --git a/assets/js/dashboard/stats/modals/pages.js b/assets/js/dashboard/stats/modals/pages.js index 7150dc52d128..cad2805d4b56 100644 --- a/assets/js/dashboard/stats/modals/pages.js +++ b/assets/js/dashboard/stats/modals/pages.js @@ -30,7 +30,10 @@ class PagesModal extends React.Component { const { query, page } = this.state; api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/pages`, query, { limit: 100, page, detailed }) - .then((res) => this.setState((state) => ({ loading: false, pages: state.pages.concat(res), moreResultsAvailable: res.length === 100 }))) + .then((response) => { + const results = response.results ? response.results : response + this.setState((state) => ({ loading: false, pages: state.pages.concat(results), moreResultsAvailable: results.length === 100 })) + }) } loadMore() { diff --git a/assets/js/dashboard/stats/modals/props.js b/assets/js/dashboard/stats/modals/props.js index fd30764ae95a..23876c333936 100644 --- a/assets/js/dashboard/stats/modals/props.js +++ b/assets/js/dashboard/stats/modals/props.js @@ -38,11 +38,13 @@ function PropsModal(props) { function fetchData() { api.get(url.apiPath(site, `/custom-prop-values/${propKey}`), query, { limit: 100, page }) - .then((res) => { + .then((response) => { + const results = response.results ? response.results : response + setLoading(false) - setList(list.concat(res)) + setList(list.concat(results)) setPage(page + 1) - setMoreResultsAvailable(res.length >= 100) + setMoreResultsAvailable(results.length >= 100) }) } diff --git a/assets/js/dashboard/stats/modals/referrer-drilldown.js b/assets/js/dashboard/stats/modals/referrer-drilldown.js index 0e42cb07a4ad..a4045c233d28 100644 --- a/assets/js/dashboard/stats/modals/referrer-drilldown.js +++ b/assets/js/dashboard/stats/modals/referrer-drilldown.js @@ -21,7 +21,10 @@ class ReferrerDrilldownModal extends React.Component { const detailed = this.showExtra() api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/referrers/${this.props.match.params.referrer}`, this.state.query, {limit: 100, detailed}) - .then((referrers) => this.setState({loading: false, referrers: referrers})) + .then((response) => { + const results = response.results ? response.results : response + this.setState({loading: false, referrers: results}) + }) } showExtra() { diff --git a/assets/js/dashboard/stats/modals/sources.js b/assets/js/dashboard/stats/modals/sources.js index c6f7829e0339..55b9448d779e 100644 --- a/assets/js/dashboard/stats/modals/sources.js +++ b/assets/js/dashboard/stats/modals/sources.js @@ -35,7 +35,10 @@ class SourcesModal extends React.Component { const detailed = this.showExtra() api.get(`/api/stats/${encodeURIComponent(site.domain)}/${this.currentView()}`, query, { limit: 100, page, detailed }) - .then((res) => this.setState({ loading: false, sources: sources.concat(res), moreResultsAvailable: res.length === 100 })) + .then((response) => { + const results = response.results ? response.results : response + this.setState({ loading: false, sources: sources.concat(results), moreResultsAvailable: results.length === 100 }) + }) } componentDidMount() { diff --git a/assets/js/dashboard/stats/modals/table.js b/assets/js/dashboard/stats/modals/table.js index 5058185ccd0b..db02943cf6c2 100644 --- a/assets/js/dashboard/stats/modals/table.js +++ b/assets/js/dashboard/stats/modals/table.js @@ -19,7 +19,10 @@ class ModalTable extends React.Component { componentDidMount() { api.get(this.props.endpoint, this.state.query, {limit: 100}) - .then((res) => this.setState({loading: false, list: res})) + .then((response) => { + const results = response.results ? response.results : response + this.setState({loading: false, list: results}) + }) } showConversionRate() { diff --git a/assets/js/dashboard/stats/reports/list.js b/assets/js/dashboard/stats/reports/list.js index da509226f657..c81ae9a0fde7 100644 --- a/assets/js/dashboard/stats/reports/list.js +++ b/assets/js/dashboard/stats/reports/list.js @@ -58,10 +58,11 @@ function ExternalLink({ item, externalLinkDest }) { // The main function component for rendering list reports and making them react to what // is happening on the dashboard. -// A `fetchData` function must be passed through props. This function defines the format -// of the data, which is expected to be a list of objects. Think of these objects as rows -// with keys being columns. The number of columns is dynamic and should be configured -// via the `metrics` input list. For example: +// A `fetchData` function must be passed through props. This function defines the data +// to be rendered, and should return a list of objects under a `results` key. Think of +// these objects as rows. The number of columns that are **actually rendered** is also +// configurable through the `metrics` prop, which also defines the keys under which +// column values are read. For example: // | keyLabel | METRIC_1.label | METRIC_2.label | ... // |--------------------|---------------------------|---------------------------|----- @@ -76,8 +77,8 @@ function ExternalLink({ item, externalLinkDest }) { // * `query` - The query object representing the current state of the dashboard. -// * `fetchData` - a function that returns an `api.get` promise that will resolve to the -// list of data. +// * `fetchData` - a function that returns an `api.get` promise that will resolve to an +// object containing a `results` key. // * `metrics` - a list of `metric` objects. Each `metric` object is required to have at // least the `name` and the `label` keys. If the metric should have a different label @@ -123,7 +124,10 @@ export default function ListReport(props) { setState({ loading: true, list: null }) } props.fetchData() - .then((res) => setState({ loading: false, list: res })) + .then((response) => { + const results = response.results ? response.results : response + setState({ loading: false, list: results }) + }) }, [props.keyLabel, props.query]) const onVisible = () => { setVisible(true) }