DEV: Remove buffered rendering from topic timers

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

Previous commit: f269e45978 in this
series.

This commit affects the display of topic timers. It is just a refactor
and does not change any functionality.

app/assets/javascripts/discourse/components/topic-timer-info.js.es6

@@ -3,15 +3,19 @@ import { cancel } from "@ember/runloop";
 import { later } from "@ember/runloop";
 import Component from "@ember/component";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 import Category from "discourse/models/category";
 import { REMINDER_TYPE } from "discourse/controllers/edit-topic-timer";
 import ENV from "discourse-common/config/environment";
 
-export default Component.extend(
-  bufferedRender({
+export default Component.extend({
   classNames: ["topic-status-info"],
   _delayedRerender: null,
+  clockIcon: `${iconHTML("far-clock")}`.htmlSafe(),
+  trashCanIcon: `${iconHTML("trash-alt")}`.htmlSafe(),
+  trashCanTitle: I18n.t("post.controls.remove_timer"),
+  title: null,
+  notice: null,
+  showTopicTimer: null,
 
   rerenderTriggers: [
     "topicClosed",
@@ -28,8 +32,16 @@ export default Component.extend(
     return this.currentUser && this.currentUser.get("canManageTopic");
   },
 
-    buildBuffer(buffer) {
-      if (!this.executeAt) return;
+  @discourseComputed("canRemoveTimer", "removeTopicTimer")
+  showTrashCan(canRemoveTimer, removeTopicTimer) {
+    return canRemoveTimer && removeTopicTimer;
+  },
+
+  renderTopicTimer() {
+    if (!this.executeAt) {
+      this.set("showTopicTimer", null);
+      return;
+    }
 
     const topicStatus = this.topicClosed ? "close" : "open";
     const topicStatusKnown = this.topicClosed !== undefined;
@@ -52,8 +64,6 @@ export default Component.extend(
       }
       let autoCloseHours = this.duration || 0;
 
-        buffer.push(`<h3 class="topic-timer-heading">`);
-
       let options = {
         timeLeft: duration.humanize(true),
         duration: moment.duration(autoCloseHours, "hours").humanize()
@@ -72,27 +82,27 @@ export default Component.extend(
         );
       }
 
-        buffer.push(
-          `<span title="${moment(this.executeAt).format("LLLL")}">${iconHTML(
-            "far-clock"
-          )} ${I18n.t(this._noticeKey(), options)}</span>`
-        );
-        if (this.removeTopicTimer && this.canRemoveTimer) {
-          buffer.push(
-            `<button class="btn topic-timer-remove no-text" title="${I18n.t(
-              "post.controls.remove_timer"
-            )}">${iconHTML("trash-alt")}</button>`
-          );
-        }
-        buffer.push("</h3>");
+      this.set("title", `${moment(this.executeAt).format("LLLL")}`.htmlSafe());
+      this.set("notice", `${I18n.t(this._noticeKey(), options)}`.htmlSafe());
+      this.set("showTopicTimer", true);
 
       // TODO Sam: concerned this can cause a heavy rerender loop
       if (ENV.environment !== "test") {
-          this._delayedRerender = later(this, this.rerender, rerenderDelay);
+        //this._delayedRerender = later(this, this.rerender, rerenderDelay);
+        this._delayedRerender = later(() => {
+          this.renderTopicTimer();
+        }, rerenderDelay);
       }
+    } else {
+      this.set("showTopicTimer", null);
     }
   },
 
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.renderTopicTimer();
+  },
+
   didInsertElement() {
     this._super(...arguments);
 
@@ -122,5 +132,4 @@ export default Component.extend(
       return `topic.status_update_notice.auto_${statusType}`;
     }
   }
-  })
-);
+});

app/assets/javascripts/discourse/templates/components/topic-timer-info.hbs

@@ -0,0 +1,12 @@
+{{#if showTopicTimer}}
+  <h3 class="topic-timer-heading">
+    <span title="{{title}}">
+      {{clockIcon}} {{notice}}
+    </span>
+    {{#if showTrashCan}}
+      <button class="btn topic-timer-remove no-text" title="{{trashCanTitle}}">
+        {{trashCanIcon}}
+      </button>
+    {{/if}}
+  </h3>
+{{/if}}