Add frequently used emojis back to awards menu

Thanks @filipa for the shout`

Conflicts:
	spec/javascripts/awards_handler_spec.js

app/assets/javascripts/awards_handler.js

@@ -47,12 +47,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">
@@ -142,9 +142,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();
@@ -167,11 +164,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>
@@ -459,19 +466,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 */
 
-require('es6-promise').polyfill();
+import promisePolyfill from 'es6-promise';
+import Cookies from 'js-cookie';
+import AwardsHandler from '~/awards_handler';
 
-const AwardsHandler = require('~/awards_handler');
+promisePolyfill.polyfill();
 
 (function() {
   var awardsHandler, lazyAssert, urlRoot, openAndWaitForEmojiMenu;
@@ -210,8 +212,8 @@ const AwardsHandler = require('~/awards_handler');
             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}`);
           });
       });
     });
@@ -234,8 +236,8 @@ const AwardsHandler = require('~/awards_handler');
       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) {
@@ -249,7 +251,46 @@ const AwardsHandler = require('~/awards_handler');
           })
           .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}`);
           });
       });
     });