From cff427d710b02f4634d570ab5e0632cd256362da Mon Sep 17 00:00:00 2001
From: Jackie Luo <jacquelineluo95@gmail.com>
Date: Thu, 24 Mar 2016 11:57:49 -0700
Subject: [PATCH] fix(composer-emoji): Return if no search results are found

---
 .../composer-emoji/lib/emoji-button-popover.jsx      | 12 ++++++++----
 .../composer-emoji/lib/missing-emoji.js              |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/internal_packages/composer-emoji/lib/emoji-button-popover.jsx b/internal_packages/composer-emoji/lib/emoji-button-popover.jsx
index 3b978ce50..6ca9458c4 100644
--- a/internal_packages/composer-emoji/lib/emoji-button-popover.jsx
+++ b/internal_packages/composer-emoji/lib/emoji-button-popover.jsx
@@ -128,6 +128,8 @@ class EmojiButtonPopover extends React.Component {
       }
       categoryNames = ["Frequently Used"].concat(categoryNames);
     }
+    // Calculates where each category should be (variable because Frequently
+    // Used may or may not be present)
     for (const name of categoryNames) {
       categoryPositions[name] = {top: 0, bottom: 0};
     }
@@ -165,6 +167,7 @@ class EmojiButtonPopover extends React.Component {
   }
 
   findSearchMatches(searchValue) {
+    // TODO: Find matches for aliases, too.
     const searchMatches = [];
     for (const category of Object.keys(categorizedEmojiList)) {
       categorizedEmojiList[category].forEach((emojiName) => {
@@ -188,13 +191,13 @@ class EmojiButtonPopover extends React.Component {
   calcEmojiByPosition = (position) => {
     for (const category in this.state.categoryPositions) {
       if (this.state.categoryPositions.hasOwnProperty(category)) {
-        const LEFT_PADDING = 8;
-        const RIGHT_PADDING = 204;
+        const LEFT_BOUNDARY = 8;
+        const RIGHT_BOUNDARY = 204;
         const EMOJI_WIDTH = 24.5;
         const EMOJI_HEIGHT = 24;
         const EMOJI_PER_ROW = 8;
-        if (position.x >= LEFT_PADDING &&
-            position.x <= RIGHT_PADDING &&
+        if (position.x >= LEFT_BOUNDARY &&
+            position.x <= RIGHT_BOUNDARY &&
             position.y >= this.state.categoryPositions[category].top &&
             position.y <= this.state.categoryPositions[category].bottom) {
           const x = Math.round((position.x + 5) / EMOJI_WIDTH);
@@ -264,6 +267,7 @@ class EmojiButtonPopover extends React.Component {
     position.y += 48;
     ctx.font = "32px Arial";
     ctx.fillStyle = 'black';
+    if (this.state.categorizedEmoji[category].length === 0) return;
     this.state.categorizedEmoji[category].forEach((emojiName, j) => {
       if (missingEmojiList.indexOf(emojiName) === -1) {
         const emojiChar = emoji.get(emojiName);
diff --git a/internal_packages/composer-emoji/lib/missing-emoji.js b/internal_packages/composer-emoji/lib/missing-emoji.js
index 19539d526..82a6156e7 100644
--- a/internal_packages/composer-emoji/lib/missing-emoji.js
+++ b/internal_packages/composer-emoji/lib/missing-emoji.js
@@ -15,6 +15,7 @@ export default missingEmojiList = [
   'baseball',
   'airplane',
   'envelope',
+  'email',
   'scissors',
   'black_nib',
   'pencil2',