Add frequently used emojis back to awards menu

Thanks @filipa for the shout`

app/assets/javascripts/awards_handler.js

@@ -45,12 +45,12 @@ function buildCategoryMap() {
   });
 }
 
-function renderCategory(name, emojiList) {
+function renderCategory(name, emojiList, opts = {}) {
   return `
     <h5 class="emoji-menu-title">
       ${name}
     </h5>
-    <ul class="clearfix emoji-menu-list">
+    <ul class="clearfix emoji-menu-list ${opts.menuListClass}">
       ${emojiList.map(emojiName => `
         <li class="emoji-menu-list-item">
           <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
@@ -140,9 +140,6 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
       const $createdMenu = $('.emoji-menu');
       $addBtn.removeClass('is-loading');
       this.positionMenu($createdMenu, $addBtn);
-      if (!this.frequentEmojiBlockRendered) {
-        this.renderFrequentlyUsedBlock();
-      }
       return setTimeout(() => {
         $createdMenu.addClass('is-visible');
         $('#emoji_search').focus();
@@ -165,11 +162,21 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
   const emojisInCategory = categoryMap[categoryNameKey];
   const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
 
+  // Render the frequently used
+  const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
+  let frequentlyUsedCatgegory = '';
+  if (frequentlyUsedEmojis.length > 0) {
+    frequentlyUsedCatgegory = renderCategory('Frequently used', frequentlyUsedEmojis, {
+      menuListClass: 'frequent-emojis',
+    });
+  }
+
   const emojiMenuMarkup = `
     <div class="emoji-menu">
       <input type="text" name="emoji_search" id="emoji_search" value="" class="emoji-search search-input form-control" placeholder="Search emoji" />
 
       <div class="emoji-menu-content">
+        ${frequentlyUsedCatgegory}
         ${firstCategory}
       </div>
     </div>
@@ -457,19 +464,6 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj
   return _.compact(_.uniq(frequentlyUsedEmojis));
 };
 
-AwardsHandler.prototype.renderFrequentlyUsedBlock = function renderFrequentlyUsedBlock() {
-  if (Cookies.get('frequently_used_emojis')) {
-    const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-    const ul = $('<ul class="clearfix emoji-menu-list frequent-emojis">');
-    for (let i = 0, len = frequentlyUsedEmojis.length; i < len; i += 1) {
-      const emoji = frequentlyUsedEmojis[i];
-      $(`.emoji-menu-content [data-name="${emoji}"]`).closest('li').clone().appendTo(ul);
-    }
-    $('.emoji-menu-content').prepend(ul).prepend($('<h5>').text('Frequently used'));
-  }
-  this.frequentEmojiBlockRendered = true;
-};
-
 AwardsHandler.prototype.setupSearch = function setupSearch() {
   this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => {
     const term = $(e.target).val().trim();

changelogs/unreleased/add-frequently-used-emojis-back-to-menu.yml

+---
+title: Add frequently used emojis back to awards menu
+merge_request:
+author:

spec/javascripts/awards_handler_spec.js

 /* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, max-len */
 
 import promisePolyfill from 'es6-promise';
+import Cookies from 'js-cookie';
 import AwardsHandler from '~/awards_handler';
 
 promisePolyfill.polyfill();
@@ -208,8 +209,8 @@ promisePolyfill.polyfill();
             expect($('[data-name=alien]').is(':visible')).toBe(true);
           })
           .then(done)
-          .catch(() => {
-            done.fail('Failed to open and build emoji menu');
+          .catch((err) => {
+            done.fail(`Failed to open and build emoji menu: ${err.message}`);
           });
       });
     });
@@ -232,8 +233,8 @@ promisePolyfill.polyfill();
       it('should add selected emoji to awards block', function(done) {
         return openEmojiMenuAndAddEmoji()
           .then(done)
-          .catch(() => {
-            done.fail('Failed to open and build emoji menu');
+          .catch((err) => {
+            done.fail(`Failed to open and build emoji menu: ${err.message}`);
           });
       });
       it('should remove already selected emoji', function(done) {
@@ -247,7 +248,46 @@ promisePolyfill.polyfill();
           })
           .then(done)
           .catch((err) => {
-            done.fail('Failed to open and build emoji menu');
+            done.fail(`Failed to open and build emoji menu: ${err.message}`);
+          });
+      });
+    });
+
+    describe('frequently used emojis', function() {
+      beforeEach(() => {
+        // Clear it out
+        Cookies.set('frequently_used_emojis', '');
+      });
+
+      it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', function(done) {
+        return openAndWaitForEmojiMenu()
+          .then(() => {
+            const emojiMenu = document.querySelector('.emoji-menu');
+            Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), (title) => {
+              expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
+            });
+          })
+          .then(done)
+          .catch((err) => {
+            done.fail(`Failed to open and build emoji menu: ${err.message}`);
+          });
+      });
+
+      it('should have any frequently used section when there are frequently used emojis', function(done) {
+        awardsHandler.addEmojiToFrequentlyUsedList('8ball');
+
+        return openAndWaitForEmojiMenu()
+          .then(() => {
+            const emojiMenu = document.querySelector('.emoji-menu');
+            const hasFrequentlyUsedHeading = Array.prototype.some.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title =>
+              title.textContent.trim().toLowerCase() === 'frequently used'
+            );
+
+            expect(hasFrequentlyUsedHeading).toBe(true);
+          })
+          .then(done)
+          .catch((err) => {
+            done.fail(`Failed to open and build emoji menu: ${err.message}`);
           });
       });
     });