Make React frontend capable of reading API results under a results key (

#4159) * Make React frontend capable of reading API results under a results key * remove redundant double negation * Update assets/js/dashboard/stats/modals/props.js add length key back Co-authored-by: Adrian Gruntkowski <[email protected]> --------- Co-authored-by: Adrian Gruntkowski <[email protected]>
plausible · May 31, 2024 · 57e28f0 · 57e28f0
1 parent dc7243f
commit 57e28f0
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) }