-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix frequently used emojis list doesn't get updated when adding emojis by typing emoji code with colon #18396
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
src/libs/EmojiUtils.js
Outdated
const frequentEmojiListOrdered = lodashOrderBy(mergedEmojisWithFrequent, ['count', 'lastUpdatedAt'], ['desc', 'desc']) | ||
.slice(0, maxFrequentEmojiCount); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, I think I understand.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My bad. That's what will happen with the new behavior. Updated my comment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left some comments
tests/unit/EmojiTest.js
Outdated
...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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
expectedFrequentlyEmojisList
is the array that we construct ourself. Testing the length is not needed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 🤣. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, couple of NAB's..
tests/unit/EmojiTest.js
Outdated
// 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's try to mimic real data as much as possible by using unix timestamp in lastUpdatedAt
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
tests/unit/EmojiTest.js
Outdated
code: '💯', name: '100', count: 2, lastUpdatedAt: 2, | ||
}, | ||
{ | ||
code: '👿', name: 'imp', count: 2, lastUpdatedAt: 1, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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://inspect
inspect
Native
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 composerUpdateFrequentlyUsedEmojis
request is being made in the Network Tab:smile:
in the edit composerUpdateFrequentlyUsedEmojis
request is being made in the Network TabPR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.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