DEV: Refactor ComposerMessages (#21077)
Co-authored-by: David Taylor <david@taylorhq.com>
This commit is contained in:
Jarek Radosz
GitHub
parent
db16700355
commit
788dc0a096
|
|
@ -1,110 +1,76 @@
|
|||
import Component from "@ember/component";
|
||||
import { classNameBindings } from "@ember-decorators/component";
|
||||
import EmberObject, { action } from "@ember/object";
|
||||
import I18n from "I18n";
|
||||
import LinkLookup from "discourse/lib/link-lookup";
|
||||
import { not } from "@ember/object/computed";
|
||||
import { scheduleOnce } from "@ember/runloop";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
|
||||
let _messagesCache = {};
|
||||
let _recipient_names = [];
|
||||
|
||||
export default Component.extend({
|
||||
classNameBindings: [":composer-popup-container", "hidden"],
|
||||
checkedMessages: false,
|
||||
messages: null,
|
||||
messagesByTemplate: null,
|
||||
queuedForTyping: null,
|
||||
_lastSimilaritySearch: null,
|
||||
_similarTopicsMessage: null,
|
||||
_yourselfConfirm: null,
|
||||
similarTopics: null,
|
||||
usersNotSeen: null,
|
||||
@classNameBindings(":composer-popup-container", "hidden")
|
||||
export default class ComposerMessages extends Component {
|
||||
checkedMessages = false;
|
||||
messages = null;
|
||||
messagesByTemplate = null;
|
||||
queuedForTyping = null;
|
||||
similarTopics = null;
|
||||
usersNotSeen = null;
|
||||
|
||||
hidden: not("composer.viewOpenOrFullscreen"),
|
||||
@not("composer.viewOpenOrFullscreen") hidden;
|
||||
|
||||
_lastSimilaritySearch = null;
|
||||
_similarTopicsMessage = null;
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
super.didInsertElement(...arguments);
|
||||
|
||||
this.appEvents.on("composer:typed-reply", this, this._typedReply);
|
||||
this.appEvents.on("composer:opened", this, this._findMessages);
|
||||
this.appEvents.on("composer:find-similar", this, this._findSimilar);
|
||||
this.appEvents.on("composer-messages:close", this, this._closeTop);
|
||||
this.appEvents.on("composer-messages:create", this, this._create);
|
||||
scheduleOnce("afterRender", this, this.reset);
|
||||
},
|
||||
this.reset();
|
||||
}
|
||||
|
||||
willDestroyElement() {
|
||||
super.willDestroyElement(...arguments);
|
||||
|
||||
this.appEvents.off("composer:typed-reply", this, this._typedReply);
|
||||
this.appEvents.off("composer:opened", this, this._findMessages);
|
||||
this.appEvents.off("composer:find-similar", this, this._findSimilar);
|
||||
this.appEvents.off("composer-messages:close", this, this._closeTop);
|
||||
this.appEvents.off("composer-messages:create", this, this._create);
|
||||
},
|
||||
}
|
||||
|
||||
_closeTop() {
|
||||
const messages = this.messages;
|
||||
messages.popObject();
|
||||
this.set("messageCount", messages.get("length"));
|
||||
},
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.messages.popObject();
|
||||
this.set("messageCount", this.messages.length);
|
||||
}
|
||||
|
||||
_removeMessage(message) {
|
||||
const messages = this.messages;
|
||||
messages.removeObject(message);
|
||||
this.set("messageCount", messages.get("length"));
|
||||
},
|
||||
|
||||
@action
|
||||
closeMessage(message, event) {
|
||||
event?.preventDefault();
|
||||
this._removeMessage(message);
|
||||
},
|
||||
|
||||
actions: {
|
||||
hideMessage(message) {
|
||||
this._removeMessage(message);
|
||||
// kind of hacky but the visibility depends on this
|
||||
this.messagesByTemplate[message.get("templateName")] = undefined;
|
||||
},
|
||||
|
||||
popup(message) {
|
||||
const messagesByTemplate = this.messagesByTemplate;
|
||||
const templateName = message.get("templateName");
|
||||
|
||||
if (!messagesByTemplate[templateName]) {
|
||||
const messages = this.messages;
|
||||
messages.pushObject(message);
|
||||
this.set("messageCount", messages.get("length"));
|
||||
messagesByTemplate[templateName] = message;
|
||||
this.messages.removeObject(message);
|
||||
this.set("messageCount", this.messages.length);
|
||||
}
|
||||
},
|
||||
|
||||
shareModal() {
|
||||
const { topic } = this.composer;
|
||||
const controller = showModal("share-topic", { model: topic.category });
|
||||
controller.setProperties({
|
||||
allowInvites:
|
||||
topic.details.can_invite_to &&
|
||||
!topic.archived &&
|
||||
!topic.closed &&
|
||||
!topic.deleted,
|
||||
topic,
|
||||
});
|
||||
},
|
||||
_create(info) {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
switchPM(message) {
|
||||
this.composer.set("action", "privateMessage");
|
||||
this.composer.set("targetRecipients", message.reply_username);
|
||||
this._removeMessage(message);
|
||||
},
|
||||
},
|
||||
this.reset();
|
||||
this.popup(EmberObject.create(info));
|
||||
}
|
||||
|
||||
// Resets all active messages.
|
||||
// For example if composing a new post.
|
||||
reset() {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
this.setProperties({
|
||||
messages: [],
|
||||
messagesByTemplate: {},
|
||||
|
|
@ -112,19 +78,41 @@ export default Component.extend({
|
|||
checkedMessages: false,
|
||||
similarTopics: [],
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
// Called after the user has typed a reply.
|
||||
// Some messages only get shown after being typed.
|
||||
_typedReply() {
|
||||
async _typedReply() {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const composer = this.composer;
|
||||
if (composer.get("privateMessage")) {
|
||||
const recipients = composer.targetRecipientsArray;
|
||||
const recipient_names = recipients
|
||||
for (const msg of this.queuedForTyping) {
|
||||
if (this.composer.whisper && msg.hide_if_whisper) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.popup(msg);
|
||||
}
|
||||
|
||||
if (this.composer.privateMessage) {
|
||||
if (
|
||||
this.composer.targetRecipientsArray.length > 0 &&
|
||||
this.composer.targetRecipientsArray.every(
|
||||
(r) => r.name === this.currentUser.username
|
||||
)
|
||||
) {
|
||||
const message = this.composer.store.createRecord("composer-message", {
|
||||
id: "yourself_confirm",
|
||||
templateName: "education",
|
||||
title: I18n.t("composer.yourself_confirm.title"),
|
||||
body: I18n.t("composer.yourself_confirm.body"),
|
||||
});
|
||||
|
||||
this.popup(message);
|
||||
}
|
||||
|
||||
const recipient_names = this.composer.targetRecipientsArray
|
||||
.filter((r) => r.type === "user")
|
||||
.map(({ name }) => name);
|
||||
|
||||
|
|
@ -135,15 +123,23 @@ export default Component.extend({
|
|||
) {
|
||||
_recipient_names = recipient_names;
|
||||
|
||||
ajax(`/composer_messages/user_not_seen_in_a_while`, {
|
||||
const response = await ajax(
|
||||
`/composer_messages/user_not_seen_in_a_while`,
|
||||
{
|
||||
type: "GET",
|
||||
data: {
|
||||
usernames: recipient_names,
|
||||
},
|
||||
}).then((response) => {
|
||||
}
|
||||
);
|
||||
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
response.user_count > 0 &&
|
||||
this.get("usersNotSeen") !== response.usernames.join("-")
|
||||
this.usersNotSeen !== response.usernames.join("-")
|
||||
) {
|
||||
this.set("usersNotSeen", response.usernames.join("-"));
|
||||
this.messagesByTemplate["education"] = undefined;
|
||||
|
|
@ -155,11 +151,14 @@ export default Component.extend({
|
|||
] = `<a class='mention' href='/u/${username}'>@${username}</a>`;
|
||||
});
|
||||
|
||||
let body_key = "composer.user_not_seen_in_a_while.single";
|
||||
if (response.user_count > 1) {
|
||||
let body_key;
|
||||
if (response.user_count === 1) {
|
||||
body_key = "composer.user_not_seen_in_a_while.single";
|
||||
} else {
|
||||
body_key = "composer.user_not_seen_in_a_while.multiple";
|
||||
}
|
||||
const message = composer.store.createRecord("composer-message", {
|
||||
|
||||
const message = this.composer.store.createRecord("composer-message", {
|
||||
id: "user-not-seen",
|
||||
templateName: "education",
|
||||
body: I18n.t(body_key, {
|
||||
|
|
@ -167,51 +166,26 @@ export default Component.extend({
|
|||
time_ago: response.time_ago,
|
||||
}),
|
||||
});
|
||||
this.send("popup", message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
recipients.length > 0 &&
|
||||
recipients.every((r) => r.name === this.currentUser.get("username"))
|
||||
) {
|
||||
const message =
|
||||
this._yourselfConfirm ||
|
||||
composer.store.createRecord("composer-message", {
|
||||
id: "yourself_confirm",
|
||||
templateName: "education",
|
||||
title: I18n.t("composer.yourself_confirm.title"),
|
||||
body: I18n.t("composer.yourself_confirm.body"),
|
||||
});
|
||||
this.send("popup", message);
|
||||
this.popup(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.queuedForTyping.forEach((msg) => {
|
||||
if (composer.whisper && msg.hide_if_whisper) {
|
||||
async _findSimilar() {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
this.send("popup", msg);
|
||||
});
|
||||
},
|
||||
|
||||
_create(info) {
|
||||
this.reset();
|
||||
this.send("popup", EmberObject.create(info));
|
||||
},
|
||||
|
||||
_findSimilar() {
|
||||
const composer = this.composer;
|
||||
|
||||
// We don't care about similar topics unless creating a topic
|
||||
if (!composer.get("creatingTopic")) {
|
||||
if (!this.composer.creatingTopic) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO pass the 200 in from somewhere
|
||||
const raw = (composer.get("reply") || "").slice(0, 200);
|
||||
const title = composer.get("title") || "";
|
||||
// TODO: pass the 200 in from somewhere
|
||||
const raw = (this.composer.reply || "").slice(0, 200);
|
||||
const title = this.composer.title || "";
|
||||
|
||||
// Ensure we have at least a title
|
||||
if (title.length < this.siteSettings.min_title_similar_length) {
|
||||
|
|
@ -223,83 +197,132 @@ export default Component.extend({
|
|||
if (concat === this._lastSimilaritySearch) {
|
||||
return;
|
||||
}
|
||||
this._lastSimilaritySearch = concat;
|
||||
|
||||
const similarTopics = this.similarTopics;
|
||||
const message =
|
||||
this._similarTopicsMessage ||
|
||||
composer.store.createRecord("composer-message", {
|
||||
this._lastSimilaritySearch = concat;
|
||||
this._similarTopicsMessage ||= this.composer.store.createRecord(
|
||||
"composer-message",
|
||||
{
|
||||
id: "similar_topics",
|
||||
templateName: "similar-topics",
|
||||
extraClass: "similar-topics",
|
||||
}
|
||||
);
|
||||
|
||||
const topics = await this.composer.store.find("similar-topic", {
|
||||
title,
|
||||
raw,
|
||||
});
|
||||
|
||||
this._similarTopicsMessage = message;
|
||||
|
||||
composer.store.find("similar-topic", { title, raw }).then((topics) => {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
similarTopics.clear();
|
||||
similarTopics.pushObjects(topics.get("content"));
|
||||
this.similarTopics.clear();
|
||||
this.similarTopics.pushObjects(topics.content);
|
||||
|
||||
if (similarTopics.get("length") > 0) {
|
||||
message.set("similarTopics", similarTopics);
|
||||
this.send("popup", message);
|
||||
} else if (message) {
|
||||
this.send("hideMessage", message);
|
||||
if (this.similarTopics.length > 0) {
|
||||
this._similarTopicsMessage.set("similarTopics", this.similarTopics);
|
||||
this.popup(this._similarTopicsMessage);
|
||||
} else if (this._similarTopicsMessage) {
|
||||
this.hideMessage(this._similarTopicsMessage);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Figure out if there are any messages that should be displayed above the composer.
|
||||
_findMessages() {
|
||||
async _findMessages() {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.checkedMessages) {
|
||||
return;
|
||||
}
|
||||
|
||||
const composer = this.composer;
|
||||
const args = { composer_action: composer.get("action") };
|
||||
const topicId = composer.get("topic.id");
|
||||
const postId = composer.get("post.id");
|
||||
const args = { composer_action: this.composer.action };
|
||||
const topicId = this.composer.topic?.id;
|
||||
const postId = this.composer.post?.id;
|
||||
|
||||
if (topicId) {
|
||||
args.topic_id = topicId;
|
||||
}
|
||||
|
||||
if (postId) {
|
||||
args.post_id = postId;
|
||||
}
|
||||
|
||||
const cacheKey = `${args.composer_action}${args.topic_id}${args.post_id}`;
|
||||
|
||||
const processMessages = (messages) => {
|
||||
let messages;
|
||||
if (_messagesCache.cacheKey === cacheKey) {
|
||||
messages = _messagesCache.messages;
|
||||
} else {
|
||||
messages = await this.composer.store.find("composer-message", args);
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
_messagesCache = { messages, cacheKey };
|
||||
}
|
||||
|
||||
// Checking composer messages on replies can give us a list of links to check for
|
||||
// duplicates
|
||||
if (messages.extras && messages.extras.duplicate_lookup) {
|
||||
if (messages.extras?.duplicate_lookup) {
|
||||
this.addLinkLookup(new LinkLookup(messages.extras.duplicate_lookup));
|
||||
}
|
||||
|
||||
this.set("checkedMessages", true);
|
||||
const queuedForTyping = this.queuedForTyping;
|
||||
messages.forEach((msg) =>
|
||||
msg.wait_for_typing
|
||||
? queuedForTyping.addObject(msg)
|
||||
: this.send("popup", msg)
|
||||
);
|
||||
};
|
||||
|
||||
if (_messagesCache.cacheKey === cacheKey) {
|
||||
processMessages(_messagesCache.messages);
|
||||
for (const msg of messages) {
|
||||
if (msg.wait_for_typing) {
|
||||
this.queuedForTyping.addObject(msg);
|
||||
} else {
|
||||
composer.store.find("composer-message", args).then((messages) => {
|
||||
_messagesCache = { messages, cacheKey };
|
||||
processMessages(messages);
|
||||
this.popup(msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
closeMessage(message, event) {
|
||||
event?.preventDefault();
|
||||
this._removeMessage(message);
|
||||
}
|
||||
|
||||
@action
|
||||
hideMessage(message) {
|
||||
this._removeMessage(message);
|
||||
|
||||
// kind of hacky but the visibility depends on this
|
||||
this.messagesByTemplate[message.templateName] = undefined;
|
||||
}
|
||||
|
||||
@action
|
||||
popup(message) {
|
||||
if (!this.messagesByTemplate[message.templateName]) {
|
||||
this.messages.pushObject(message);
|
||||
this.set("messageCount", this.messages.length);
|
||||
this.messagesByTemplate[message.templateName] = message;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
shareModal() {
|
||||
const { topic } = this.composer;
|
||||
const controller = showModal("share-topic", { model: topic.category });
|
||||
|
||||
controller.setProperties({
|
||||
allowInvites:
|
||||
topic.details.can_invite_to &&
|
||||
!topic.archived &&
|
||||
!topic.closed &&
|
||||
!topic.deleted,
|
||||
topic,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@action
|
||||
switchPM(message) {
|
||||
this.composer.set("action", "privateMessage");
|
||||
this.composer.set("targetRecipients", message.reply_username);
|
||||
this._removeMessage(message);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue