DEV: Remove buffered rendering from topic-list-item (#8589)

* DEV: Remove buffered rendering from topic-list-item

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

Previous commit: 1c7305c0f1b26444dbd12918efb50e55a1231e73 in this
series.

This is just a refactor and should not change any functionality.

* apply prettier fix

* update syntax

* Use computed properties where possible

* switch to using didReceiveAttrs

* Simplify topic.pinned observer

app/assets/javascripts/discourse/components/topic-list-item.js.es6

@@ -1,9 +1,8 @@
-import discourseComputed from "discourse-common/utils/decorators";
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import { alias } from "@ember/object/computed";
 import Component from "@ember/component";
 import { schedule } from "@ember/runloop";
 import DiscourseURL from "discourse/lib/url";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 import { findRawTemplate } from "discourse/lib/raw-templates";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import { on } from "@ember/object/evented";
@@ -33,12 +32,25 @@ export function navigateToTopic(topic, href) {
   return false;
 }
 
-export const ListItemDefaults = {
+export default Component.extend({
   tagName: "tr",
   classNameBindings: [":topic-list-item", "unboundClassNames", "topic.visited"],
   attributeBindings: ["data-topic-id"],
   "data-topic-id": alias("topic.id"),
 
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.renderTopicListItem();
+  },
+
+  @observes("topic.pinned")
+  renderTopicListItem() {
+    const template = findRawTemplate("list/topic-list-item");
+    if (template) {
+      this.set("topicListItemContents", template(this).htmlSafe());
+    }
+  },
+
   didInsertElement() {
     this._super(...arguments);
 
@@ -195,6 +207,14 @@ export const ListItemDefaults = {
     return this.unhandledRowClick(e, topic);
   },
 
+  actions: {
+    toggleBookmark() {
+      this.topic.toggleBookmark().finally(() => this.renderTopicListItem());
+    }
+  },
+
+  unhandledRowClick() {},
+
   navigateToTopic,
 
   highlight(opts = { isLastViewedTopic: false }) {
@@ -223,27 +243,4 @@ export const ListItemDefaults = {
       this.highlight();
     }
   })
-};
-
-export default Component.extend(
-  ListItemDefaults,
-  bufferedRender({
-    rerenderTriggers: ["bulkSelectEnabled", "topic.pinned"],
-
-    actions: {
-      toggleBookmark() {
-        this.topic.toggleBookmark().finally(() => this.rerenderBuffer());
-      }
-    },
-
-    buildBuffer(buffer) {
-      const template = findRawTemplate("list/topic-list-item");
-      if (template) {
-        buffer.push(template(this));
-      }
-    },
-
-    // Can be overwritten by plugins to handle clicks on other parts of the row
-    unhandledRowClick() {}
-  })
-);
+});

app/assets/javascripts/discourse/templates/components/topic-list-item.hbs

@@ -0,0 +1 @@
+{{topicListItemContents}}