FEATURE: new 'categories_and_latest' endpoint

app/assets/javascripts/discourse/models/topic-list.js.es6

@@ -2,27 +2,6 @@ import { ajax } from 'discourse/lib/ajax';
 import RestModel from 'discourse/models/rest';
 import Model from 'discourse/models/model';
 
-function topicsFrom(result, store) {
-  if (!result) { return; }
-
-  // Stitch together our side loaded data
-  const categories = Discourse.Category.list(),
-        users = Model.extractByKey(result.users, Discourse.User);
-
-  return result.topic_list.topics.map(function (t) {
-    t.category = categories.findBy('id', t.category_id);
-    t.posters.forEach(function(p) {
-      p.user = users[p.user_id];
-    });
-    if (t.participants) {
-      t.participants.forEach(function(p) {
-        p.user = users[p.user_id];
-      });
-    }
-    return store.createRecord('topic', t);
-  });
-}
-
 const TopicList = RestModel.extend({
   canLoadMore: Em.computed.notEmpty("more_topics_url"),
 
@@ -66,8 +45,8 @@ const TopicList = RestModel.extend({
 
         if (result) {
           // the new topics loaded from the server
-          const newTopics = topicsFrom(result, store),
-              topics = self.get("topics");
+          const newTopics = TopicList.topicsFrom(store, result);
+          const topics = self.get("topics");
 
           self.forEachNew(newTopics, function(t) {
             t.set('highlight', topicsAdded++ === 0);
@@ -103,7 +82,7 @@ const TopicList = RestModel.extend({
 
     return ajax({ url }).then(result => {
       let i = 0;
-      topicList.forEachNew(topicsFrom(result, store), function(t) {
+      topicList.forEachNew(TopicList.topicsFrom(store, result), function(t) {
         // highlight the first of the new topics so we can get a visual feedback
         t.set('highlight', true);
         topics.insertAt(i,t);
@@ -115,6 +94,26 @@ const TopicList = RestModel.extend({
 });
 
 TopicList.reopenClass({
+  topicsFrom(store, result) {
+    if (!result) { return; }
+
+    // Stitch together our side loaded data
+    const categories = Discourse.Category.list(),
+          users = Model.extractByKey(result.users, Discourse.User);
+
+    return result.topic_list.topics.map(function (t) {
+      t.category = categories.findBy('id', t.category_id);
+      t.posters.forEach(function(p) {
+        p.user = users[p.user_id];
+      });
+      if (t.participants) {
+        t.participants.forEach(function(p) {
+          p.user = users[p.user_id];
+        });
+      }
+      return store.createRecord('topic', t);
+    });
+  },
 
   munge(json, store) {
     json.inserted = json.inserted || [];
@@ -126,7 +125,7 @@ TopicList.reopenClass({
     json.for_period = json.topic_list.for_period;
     json.loaded = true;
     json.per_page = json.topic_list.per_page;
-    json.topics = topicsFrom(json, store);
+    json.topics = this.topicsFrom(store, json);
 
     return json;
   },

app/assets/javascripts/discourse/routes/discovery-categories.js.es6

@@ -3,6 +3,8 @@ import OpenComposer from "discourse/mixins/open-composer";
 import CategoryList from "discourse/models/category-list";
 import { defaultHomepage } from 'discourse/lib/utilities';
 import TopicList from "discourse/models/topic-list";
+import { ajax } from "discourse/lib/ajax";
+import PreloadStore from "preload-store";
 
 const DiscoveryCategoriesRoute = Discourse.Route.extend(OpenComposer, {
   renderTemplate() {
@@ -15,31 +17,66 @@ const DiscoveryCategoriesRoute = Discourse.Route.extend(OpenComposer, {
   },
 
   model() {
-    return CategoryList.list(this.store, 'categories').then(list => {
+    const style = this.siteSettings.desktop_category_page_style;
+    const parentCategory = this.get("model.parentCategory");
+
+    let promise;
+    if (parentCategory) {
+      promise = CategoryList.listForParent(this.store, parentCategory);
+    } else if (style === "categories_and_latest_topics") {
+      promise = this._loadCategoriesAndLatestTopics();
+    } else {
+      promise = CategoryList.list(this.store);
+    }
+
+    return promise.then(model => {
       const tracking = this.topicTrackingState;
       if (tracking) {
-        tracking.sync(list, "categories");
+        tracking.sync(model, "categories");
         tracking.trackIncoming("categories");
       }
-      return list;
+      return model;
     });
   },
 
+  _loadCategoriesAndLatestTopics() {
+    const categoriesList = PreloadStore.get("categories_list");
+    const topicListLatest = PreloadStore.get("topic_list_latest");
+    if (categoriesList && topicListLatest) {
+      return new Ember.RSVP.Promise(resolve => {
+        const result = Ember.Object.create({
+          categories: CategoryList.categoriesFrom(this.store, categoriesList),
+          topics: TopicList.topicsFrom(this.store, topicListLatest),
+          can_create_category: categoriesList.can_create_category,
+          can_create_topic: categoriesList.can_create_topic,
+          draft_key: categoriesList.draft_key,
+          draft: categoriesList.draft,
+          draft_sequence: categoriesList.draft_sequence
+        });
+
+        resolve(result);
+      });
+    } else {
+      return ajax("/categories_and_latest").then(result => {
+        return Ember.Object.create({
+          categories: CategoryList.categoriesFrom(this.store, result),
+          topics: TopicList.topicsFrom(this.store, result),
+          can_create_category: result.category_list.can_create_category,
+          can_create_topic: result.category_list.can_create_topic,
+          draft_key: result.category_list.draft_key,
+          draft: result.category_list.draft,
+          draft_sequence: result.category_list.draft_sequence
+        });
+      });
+    }
+  },
+
   titleToken() {
     if (defaultHomepage() === "categories") { return; }
     return I18n.t("filters.categories.title");
   },
 
   setupController(controller, model) {
-    const style = this.siteSettings.desktop_category_page_style;
-    if (style === "categories_and_latest_topics" && !this.get("model.parentCategory")) {
-      model.set("loadingTopics", true);
-
-      TopicList.find("latest")
-               .then(result => model.set("topicList", result))
-               .finally(() => model.set("loadingTopics", false));
-    }
-
     controller.set("model", model);
 
     this.controllerFor("navigation/categories").setProperties({
@@ -63,12 +100,8 @@ const DiscoveryCategoriesRoute = Discourse.Route.extend(OpenComposer, {
       // Lesson learned: Don't call `loading` yourself.
       controller.set("loading", true);
 
-      const parentCategory = this.get("model.parentCategory");
-      const promise = parentCategory ? CategoryList.listForParent(this.store, parentCategory) :
-                                       CategoryList.list(this.store);
-
-      promise.then(list => {
-        this.setupController(controller, list);
+      this.model().then(model => {
+        this.setupController(controller, model);
         controller.send("loadingComplete");
       });
     },

app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs

@@ -7,25 +7,21 @@
     </tr>
   </thead>
   <tbody>
-    {{#if loadingTopics}}
-      {{loading-spinner}}
+    {{#if topics}}
+      {{#each topics as |t|}}
+        {{latest-topic-list-item topic=t}}
+      {{/each}}
+      <tr class="more-topics">
+        <td>
+          <a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
+        </td>
+      </tr>
     {{else}}
-      {{#if topics}}
-        {{#each topics as |t|}}
-          {{latest-topic-list-item topic=t}}
-        {{/each}}
-        <tr class="more-topics">
-          <td>
-            <a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
-          </td>
-        </tr>
-      {{else}}
-        <tr class="no-topics">
-          <td>
-            <h3>{{i18n "topics.none.latest"}}</h3>
-          </td>
-        </tr>
-      {{/if}}
+      <tr class="no-topics">
+        <td>
+          <h3>{{i18n "topics.none.latest"}}</h3>
+        </td>
+      </tr>
     {{/if}}
   </tbody>
 </table>

app/assets/javascripts/discourse/templates/discovery/categories.hbs

@@ -2,6 +2,5 @@
   {{component controller.categoryPageStyle
               categories=model.categories
               latestTopicOnly=controller.latestTopicOnly
-              topics=model.topicList.topics
-              loadingTopics=model.loadingTopics}}
+              topics=model.topics}}
 {{/discovery-categories}}