Ticket 4665 - Emoji Picker (#5157)

*  #4665  Added EmojiPicker

Work primarily by @broernr-de and @harrison on pre-release.mattermost.com

* Final fixes to handle custom emojis from internal review and single merge error

* ESLint fixes

* CSS changes and other code to support emoji picker in reply window

* Fix for file upload and emoji picker icon positions on post and comment.

RHS emoji picker appearing see-through at this time.

* Fix for two ESLint issues.

* covered most of feedback:
RHS emoji picker looks correct color-wise
RHS emoji picker dynamically positions against height of thread size (post + reply messages)
escape closes emoji window
search box focused on open

ESLint fixes against other files
oversized emoji preview fixes

* Adding in 'outside click' eventing to dismiss the emoji window

* Changing some formatting to fix mismatch between my local eslant rules and jenkins.

* adding alternative import method due to downstream testing errors

* yet another attempt to retain functionality and pass tests - skipping import of browser store

* fix for feedback items 5 and 7:
* move search to float on top with stylistic changes
* whitespace in the header (+1 squashed commit)
Squashed commits:
[6a26d32] changes that address items
1, 2, 6, 8, and 9 of latest feedback

* Fix for attachment preview location on mobile

* Fix for latest rounds of feedback

* fixing eslint issue

* making emojipicker sprite based, fixing alignments

* Fix for emoji quality, fixing some behavior (hover background and cursor settings)
undoing config changes

* Preview feature for emojis

* Adjustments to config file, and changing layout/design of attachment and emoji icon.

* manual revert from master branch for config.json

* reverting paperclip and fixing alignments.  Additionally fixing inadvertent display of picker on mobile.

* CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working

* Made suggested changes by jwilander except for jQuery removal

* Adding hover for both icons

* removal of some usages of jQuery

* Fix for two layout issues on IE11/Edge

* UI improvements for emoji picker

* Fix for many minor display issues

* fix for additional appearance items

* fix to two minor UI items

* A little extra padding for IE11

* fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error

* fixes some display issues on firefox

* fix for uneven sides of emojis

* fix for eslint issues that I didn't introduce

* fix for missing bottom edge of RHS emojipicker.  also fixing text overlapping icons on text area (including RHS)

* Update "emoji selector" to "emoji picker"

* changes for code review
- removal of ..getDOMNode
- use sprite imagery for emoji preview
- remove lastBlurAt from state as it wasn't used

* fixes for:
- fake custom emoji preview in picker
- RHS scrollbar on preview

* fix for minor alignment of preview emoji

1 files changed, 48 insertions, 1 deletions

diff --git a/webapp/stores/emoji_store.jsx b/webapp/stores/emoji_store.jsx
index 212583ea8..444a27c72 100644
--- a/webapp/stores/emoji_store.jsx
+++ b/webapp/stores/emoji_store.jsx
@@ -5,12 +5,13 @@ import Client from '../client/web_client.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import Constants from 'utils/constants.jsx';
 import EventEmitter from 'events';
-
 import * as Emoji from 'utils/emoji.jsx';
 
 const ActionTypes = Constants.ActionTypes;
 
 const CHANGE_EVENT = 'changed';
+const RECENT_EMOJI_KEY = 'recentEmojis';
+const MAXIMUM_RECENT_EMOJI = 27;
 
 // Wrap the contents of the store so that we don't need to construct an ES6 map where most of the content
 // (the system emojis) will never change. It provides the get/has functions of a map and an iterator so
@@ -139,6 +140,48 @@ class EmojiStore extends EventEmitter {
         return this.map.get(name);
     }
 
+    addRecentEmoji(rawAlias) {
+        const recentEmojis = this.getRecentEmojis();
+
+        const alias = rawAlias.split(':').join('');
+
+        let emoji = this.getCustomEmojiMap().get(alias);
+
+        if (!emoji) {
+            const emojiIndex = Emoji.EmojiIndicesByAlias.get(alias);
+            emoji = Emoji.Emojis[emojiIndex];
+        }
+
+        if (!emoji) {
+            // something is wrong, so we return
+            return;
+        }
+
+        // odd workaround to the lack of array.findLastIndex - reverse looping & splice
+        for (let i = recentEmojis.length - 1; i >= 0; i--) {
+            if ((emoji.name && recentEmojis[i].name === emoji.name) ||
+                (emoji.filename && recentEmojis[i].filename === emoji.filename)) {
+                recentEmojis.splice(i, 1);
+                break;
+            }
+        }
+        recentEmojis.push(emoji);
+
+        // cut off the _top_ if it's over length (since new are added to end)
+        if (recentEmojis.length > MAXIMUM_RECENT_EMOJI) {
+            recentEmojis.splice(0, recentEmojis.length - MAXIMUM_RECENT_EMOJI);
+        }
+        localStorage.setItem(RECENT_EMOJI_KEY, JSON.stringify(recentEmojis));
+    }
+
+    getRecentEmojis() {
+        const result = JSON.parse(localStorage.getItem(RECENT_EMOJI_KEY));
+        if (!result) {
+            return [];
+        }
+        return result;
+    }
+
     hasUnicode(codepoint) {
         return Emoji.EmojiIndicesByUnicode.has(codepoint);
     }
@@ -174,6 +217,10 @@ class EmojiStore extends EventEmitter {
             this.removeCustomEmoji(action.id);
             this.emitChange();
             break;
+        case ActionTypes.EMOJI_POSTED:
+            this.addRecentEmoji(action.alias);
+            this.emitChange();
+            break;
         }
     }
 }