From 02ecaf8de912590dc9d9a4ab30a4a2f6d45a77e9 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Sun, 1 Sep 2019 09:03:28 +0900
Subject: [PATCH] Rebuild emojis when emojis change and use props.deviceWidth
 (#3208)

---
 app/components/emoji_picker/emoji_picker.js      |  6 +++---
 app/components/emoji_picker/emoji_picker.test.js | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/components/emoji_picker/emoji_picker.js b/app/components/emoji_picker/emoji_picker.js
index 0b54b7d49..220ce6f73 100644
--- a/app/components/emoji_picker/emoji_picker.js
+++ b/app/components/emoji_picker/emoji_picker.js
@@ -106,14 +106,14 @@ export default class EmojiPicker extends PureComponent {
 
         if (this.props.emojis !== nextProps.emojis) {
             this.rebuildEmojis = true;
-            this.deviceWidth = nextProps.deviceWidth;
+            this.setRebuiltEmojis();
         }
     }
 
-    setRebuiltEmojis = (searchBarAnimationComplete) => {
+    setRebuiltEmojis = (searchBarAnimationComplete = true) => {
         if (this.rebuildEmojis && searchBarAnimationComplete) {
             this.rebuildEmojis = false;
-            const emojis = this.renderableEmojis(this.props.emojisBySection, this.deviceWidth);
+            const emojis = this.renderableEmojis(this.props.emojisBySection, this.props.deviceWidth);
             this.setState({emojis});
         }
     }
diff --git a/app/components/emoji_picker/emoji_picker.test.js b/app/components/emoji_picker/emoji_picker.test.js
index 3f8511a13..c9f2233f4 100644
--- a/app/components/emoji_picker/emoji_picker.test.js
+++ b/app/components/emoji_picker/emoji_picker.test.js
@@ -59,19 +59,17 @@ describe('components/emoji_picker/EmojiPicker', () => {
         expect(instance.rebuildEmojis).toBe(true);
     });
 
-    test('should set rebuildEmojis to true and new deviceWidth when emojis change', () => {
+    test('should rebuild emojis emojis when emojis change', () => {
         const wrapper = shallowWithIntl(<EmojiPicker {...baseProps}/>);
         const instance = wrapper.instance();
+        const renderableEmojis = jest.spyOn(instance, 'renderableEmojis');
 
         expect(instance.rebuildEmojis).toBe(undefined);
-        expect(instance.deviceWidth).toBe(undefined);
 
-        const newDeviceWidth = baseProps.deviceWidth * 2;
         const newEmojis = [{}];
-        wrapper.setProps({deviceWidth: newDeviceWidth, emojis: newEmojis});
+        wrapper.setProps({emojis: newEmojis});
 
-        expect(instance.rebuildEmojis).toBe(true);
-        expect(instance.deviceWidth).toBe(newDeviceWidth);
+        expect(renderableEmojis).toHaveBeenCalledWith(baseProps.emojisBySection, baseProps.deviceWidth);
     });
 
     test('should set rebuilt emojis when rebuildEmojis is true and searchBarAnimationComplete is true', () => {