Fix: Size of the single emoji in chat along with updated Emoji Regex by mananjadhav · Pull Request #5039 · Expensify/App

mananjadhav · 2021-09-02T23:26:13Z

@deetergp I've updated my changes with the regex changes and a unit test to verify all the emojis in our dataset.

Details

Changed isSingleEmoji function
Replaced Emoji Regex

Fixed Issues

$ #4543

Tests

Tested different variants of the Emojis with single length and surrogate pairs
Tested emojis with skin tone.
Tested with composite emojis such as Family
Tested text-based Emojis

QA Steps

Go to any Chat
Enter one emoji per message.
Size of the Emoji should be larger similar to other apps like Whatsapp, etc.
It should work for all variations.

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

mananjadhav · 2021-09-02T23:28:50Z

@deetergp I've added my changes and I am currently testing the coverage of the regex. The initial results look good with few exceptions.

… regex

mananjadhav · 2021-09-08T12:44:49Z

@deetergp PR updated. Please review.

mananjadhav · 2021-09-09T00:19:21Z

@deetergp PR updated

deetergp

Looks good, thanks for the changes!

marcaaron · 2021-09-10T16:55:46Z

+ * Get the unicode code of an emoji in base 16.
+ *
+ * @name emojiUnicode
+ * @function


I think we can make these docs more consistent with the others in our app. Notably, @name and @function + the repeated name before the description. We won't find these anywhere so I think better to not use them.

Okay noted.

marcaaron · 2021-09-10T16:55:52Z

@@ -0,0 +1,38 @@
+/* eslint radix: ["error", "as-needed"] */


What are we silencing here?

parseInt also accepts a second param radix, which I've marked as-needed.

Why not just add the radix?

marcaaron · 2021-09-10T16:56:28Z

+    }
+
+    if (input.length === 1) {
+        return input.charCodeAt(0).toString().split(' ').map(val => parseInt(val).toString(16))


Please use _.map()

marcaaron · 2021-09-10T16:56:53Z

+    for (let i = 0; i < input.length; i++) {
+        if (input.charCodeAt(i) >= 0xd800 && input.charCodeAt(i) <= 0xdbff) { // high surrogate
+            if (input.charCodeAt(i + 1) >= 0xdc00 && input.charCodeAt(i + 1) <= 0xdfff) {
+                // low surrogate


What is a surrogate?

Some of the emojis are stored as two Unicodes. Hence we call each of the Unicode as high surrogate and low surrogate

https://thekevinscott.com/emojis-in-javascript/

Got it thanks. I'm not really familiar with this language - could we maybe add a comment that briefly explains what we mean when we refer to a "surrogate"?

marcaaron · 2021-09-10T16:57:30Z

+            pairs.push(input.charCodeAt(i));
+        }
+    }
+    return pairs.map(val => parseInt(val).toString(16)).join(' ');


marcaaron · 2021-09-10T16:58:35Z

 import {showBankAccountFormValidationError, showBankAccountErrorModal} from './actions/BankAccounts';
 import {translateLocal} from './translate';
+import getEmojiUnicode from './Emoji/getEmojiUnicode';
+import trimEmojiUnicode from './Emoji/trimEmojiUnicode';


Probably these could be combined into a single file called EmojiUtils.js or something? We don't enforce one file per method.

marcaaron · 2021-09-10T16:59:45Z

-    return message.length === matchedEmoji.length;
+    const matchedUnicode = getEmojiUnicode(matchedEmoji);
+    const currentMessageUnicode = trimEmojiUnicode(getEmojiUnicode(message));
+    return matchedUnicode === currentMessageUnicode;


I'm not sure when isSingleEmoji() was added - but it doesn't belongs in this file. ValidationUtils is for validating user input into a form field not to check if something is an emoji. Let's please move it somewhere else.

Okay should I move it to EmojiUtils, that I'll create for the above functions?

That works for me! Thanks!

…ngle-emoji-size

….map

…ngle-emoji-size

…aised bug

mananjadhav · 2021-09-10T20:49:22Z

@marcaaron PR updated.

deetergp

Looking good, thanks for the changes!

marcaaron · 2021-09-10T23:21:26Z

@@ -0,0 +1,76 @@
+/* eslint radix: ["error", "as-needed"] */


I think we can just add the radix here.. is it something other than 10? That's what we do everywhere else.

Well, with Emojis you can’t be sure that the you’ll get an integer with base 10. This could be because copy pasting emojis from other apps. If you see the code, we are splitting a string and it could start with 0x too.

Added radix.

OSBotify · 2021-09-13T19:51:14Z

🚀 Deployed to staging by @marcaaron in version: 1.0.97-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

botify · 2021-09-15T20:05:16Z

This has been deployed to production and is now subject to a 7-day regression period.
If no regressions arise, payment will be issued on 2021-09-22. 🎊

OSBotify · 2021-09-15T20:25:24Z

🚀 Deployed to production by @francoisl in version: 1.0.98-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

mananjadhav added 3 commits September 3, 2021 04:26

fix(emoji-size-in-chat): Moved regex to a different function

f0273ce

fix(emoji-size-in-chat): Convert emoji to Unicode and compare

41d5ecf

fix(emoji-size-in-chat): Replaced Emoji Regex

800e002

mananjadhav added 5 commits September 8, 2021 03:47

fix(emoji-size-in-chat): Handled skin-tone support

8fe203d

fix(emoji-size-in-chat): wip: Added test for emoji regex

1da613a

fix(emoji-size-in-chat): Update emoji regex test and pending emoji range

87a29b2

fix(emoji-size-in-chat): Added skintone emoji in test

1f6354b

fix(emoji-size-in-chat): Hardcoded emoji variants to test against the…

c07557b

… regex

mananjadhav changed the title ~~Fix single emoji size in chat~~ Fix: Size of the single emoji in chat along with updated Emoji Regex Sep 8, 2021

fix(emoji-size-in-chat): Removed unused import

cb3a584

mananjadhav marked this pull request as ready for review September 8, 2021 12:32

mananjadhav requested a review from a team as a code owner September 8, 2021 12:32

MelvinBot requested review from marcaaron and removed request for a team September 8, 2021 12:32

deetergp requested changes Sep 8, 2021

View reviewed changes

Comment thread src/libs/Emoji/getEmojiUnicode.js Outdated

Comment thread src/CONST.js Outdated

Comment thread src/libs/Emoji/getEmojiUnicode.js Outdated

mananjadhav added 2 commits September 9, 2021 05:42

fix(emoji-size-in-chat): Replace function with inline regex

c6e1d9a

fix(emoji-size-in-chat): Merged function into one

09a56b5

deetergp previously approved these changes Sep 9, 2021

View reviewed changes

marcaaron requested changes Sep 10, 2021

View reviewed changes

mananjadhav added 6 commits September 10, 2021 23:24

Merge branch 'main' of https://github.com/mananjadhav/App into fix/si…

73655c7

…ngle-emoji-size

fix(emoji-size-in-chat): Merged all Emoji functions into EmojiUtils

031191e

fix(emoji-size-in-chat): Added comments on surrogate and changed to _…

b3322b6

….map

fix(emoji-size-in-chat): Updated test documentation

09babe0

Merge branch 'main' of https://github.com/mananjadhav/App into fix/si…

5d75570

…ngle-emoji-size

fix(emoji-size-in-chat): Added additional skull emoji from previous r…

22ca1d7

…aised bug

mananjadhav dismissed deetergp’s stale review via 22ca1d7 September 10, 2021 20:48

mananjadhav requested a review from marcaaron September 10, 2021 20:49

deetergp previously approved these changes Sep 10, 2021

View reviewed changes

marcaaron reviewed Sep 10, 2021

View reviewed changes

marcaaron assigned mananjadhav Sep 10, 2021

fix(emoji-size-in-chat): Added radix to parseInt

52d9827

mananjadhav dismissed deetergp’s stale review via 52d9827 September 11, 2021 06:59

mananjadhav requested a review from marcaaron September 11, 2021 07:00

marcaaron approved these changes Sep 13, 2021

View reviewed changes

marcaaron merged commit 04bf0ce into Expensify:main Sep 13, 2021

OSBotify mentioned this pull request Sep 13, 2021

Deploy Checklist: New Expensify 2021-09-13 #5224

Closed

14 tasks

Conversation

mananjadhav commented Sep 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Uh oh!

mananjadhav commented Sep 2, 2021

Uh oh!

mananjadhav commented Sep 8, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mananjadhav commented Sep 9, 2021

Uh oh!

deetergp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mananjadhav commented Sep 10, 2021

Uh oh!

deetergp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mananjadhav Sep 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Sep 13, 2021

Uh oh!

botify commented Sep 15, 2021

Uh oh!

OSBotify commented Sep 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

mananjadhav commented Sep 2, 2021 •

edited

Loading

mananjadhav Sep 11, 2021 •

edited

Loading