PLT-7267 Refactored tracking of recent emojis to hide deleted emojis (#7102)

* Fixed local ESLint error

* PLT-7267 Refactored tracking of recent emojis to hide deleted emojis

webapp/components/create_comment/create_comment.jsx

@@ -31,7 +31,7 @@ import {browserHistory} from 'react-router/es6';
 const ActionTypes = Constants.ActionTypes;
 const KeyCodes = Constants.KeyCodes;
 
-import {REACTION_PATTERN, EMOJI_PATTERN} from 'components/create_post.jsx';
+import {REACTION_PATTERN} from 'components/create_post.jsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -87,9 +87,13 @@ export default class CreateComment extends React.Component {
         if (this.state.message === '') {
             this.setState({message: ':' + emojiAlias + ': '});
         } else {
-            //check whether there is already a blank at the end of the current message
-            const newMessage = (/\s+$/.test(this.state.message)) ?
-            this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
+            // Check whether there is already a blank at the end of the current message
+            let newMessage;
+            if ((/\s+$/).test(this.state.message)) {
+                newMessage = this.state.message + ':' + emojiAlias + ': ';
+            } else {
+                newMessage = this.state.message + ' :' + emojiAlias + ': ';
+            }
 
             this.setState({message: newMessage});
         }
@@ -230,14 +234,6 @@ export default class CreateComment extends React.Component {
 
         GlobalActions.emitUserCommentedEvent(post);
 
-        const emojiResult = post.message.match(EMOJI_PATTERN);
-        if (emojiResult) {
-            // parse message and emit emoji event
-            emojiResult.forEach((emoji) => {
-                PostActions.emitEmojiPosted(emoji);
-            });
-        }
-
         PostActions.createPost(post, this.state.fileInfos);
 
         this.setState({

webapp/components/create_post.jsx

@@ -41,7 +41,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const REACTION_PATTERN = /^(\+|-):([^:\s]+):\s*$/;
-export const EMOJI_PATTERN = /:[A-Za-z-_0-9]*:/g;
 
 export default class CreatePost extends React.Component {
     constructor(props) {
@@ -268,14 +267,6 @@ export default class CreatePost extends React.Component {
 
         GlobalActions.emitUserPostedEvent(post);
 
-        // parse message and emit emoji event
-        const emojiResult = post.message.match(EMOJI_PATTERN);
-        if (emojiResult) {
-            emojiResult.forEach((emoji) => {
-                PostActions.emitEmojiPosted(emoji);
-            });
-        }
-
         PostActions.createPost(post, this.state.fileInfos,
             () => GlobalActions.postListScrollChange(true),
             (err) => {

webapp/components/emoji_picker/components/emoji_picker_category.jsx

@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types';
-
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import PropTypes from 'prop-types';
 import React from 'react';
 
 export default class EmojiPickerCategory extends React.Component {

webapp/components/emoji_picker/emoji_picker.jsx

@@ -169,45 +169,57 @@ export default class EmojiPicker extends React.Component {
     }
 
     renderCategory(category, isLoaded, filter) {
-        const items = [];
-        let indices = [];
-        let recentEmojis = [];
-
+        let emojis;
         if (category === 'recent') {
-            recentEmojis = EmojiStore.getRecentEmojis();
-            indices = [...Array(recentEmojis.length).keys()];
+            const recentEmojis = [...EmojiStore.getRecentEmojis()];
 
-            // reverse indices so most recently added is first
-            indices.reverse();
+            // Reverse so most recently added is first
+            recentEmojis.reverse();
+
+            emojis = recentEmojis.filter((name) => {
+                return EmojiStore.has(name);
+            }).map((name) => {
+                return EmojiStore.get(name);
+            });
         } else {
-            indices = Emoji.EmojiIndicesByCategory.get(category) || [];
+            const indices = Emoji.EmojiIndicesByCategory.get(category) || [];
+
+            emojis = indices.map((index) => Emoji.Emojis[index]);
+
+            if (category === 'custom') {
+                emojis = emojis.concat([...EmojiStore.getCustomEmojiMap().values()]);
+            }
         }
 
-        for (const index of indices) {
-            let emoji = {};
+        // Apply filter
+        emojis = emojis.filter((emoji) => {
+            if (emoji.name) {
+                return emoji.name.indexOf(filter) !== -1;
+            }
+
+            for (const alias of emoji.aliases) {
+                if (alias.indexOf(filter) !== -1) {
+                    return true;
+                }
+            }
+
+            return false;
+        });
+
+        const items = emojis.map((emoji) => {
+            const name = emoji.name || emoji.aliases[0];
+            let key;
             if (category === 'recent') {
-                emoji = recentEmojis[index];
+                key = 'system_recent_' + name;
+            } else if (category === 'custom' && emoji.name) {
+                key = 'custom_' + name;
             } else {
-                emoji = Emoji.Emojis[index];
-            }
-            if (filter) {
-                let matches = false;
-
-                for (const alias of emoji.aliases || [...emoji.name]) {
-                    if (alias.indexOf(filter) !== -1) {
-                        matches = true;
-                        break;
-                    }
-                }
-
-                if (!matches) {
-                    continue;
-                }
+                key = 'system_' + name;
             }
 
-            items.push(
+            return (
                 <EmojiPickerItem
-                    key={'system_' + (category === 'recent' ? 'recent_' : '') + (emoji.name || emoji.aliases[0])}
+                    key={key}
                     emoji={emoji}
                     category={category}
                     isLoaded={isLoaded}
@@ -217,30 +229,7 @@ export default class EmojiPicker extends React.Component {
                     onItemUnmount={this.handleItemUnmount}
                 />
             );
-        }
-
-        if (category === 'custom') {
-            const customEmojis = EmojiStore.getCustomEmojiMap().values();
-
-            for (const emoji of customEmojis) {
-                if (filter && emoji.name.indexOf(filter) === -1) {
-                    continue;
-                }
-
-                items.push(
-                    <EmojiPickerItem
-                        key={'custom_' + emoji.name}
-                        emoji={emoji}
-                        category={category}
-                        onItemOver={this.handleItemOver}
-                        onItemOut={this.handleItemOut}
-                        onItemClick={this.handleItemClick}
-                        onItemUnmount={this.handleItemUnmount}
-
-                    />
-                );
-            }
-        }
+        });
 
         // Only render the header if there's any visible items
         let header = null;