Fetch class counts using Parse Query

Author: drew-gross

dashboard/Data/Browser/Browser.react.js

@@ -61,7 +61,8 @@ export default class Browser extends DashboardView {
   }
 
   componentWillMount() {
-    this.props.schema.dispatch(ActionTypes.FETCH);
+    this.props.schema.dispatch(ActionTypes.FETCH)
+    .then(() => this.fetchCollectionCounts());
     if (!this.props.params.className && this.props.schema.data.get('classes')) {
       this.redirectToFirstClass(this.props.schema.data.get('classes'));
     } else if (this.props.params.className) {
@@ -83,7 +84,8 @@ export default class Browser extends DashboardView {
 
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
-      nextProps.schema.dispatch(ActionTypes.FETCH);
+      nextProps.schema.dispatch(ActionTypes.FETCH)
+      .then(() => this.fetchCollectionCounts());
       let changes = {
         filters: new List(),
         data: null,
@@ -220,6 +222,13 @@ export default class Browser extends DashboardView {
     });
   }
 
+  fetchCollectionCounts() {
+    this.props.schema.data.get('classes').forEach((_, className) => {
+      this.context.currentApp.getClassCount(className)
+      .then(count => this.setState({ counts: { [className]: count, ...this.state.counts } }));
+    })
+  }
+
   fetchInfo(app) {
     app.getCollectionInfo().then(({ collections }) => {
       let counts = {};

dashboard/Data/Browser/BrowserToolbar.react.js

@@ -5,16 +5,16 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import BrowserFilter from 'components/BrowserFilter/BrowserFilter.react';
-import BrowserMenu   from 'components/BrowserMenu/BrowserMenu.react';
-import Icon          from 'components/Icon/Icon.react';
-import MenuItem      from 'components/BrowserMenu/MenuItem.react';
-import prettyNumber  from 'lib/prettyNumber';
-import React         from 'react';
-import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react'
-import Separator     from 'components/BrowserMenu/Separator.react';
-import Toolbar       from 'components/Toolbar/Toolbar.react';
-import styles        from 'dashboard/Data/Browser/Browser.scss';
+import BrowserFilter  from 'components/BrowserFilter/BrowserFilter.react';
+import BrowserMenu    from 'components/BrowserMenu/BrowserMenu.react';
+import Icon           from 'components/Icon/Icon.react';
+import MenuItem       from 'components/BrowserMenu/MenuItem.react';
+import prettyNumber   from 'lib/prettyNumber';
+import React          from 'react';
+import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react';
+import Separator      from 'components/BrowserMenu/Separator.react';
+import styles         from 'dashboard/Data/Browser/Browser.scss';
+import Toolbar        from 'components/Toolbar/Toolbar.react';
 
 let BrowserToolbar = ({
   className,

lib/ParseApp.js

@@ -73,6 +73,11 @@ export default class ParseApp {
       lastFetched: new Date(0)
     };
 
+    this.classCounts = {
+      counts: {},
+      lastFetched: {},
+    }
+
     this.hasCheckedForMigraton = false;
   }
 
@@ -181,6 +186,22 @@ export default class ParseApp {
     });
   }
 
+  getClassCount(className) {
+    this.setParseKeys();
+    if (this.classCounts.counts[className] !== undefined) {
+      // Cache it for a minute
+      if (new Date() - this.classCounts.lastFetched[className] < 60000) {
+        return Parse.Promise.as(this.classCounts.counts[className]);
+      }
+    }
+    let p = new Parse.Query(className).count({ useMasterKey: true });
+    p.then(count => {
+      this.classCounts.counts[className] = count;
+      this.classCounts.lastFetched[className] = new Date();
+    })
+    return p;
+  }
+
   getAnalyticsRetention(time) {
     time = Math.round(time.getTime() / 1000);
     return AJAX.abortableGet('/apps/' + this.slug + '/analytics_retention?at=' + time);