From 54e4559aea2ff534fcd7b4117251d3eef1e85da1 Mon Sep 17 00:00:00 2001 From: Blake Erickson Date: Thu, 5 Dec 2019 20:26:14 -0700 Subject: [PATCH] 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: f269e45978a108b964c64ca76550d730c8634d97 in this series. This commit affects the display of topic timers. It is just a refactor and does not change any functionality. --- .../components/topic-timer-info.js.es6 | 233 +++++++++--------- .../templates/components/topic-timer-info.hbs | 12 + 2 files changed, 133 insertions(+), 112 deletions(-) create mode 100644 app/assets/javascripts/discourse/templates/components/topic-timer-info.hbs diff --git a/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 b/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 index 487307f6248..2a51bf68ccb 100644 --- a/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 +++ b/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( - bufferedRender({ - classNames: ["topic-status-info"], - _delayedRerender: null, +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", - "statusType", - "executeAt", - "basedOnLastPost", - "duration", - "categoryId" - ], + rerenderTriggers: [ + "topicClosed", + "statusType", + "executeAt", + "basedOnLastPost", + "duration", + "categoryId" + ], - @discourseComputed("statusType") - canRemoveTimer(type) { - if (type === REMINDER_TYPE) return true; - return this.currentUser && this.currentUser.get("canManageTopic"); - }, + @discourseComputed("statusType") + canRemoveTimer(type) { + if (type === REMINDER_TYPE) return true; + return this.currentUser && this.currentUser.get("canManageTopic"); + }, - buildBuffer(buffer) { - if (!this.executeAt) return; + @discourseComputed("canRemoveTimer", "removeTopicTimer") + showTrashCan(canRemoveTimer, removeTopicTimer) { + return canRemoveTimer && removeTopicTimer; + }, - 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; - - buffer.push(`

`); - - 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( - `${iconHTML( - "far-clock" - )} ${I18n.t(this._noticeKey(), options)}` - ); - if (this.removeTopicTimer && this.canRemoveTimer) { - buffer.push( - `` - ); - } - buffer.push("

"); - - // 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}`; - } + renderTopicTimer() { + if (!this.executeAt) { + this.set("showTopicTimer", null); + return; } - }) -); + + 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}`; + } + } +}); diff --git a/app/assets/javascripts/discourse/templates/components/topic-timer-info.hbs b/app/assets/javascripts/discourse/templates/components/topic-timer-info.hbs new file mode 100644 index 00000000000..fe1f089d742 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/topic-timer-info.hbs @@ -0,0 +1,12 @@ +{{#if showTopicTimer}} +

+ + {{clockIcon}} {{notice}} + + {{#if showTrashCan}} + + {{/if}} +

+{{/if}}