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.
This commit is contained in:
Blake Erickson
parent
cc92aa9e71
commit
54e4559aea
|
|
@ -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(`<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}`;
|
||||
}
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
Loading…
Reference in New Issue