Fix frequently used emojis list doesn't get updated when adding emojis by typing emoji code with colon#18396
Conversation
… is added by emoji code and colon
|
@MonilBhavsar @fedirjh One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
Here is additional video showing the count is added correctly. Screen.Recording.2023-05-04.at.16.23.02.1.mov |
fedirjh
left a comment
There was a problem hiding this comment.
Over all looks good, left a suggestion to refactor addToFrequentlyUsedEmojis
Reviewer Checklist
Screenshots/VideosWebScreen.Recording.2023-05-06.at.2.34.03.AM.movMobile Web - ChromeScreen.Recording.2023-05-08.at.5.45.52.PM.movMobile Web - SafariScreen.Recording.2023-05-08.at.4.46.53.PM.movDesktopScreen.Recording.2023-05-06.at.2.30.40.AM.moviOSScreen.Recording.2023-05-06.at.2.35.33.AM.movAndroidScreen.Recording.2023-05-08.at.5.48.04.PM.mov |
|
@fedirjh Addressed the suggestion with a little bit differences and addition. We can't use the suggestion name as the emoji name as the suggestion is different. I also pass the |
| const frequentEmojiListOrdered = lodashOrderBy(mergedEmojisWithFrequent, ['count', 'lastUpdatedAt'], ['desc', 'desc']) | ||
| .slice(0, maxFrequentEmojiCount); |
There was a problem hiding this comment.
@bernhardoj Thanks for the update. While testing, I noticed that we missed the case where we select a new emoji from the emoji picker. The newly selected emoji should appear on the frequent list. However, the above changes do not account for that case. Therefore, we need to fix it. Here is a simple fix:
| const frequentEmojiListOrdered = lodashOrderBy(mergedEmojisWithFrequent, ['count', 'lastUpdatedAt'], ['desc', 'desc']) | |
| .slice(0, maxFrequentEmojiCount); | |
| let frequentEmojiListOrdered = lodashOrderBy(mergedEmojisWithFrequent, ['count', 'lastUpdatedAt'], ['desc', 'desc']); | |
| if (uniqueEmojisWithCounts.length === 1 && _.last(frequentEmojiListOrdered).name === uniqueEmojisWithCounts[0].name) { | |
| frequentEmojiListOrdered.splice(maxFrequentEmojiCount, 1); | |
| } else { | |
| frequentEmojiListOrdered = frequentEmojiListOrdered.slice(0, maxFrequentEmojiCount); | |
| } |
There was a problem hiding this comment.
It works fine for me though. Can you share your repro steps?
Screen.Recording.2023-05-06.at.09.00.57.mov
There was a problem hiding this comment.
@bernhardoj Your emojis should have count > 1 , because we are ordering the emojis by count, if the newly added is the last in the list , it will be removed , check explanation
emoji.mov
There was a problem hiding this comment.
I'm not aware the video I attached is a link. updated.
The emoji I add is a new emoji (the monkey emoji), not an emoji with count > 1
There was a problem hiding this comment.
Ah, I think I understand.
There was a problem hiding this comment.
My bad. That's what will happen with the new behavior. Updated my comment.
There was a problem hiding this comment.
which means with the new behavior, no matter how many times we insert the new emoji, it won't be added to the list (because the count is always 0).
I'm not sure if we're on the same page. Which count are you referring to? The current behavior is to extract emojis from the copy/pasted comment, group them by emoji name, and assign each emoji a count that corresponds to the number of occurrences in the comment. Then, we merge this list with the old frequently used emojis list.
There was a problem hiding this comment.
The count on the frequent emoji list. Let say all 24 emoji has count of 2. Then, we add a new emoji. Because it doesn't exist in the list, it will have a count of 1. With our new logic, we won't take the new emoji. The next time we add the same emoji, the count will still be 1 because it doesn't exist in the list.
There was a problem hiding this comment.
@bernhardoj That’s why I suggested these changes here , If the last emoji in the list is the inserted emoji then We shouldn’t remove it , and we remove the previous emoji.
There was a problem hiding this comment.
Updated to solve the issue. Also added a test.
|
@bernhardoj I think the testing steps could be simplified. We can check if the emoji is added to the frequently used list in the emoji picker. This is because the request is made when the frequently used list is updated. The steps could be:
|
|
The new steps sounds good. I added it as an alternative for QA. |
| ...frequentlyEmojisList.slice(0, (-1 - (newEmoji.length - 1))), | ||
| ..._.map(newEmoji.slice(1), e => ({...e, count: 1, lastUpdatedAt: currentTime})), | ||
| ]; | ||
| expect(spy).toBeCalledWith(expectedFrequentlyEmojisList); |
There was a problem hiding this comment.
we should expect that FrequentlyEmojisList length doesn’t exceed the max allowed value
expectedFrequentlyEmojisList.length === (CONST.EMOJI_FREQUENT_ROW_COUNT * CONST.EMOJI_NUM_PER_ROW)There was a problem hiding this comment.
expectedFrequentlyEmojisList is the array that we construct ourself. Testing the length is not needed.
There was a problem hiding this comment.
Not totally agree here, the length should not pass the (CONST.EMOJI_FREQUENT_ROW_COUNT * CONST.EMOJI_NUM_PER_ROW) and we should test that
There was a problem hiding this comment.
I think I got your point, but honestly I found it's weird to test an expected result. So, I add the length check to the frequentlyEmojisList length instead.
|
@fedirjh Here is the explanation of why our current logic is wrong: Let say a user already has 24 frequently used emojis with a count of 2. First, let's agree on what should be the expected behavior when we insert multiple emojis at the same time. I expect it should have the same behavior of inserting single emoji multiple times (lmk if you disagree). First case However, if we insert them one by one (from emoji picker), then it will only replace the last emoji from the list. You can notice that when inserting multiple emojis, we will replace 4 other different emojis. Let say somehow we fix it so they have the same behavior, we still have the 2nd case. Second case The user then insert multiple new emojis, A, B, and A again from emoji picker and emoji code with colon (
The final result is: 23 frequently used emojis + A emoji with a count of 1
First, insert A. Emoji A will be put at the last item of frequently used emojis list with count of 2. The final result is: 23 frequently used emojis + B emoji with a count of 1 Conclusion Complexity M * (N + N log N) which I think could be simplified to M * N log N. This is assuming the sort is N log N. Let me know if it make sense to you and I will commit it. |
|
@bernhardoj Okay, thank you for the explanation, that make sense. I think we can proceed with that implementation 🟢 |
|
Great. Updated. Just a note: it is slow when pasting > 1000 emojis code |
|
@bernhardoj Code looks good. units test are failing , please fix it . |
|
Hmm. I see all the test jobs are green. Maybe it becomes flaky (I'm guessing it reruns after your new comment) after changing it to native sort? I will try run the test multiple times locally. |
This comment was marked as outdated.
This comment was marked as outdated.
|
cc @bernhardoj looks good , I just forgot to revert some changes I did for testing 😕 |
|
Hmm, it's really weird, the test in CI and my device is working fine. can you log the final |
|
Ah okay, that's great to hear (or read). I was confused why you suddenly comment "looks good" only 🤣. |
fedirjh
left a comment
There was a problem hiding this comment.
Looks good and tests well 🚀
cc @MonilBhavsar over to you
|
Hi! Apologies for delay. Some priority issues took me aside. But I'll review it now. |
MonilBhavsar
left a comment
There was a problem hiding this comment.
Looks good, couple of NAB's..
| // Given an existing frequently used emojis list with count > 1 | ||
| const frequentlyEmojisList = [ | ||
| { | ||
| code: '👋', name: 'wave', count: 2, lastUpdatedAt: 4, |
There was a problem hiding this comment.
let's try to mimic real data as much as possible by using unix timestamp in lastUpdatedAt?
There was a problem hiding this comment.
Personally, I think it's fine to have a simple number instead of unix timestamp as it's easier to read. The purpose of lastUpdatedAt is to show which emoji is used the most recent and I think as long as the number can represent that clearly, then it's fine.
| code: '💯', name: '100', count: 2, lastUpdatedAt: 2, | ||
| }, | ||
| { | ||
| code: '👿', name: 'imp', count: 2, lastUpdatedAt: 1, |
There was a problem hiding this comment.
Lol, today I learnt, this emoji is named as imp 😄
|
@bernhardoj @fedirjh |
|
Merged with main. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/MonilBhavsar in version: 1.3.14-0 🚀
|
|
🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.3.14-14 🚀
|
Details
We are not updating the frequently used emojis list when adding emojis by typing emoji code with colon in the composer. This PR will make sure the list is updated.
Fixed Issues
$ #17599
PROPOSAL: #17599 (comment)
Tests
Same as QA Steps
Offline tests
No request will be called while offline
QA Steps
There are 2 ways to test this:
Simple way to test
:wave:.A bit technical way to test
First of all, open the Network Tab.
Web (Safari)
Desktop
mWeb (Safari)
mWeb (Chrome)
chrome://inspectinspectNative
I don't think there is a Network Tab in native, so to see the request is being made, we can look at the terminal (dev only)
:smile:in the composerUpdateFrequentlyUsedEmojisrequest is being made in the Network Tab:smile:in the edit composerUpdateFrequentlyUsedEmojisrequest is being made in the Network TabPR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Web
Screen.Recording.2023-05-04.at.15.12.04.mov
Mobile Web - Chrome
Screen.Recording.2023-05-04.at.15.27.42.mov
Mobile Web - Safari
Screen.Recording.2023-05-04.at.15.20.48.mov
Desktop
Screen.Recording.2023-05-04.at.15.16.13.mov
iOS
Screen.Recording.2023-05-04.at.15.25.08.mov
Android
Screen.Recording.2023-05-04.at.15.30.40.mov