Convert suggested topics to a component

app/assets/javascripts/discourse/components/suggested-topics.js.es6

@@ -0,0 +1,53 @@
+import computed from 'ember-addons/ember-computed-decorators';
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
+import { iconHTML } from 'discourse-common/lib/icon-library';
+
+export default Ember.Component.extend({
+  elementId: 'suggested-topics',
+
+  @computed('topic')
+  suggestedTitle(topic) {
+    return topic.get('isPrivateMessage') ?
+      `<a href="${this.get('pmPath')}">${iconHTML('envelope', { class: 'private-message-glyph' })}</a> ${I18n.t("suggested_topics.pm_title")}` :
+      I18n.t("suggested_topics.title");
+  },
+
+  @computed('topic', 'topicTrackingState.messageCount')
+  browseMoreMessage(topic) {
+    // TODO decide what to show for pms
+    if (topic.get('isPrivateMessage')) { return; }
+
+    const opts = { latestLink: `<a href="${Discourse.getURL("/latest")}">${I18n.t("topic.view_latest_topics")}</a>` };
+    let category = topic.get('category');
+
+    if (category && Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id")) {
+      category = null;
+    }
+
+    if (category) {
+      opts.catLink = categoryBadgeHTML(category);
+    } else {
+      opts.catLink = "<a href=\"" + Discourse.getURL("/categories") + "\">" + I18n.t("topic.browse_all_categories") + "</a>";
+    }
+
+    const unreadTopics = this.topicTrackingState.countUnread();
+    const newTopics = this.topicTrackingState.countNew();
+
+    if (newTopics + unreadTopics > 0) {
+      const hasBoth = unreadTopics > 0 && newTopics > 0;
+
+      return I18n.messageFormat("topic.read_more_MF", {
+        "BOTH": hasBoth,
+        "UNREAD": unreadTopics,
+        "NEW": newTopics,
+        "CATEGORY": category ? true : false,
+        latestLink: opts.latestLink,
+        catLink: opts.catLink
+      });
+    } else if (category) {
+      return I18n.t("topic.read_more_in_category", opts);
+    } else {
+      return I18n.t("topic.read_more", opts);
+    }
+  },
+});

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -1,4 +1,3 @@
-import { iconHTML } from 'discourse-common/lib/icon-library';
 import BufferedContent from 'discourse/mixins/buffered-content';
 import SelectedPostsCount from 'discourse/mixins/selected-posts-count';
 import { spinnerHTML } from 'discourse/helpers/loading-spinner';
@@ -8,7 +7,6 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
 import computed from 'ember-addons/ember-computed-decorators';
 import Composer from 'discourse/models/composer';
 import DiscourseURL from 'discourse/lib/url';
-import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 import Post from 'discourse/models/post';
 import debounce from 'discourse/lib/debounce';
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
@@ -66,58 +64,12 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     return this.capabilities.isAndroid && loading;
   },
 
-  @computed('model', 'topicTrackingState.messageCount')
-  browseMoreMessage(model) {
-
-    // TODO decide what to show for pms
-    if (model.get('isPrivateMessage')) { return; }
-
-    const opts = { latestLink: `<a href="${Discourse.getURL("/latest")}">${I18n.t("topic.view_latest_topics")}</a>` };
-    let category = model.get('category');
-
-    if (category && Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id")) {
-      category = null;
-    }
-
-    if (category) {
-      opts.catLink = categoryBadgeHTML(category);
-    } else {
-      opts.catLink = "<a href=\"" + Discourse.getURL("/categories") + "\">" + I18n.t("topic.browse_all_categories") + "</a>";
-    }
-
-    const unreadTopics = this.topicTrackingState.countUnread();
-    const newTopics = this.topicTrackingState.countNew();
-
-    if (newTopics + unreadTopics > 0) {
-      const hasBoth = unreadTopics > 0 && newTopics > 0;
-
-      return I18n.messageFormat("topic.read_more_MF", {
-        "BOTH": hasBoth,
-        "UNREAD": unreadTopics,
-        "NEW": newTopics,
-        "CATEGORY": category ? true : false,
-        latestLink: opts.latestLink,
-        catLink: opts.catLink
-      });
-    } else if (category) {
-      return I18n.t("topic.read_more_in_category", opts);
-    } else {
-      return I18n.t("topic.read_more", opts);
-    }
-  },
 
   @computed('model')
   pmPath(model) {
     return this.currentUser && this.currentUser.pmPath(model);
   },
 
-  @computed('model')
-  suggestedTitle(model) {
-    return model.get('isPrivateMessage') ?
-      `<a href="${this.get('pmPath')}">${iconHTML('envelope', { class: 'private-message-glyph' })}</a> ${I18n.t("suggested_topics.pm_title")}` :
-      I18n.t("suggested_topics.title");
-  },
-
   init() {
     this._super();
     this.set('selectedPosts', []);

app/assets/javascripts/discourse/templates/components/suggested-topics.hbs

@@ -0,0 +1,12 @@
+<h3>{{{suggestedTitle}}}</h3>
+<div class="topics">
+  {{#if topic.isPrivateMessage}}
+    {{basic-topic-list
+      hideCategory="true"
+      showPosters="true"
+      topics=topic.details.suggested_topics}}
+  {{else}}
+    {{basic-topic-list topics=topic.details.suggested_topics}}
+  {{/if}}
+</div>
+<h3>{{{browseMoreMessage}}}</h3>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -246,21 +246,8 @@
               {{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
 
               {{#if model.details.suggested_topics.length}}
-                <div id="suggested-topics">
+                {{suggested-topics topic=model}}
-                  <h3>{{{suggestedTitle}}}</h3>
-                  <div class="topics">
-                    {{#if model.isPrivateMessage}}
-                      {{basic-topic-list hideCategory="true"
-                                         showPosters="true"
-                                         topics=model.details.suggested_topics}}
-                    {{else}}
-                      {{basic-topic-list topics=model.details.suggested_topics}}
-                    {{/if}}
-                  </div>
-                  <h3>{{{browseMoreMessage}}}</h3>
-                </div>
               {{/if}}
-
             {{/if}}
           {{/conditional-loading-spinner}}