Auto merge of #2429 - Turbo87:dashboard, r=locks

dashboard: Cleanup data loading code

Best reviewed commit-by-commit :)

r? @locks

Author: bors

app/controllers/dashboard.js

@@ -1,6 +1,9 @@
 import { A } from '@ember/array';
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+import { task } from 'ember-concurrency';
 
 import ajax from '../utils/ajax';
 
@@ -10,14 +13,14 @@ export default Controller.extend({
   init() {
     this._super(...arguments);
 
-    this.loadingMore = false;
     this.hasMore = false;
-    this.myCrates = A();
-    this.myFollowing = A();
     this.myFeed = A();
-    this.myStats = 0;
   },
 
+  myCrates: alias('model.myCrates'),
+  myFollowing: alias('model.myFollowing'),
+  myStats: alias('model.myStats'),
+
   visibleCrates: computed('myCrates.[]', function () {
     return this.myCrates.slice(0, TO_SHOW);
   }),
@@ -34,20 +37,13 @@ export default Controller.extend({
     return this.get('myFollowing.length') > TO_SHOW;
   }),
 
-  actions: {
-    async loadMore() {
-      this.set('loadingMore', true);
-      let page = this.myFeed.length / 10 + 1;
-
-      try {
-        let data = await ajax(`/api/v1/me/updates?page=${page}`);
-        let versions = data.versions.map(version => this.store.push(this.store.normalize('version', version)));
-
-        this.myFeed.pushObjects(versions);
-        this.set('hasMore', data.meta.more);
-      } finally {
-        this.set('loadingMore', false);
-      }
-    },
-  },
+  loadMoreTask: task(function* () {
+    let page = this.myFeed.length / 10 + 1;
+
+    let data = yield ajax(`/api/v1/me/updates?page=${page}`);
+    let versions = data.versions.map(version => this.store.push(this.store.normalize('version', version)));
+
+    this.myFeed.pushObjects(versions);
+    this.set('hasMore', data.meta.more);
+  }),
 });

app/routes/dashboard.js

@@ -5,34 +5,22 @@ import RSVP from 'rsvp';
 import AuthenticatedRoute from '../mixins/authenticated-route';
 
 export default Route.extend(AuthenticatedRoute, {
-  setupController(controller) {
-    this._super(...arguments);
+  async model() {
+    let user = this.session.currentUser;
 
-    controller.set('myCrates', this.get('data.myCrates'));
-    controller.set('myFollowing', this.get('data.myFollowing'));
-    controller.set('myStats', this.get('data.myStats'));
-
-    if (!controller.loadingMore) {
-      controller.set('myFeed', A());
-      controller.send('loadMore');
-    }
-  },
+    let myCrates = this.store.query('crate', { user_id: user.get('id') });
+    let myFollowing = this.store.query('crate', { following: 1 });
+    let myStats = user.stats();
 
-  model() {
-    return this.get('session.currentUser');
+    return await RSVP.hash({ myCrates, myFollowing, myStats });
   },
 
-  async afterModel(user) {
-    let myCrates = this.store.query('crate', {
-      user_id: user.get('id'),
-    });
-
-    let myFollowing = this.store.query('crate', {
-      following: 1,
-    });
-
-    let myStats = user.stats();
+  setupController(controller) {
+    this._super(...arguments);
 
-    this.set('data', await RSVP.hash({ myCrates, myFollowing, myStats }));
+    if (!controller.isRunning) {
+      controller.set('myFeed', A());
+      controller.loadMoreTask.perform();
+    }
   },
 });

app/styles/dashboard.module.css

@@ -122,6 +122,7 @@
 }
 
 .load-more {
+    display: block;
     text-align: center;
     width: 100%;
     padding: 10px;

app/templates/dashboard.hbs

@@ -60,13 +60,13 @@
         {{/each}}
       </ul>
 
-      {{#if this.loadingMore}}
+      {{#if this.loadMoreTask.isRunning}}
         <span local-class='load-more'>
           <img src="/assets/ajax-loader.gif">
         </span>
       {{else}}
         {{#if this.hasMore}}
-          <button type="button" local-class='load-more' {{ action 'loadMore' }}>
+          <button type="button" local-class='load-more' {{on "click" (perform this.loadMoreTask)}}>
             Load More
           </button>
         {{/if}}