DEV: Remove buffered rendering from navigation-item

This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.

Previous commit: ea6326c860 in this
series.

This commit affects the top menu buttons. It is just a refactor and
should not change any functionality.

app/assets/javascripts/discourse/components/navigation-item.js.es6

@@ -1,77 +1,69 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 import FilterModeMixin from "discourse/mixins/filter-mode";
 
-export default Component.extend(
-  FilterModeMixin,
-  bufferedRender({
-    tagName: "li",
-    classNameBindings: [
-      "active",
-      "content.hasIcon:has-icon",
-      "content.classNames",
-      "hidden"
-    ],
-    attributeBindings: ["content.title:title"],
-    hidden: false,
-    rerenderTriggers: ["content.count"],
+export default Component.extend(FilterModeMixin, {
+  tagName: "li",
+  classNameBindings: [
+    "active",
+    "content.hasIcon:has-icon",
+    "content.classNames",
+    "hidden"
+  ],
+  attributeBindings: ["content.title:title"],
+  hidden: false,
+  rerenderTriggers: ["content.count"],
+  activeClass: "",
+  hrefLink: null,
 
-    @discourseComputed("content.filterType", "filterType", "content.active")
-    active(contentFilterType, filterType, active) {
-      if (active !== undefined) {
-        return active;
-      }
-      return contentFilterType === filterType;
-    },
-
-    buildBuffer(buffer) {
-      const content = this.content;
-
-      let href = content.get("href");
-      let queryParams = [];
-
-      // Include the category id if the option is present
-      if (content.get("includeCategoryId")) {
-        let categoryId = this.get("content.category.id");
-        if (categoryId) {
-          queryParams.push(`category_id=${categoryId}`);
-        }
-      }
-
-      // ensures we keep discovery query params added through plugin api
-      if (content.persistedQueryParams) {
-        Object.keys(content.persistedQueryParams).forEach(key => {
-          const value = content.persistedQueryParams[key];
-          queryParams.push(`${key}=${value}`);
-        });
-      }
-
-      if (queryParams.length) {
-        href += `?${queryParams.join("&")}`;
-      }
-
-      if (
-        !this.active &&
-        this.currentUser &&
-        this.currentUser.trust_level > 0 &&
-        (content.get("name") === "new" || content.get("name") === "unread") &&
-        content.get("count") < 1
-      ) {
-        this.set("hidden", true);
-      } else {
-        this.set("hidden", false);
-      }
-
-      buffer.push(
-        `<a href='${href}'` + (this.active ? 'class="active"' : "") + `>`
-      );
-
-      if (content.get("hasIcon")) {
-        buffer.push("<span class='" + content.get("name") + "'></span>");
-      }
-      buffer.push(this.get("content.displayName"));
-      buffer.push("</a>");
+  @discourseComputed("content.filterType", "filterType", "content.active")
+  active(contentFilterType, filterType, active) {
+    if (active !== undefined) {
+      return active;
     }
-  })
-);
+    return contentFilterType === filterType;
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    const content = this.content;
+
+    let href = content.get("href");
+    let queryParams = [];
+
+    // Include the category id if the option is present
+    if (content.get("includeCategoryId")) {
+      let categoryId = this.get("content.category.id");
+      if (categoryId) {
+        queryParams.push(`category_id=${categoryId}`);
+      }
+    }
+
+    // ensures we keep discovery query params added through plugin api
+    if (content.persistedQueryParams) {
+      Object.keys(content.persistedQueryParams).forEach(key => {
+        const value = content.persistedQueryParams[key];
+        queryParams.push(`${key}=${value}`);
+      });
+    }
+
+    if (queryParams.length) {
+      href += `?${queryParams.join("&")}`;
+    }
+    this.set("hrefLink", href);
+
+    this.set("activeClass", this.active ? "active" : "");
+
+    if (
+      !this.active &&
+      this.currentUser &&
+      this.currentUser.trust_level > 0 &&
+      (content.get("name") === "new" || content.get("name") === "unread") &&
+      content.get("count") < 1
+    ) {
+      this.set("hidden", true);
+    } else {
+      this.set("hidden", false);
+    }
+  }
+});

app/assets/javascripts/discourse/templates/components/navigation-item.hbs

@@ -0,0 +1,6 @@
+<a href={{hrefLink}} class={{activeClass}}>
+{{#if hasIcon}}
+<span class={{content.name}}></span>
+{{/if}}
+{{content.displayName}}
+</a>