From 933f6780ee708d4dca12f41887ea55e4e7e71059 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Tue, 11 Jan 2022 00:00:47 +0100
Subject: [PATCH] FIX: Update recent emoji list when selecting from it (#15514)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…after you re-open the modal or select another emoji.

Reason:
Even the most used emoji would be knocked off the list after a while, if you use any emoji outside the recent. Consider the sequence:

✅, 😃, ✅ (from recent), 😀, ✅ (from recent), 😛, ✅ (from recent), 😎, ✅ (from recent), and so on

With the previous logic, the check mark emoji would leave the list, even though it used constantly and (and the time of removal) would the the second most recent used emoji.

---

It doesn't update the list when you use the recent list so that you can click an emoji repeatedly and it doesn't shift from under your mouse cursor.
---
 .../discourse/app/components/emoji-picker.js  | 15 ++++++----
 .../tests/acceptance/emoji-picker-test.js     | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index 3c0f3c85468..a9cb0df8607 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -43,7 +43,6 @@ export default Component.extend({
     this._super(...arguments);
 
     this.set("customEmojis", customEmojis());
-    this.set("recentEmojis", this.emojiStore.favorites);
     this.set("selectedDiversity", this.emojiStore.diversity);
 
     if ("IntersectionObserver" in window) {
@@ -80,6 +79,7 @@ export default Component.extend({
   @action
   onShow() {
     this.set("isLoading", true);
+    this.set("recentEmojis", this.emojiStore.favorites);
 
     schedule("afterRender", () => {
       document.addEventListener("click", this.handleOutsideClick);
@@ -198,9 +198,9 @@ export default Component.extend({
 
     this.emojiSelected(code);
 
-    if (!img.parentNode.parentNode.classList.contains("recent")) {
-      this._trackEmojiUsage(code);
-    }
+    this._trackEmojiUsage(code, {
+      refresh: !img.parentNode.parentNode.classList.contains("recent"),
+    });
 
     if (this.site.isMobileDevice) {
       this.onClose();
@@ -244,9 +244,12 @@ export default Component.extend({
     }
   },
 
-  _trackEmojiUsage(code) {
+  _trackEmojiUsage(code, options = {}) {
     this.emojiStore.track(code);
-    this.set("recentEmojis", this.emojiStore.favorites.slice(0, 10));
+
+    if (options.refresh) {
+      this.set("recentEmojis", [...this.emojiStore.favorites]);
+    }
   },
 
   _replaceEmoji(code) {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js b/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
index 490ffac456d..2458bbcd6b0 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/emoji-picker-test.js
@@ -127,6 +127,35 @@ acceptance("EmojiPicker", function (needs) {
     );
   });
 
+  test("updates the recent list when selecting from it (after you close re-open it or select other emoji)", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await click("#topic-footer-buttons .btn.create");
+    await click("button.emoji.btn");
+    await click(`.emoji-picker-emoji-area img.emoji[title="sunglasses"]`);
+    await click(`.emoji-picker-emoji-area img.emoji[title="grinning"]`);
+
+    let recent = queryAll(".section.recent .section-group img.emoji");
+    assert.strictEqual(recent[0].title, "grinning");
+    assert.strictEqual(recent[1].title, "sunglasses");
+
+    await click(
+      `.section[data-section="recent"] .section-group img.emoji[title="sunglasses"]`
+    );
+
+    // The order is still the same
+    recent = queryAll(".section.recent .section-group img.emoji");
+    assert.strictEqual(recent[0].title, "grinning");
+    assert.strictEqual(recent[1].title, "sunglasses");
+
+    await click("button.emoji.btn");
+    await click("button.emoji.btn");
+
+    // but updates when you re-open
+    recent = queryAll(".section.recent .section-group img.emoji");
+    assert.strictEqual(recent[0].title, "sunglasses");
+    assert.strictEqual(recent[1].title, "grinning");
+  });
+
   test("emoji picker persists state", async function (assert) {
     await visit("/t/internationalization-localization/280");
     await click("#topic-footer-buttons .btn.create");