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,124 +3,133 @@ 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(
+export default Component.extend({
-  bufferedRender({
+  classNames: ["topic-status-info"],
-    classNames: ["topic-status-info"],
+  _delayedRerender: null,
-    _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: [
+  rerenderTriggers: [
-      "topicClosed",
+    "topicClosed",
-      "statusType",
+    "statusType",
-      "executeAt",
+    "executeAt",
-      "basedOnLastPost",
+    "basedOnLastPost",
-      "duration",
+    "duration",
-      "categoryId"
+    "categoryId"
-    ],
+  ],
 
-    @discourseComputed("statusType")
+  @discourseComputed("statusType")
-    canRemoveTimer(type) {
+  canRemoveTimer(type) {
-      if (type === REMINDER_TYPE) return true;
+    if (type === REMINDER_TYPE) return true;
-      return this.currentUser && this.currentUser.get("canManageTopic");
+    return this.currentUser && this.currentUser.get("canManageTopic");
-    },
+  },
 
-    buildBuffer(buffer) {
+  @discourseComputed("canRemoveTimer", "removeTopicTimer")
-      if (!this.executeAt) return;
+  showTrashCan(canRemoveTimer, removeTopicTimer) {
+    return canRemoveTimer && removeTopicTimer;
+  },
 
-      const topicStatus = this.topicClosed ? "close" : "open";
+  renderTopicTimer() {
-      const topicStatusKnown = this.topicClosed !== undefined;
+    if (!this.executeAt) {
-      if (topicStatusKnown && topicStatus === this.statusType) return;
+      this.set("showTopicTimer", null);
-
+      return;
-      const statusUpdateAt = moment(this.executeAt);
-      const duration = moment.duration(statusUpdateAt - moment());
-      const minutesLeft = duration.asMinutes();
-
-      if (minutesLeft > 0) {
-        let rerenderDelay = 1000;
-        if (minutesLeft > 2160) {
-          rerenderDelay = 12 * 60 * 60000;
-        } else if (minutesLeft > 1410) {
-          rerenderDelay = 60 * 60000;
-        } else if (minutesLeft > 90) {
-          rerenderDelay = 30 * 60000;
-        } else if (minutesLeft > 2) {
-          rerenderDelay = 60000;
-        }
-        let autoCloseHours = this.duration || 0;
-
-        buffer.push(`<h3 class="topic-timer-heading">`);
-
-        let options = {
-          timeLeft: duration.humanize(true),
-          duration: moment.duration(autoCloseHours, "hours").humanize()
-        };
-
-        const categoryId = this.categoryId;
-        if (categoryId) {
-          const category = Category.findById(categoryId);
-
-          options = Object.assign(
-            {
-              categoryName: category.get("slug"),
-              categoryUrl: category.get("url")
-            },
-            options
-          );
-        }
-
-        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>");
-
-        // TODO Sam: concerned this can cause a heavy rerender loop
-        if (ENV.environment !== "test") {
-          this._delayedRerender = later(this, this.rerender, rerenderDelay);
-        }
-      }
-    },
-
-    didInsertElement() {
-      this._super(...arguments);
-
-      if (this.removeTopicTimer) {
-        $(this.element).on(
-          "click.topic-timer-remove",
-          "button",
-          this.removeTopicTimer
-        );
-      }
-    },
-
-    willDestroyElement() {
-      $(this.element).off("click.topic-timer-remove", this.removeTopicTimer);
-
-      if (this._delayedRerender) {
-        cancel(this._delayedRerender);
-      }
-    },
-
-    _noticeKey() {
-      const statusType = this.statusType;
-
-      if (this.basedOnLastPost) {
-        return `topic.status_update_notice.auto_${statusType}_based_on_last_post`;
-      } else {
-        return `topic.status_update_notice.auto_${statusType}`;
-      }
     }
-  })
+
-);
+    const topicStatus = this.topicClosed ? "close" : "open";
+    const topicStatusKnown = this.topicClosed !== undefined;
+    if (topicStatusKnown && topicStatus === this.statusType) return;
+
+    const statusUpdateAt = moment(this.executeAt);
+    const duration = moment.duration(statusUpdateAt - moment());
+    const minutesLeft = duration.asMinutes();
+
+    if (minutesLeft > 0) {
+      let rerenderDelay = 1000;
+      if (minutesLeft > 2160) {
+        rerenderDelay = 12 * 60 * 60000;
+      } else if (minutesLeft > 1410) {
+        rerenderDelay = 60 * 60000;
+      } else if (minutesLeft > 90) {
+        rerenderDelay = 30 * 60000;
+      } else if (minutesLeft > 2) {
+        rerenderDelay = 60000;
+      }
+      let autoCloseHours = this.duration || 0;
+
+      let options = {
+        timeLeft: duration.humanize(true),
+        duration: moment.duration(autoCloseHours, "hours").humanize()
+      };
+
+      const categoryId = this.categoryId;
+      if (categoryId) {
+        const category = Category.findById(categoryId);
+
+        options = Object.assign(
+          {
+            categoryName: category.get("slug"),
+            categoryUrl: category.get("url")
+          },
+          options
+        );
+      }
+
+      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.renderTopicTimer();
+        }, rerenderDelay);
+      }
+    } else {
+      this.set("showTopicTimer", null);
+    }
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.renderTopicTimer();
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    if (this.removeTopicTimer) {
+      $(this.element).on(
+        "click.topic-timer-remove",
+        "button",
+        this.removeTopicTimer
+      );
+    }
+  },
+
+  willDestroyElement() {
+    $(this.element).off("click.topic-timer-remove", this.removeTopicTimer);
+
+    if (this._delayedRerender) {
+      cancel(this._delayedRerender);
+    }
+  },
+
+  _noticeKey() {
+    const statusType = this.statusType;
+
+    if (this.basedOnLastPost) {
+      return `topic.status_update_notice.auto_${statusType}_based_on_last_post`;
+    } else {
+      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}}