Skip to content

Fix: Added emoji category translations#7125

Merged
stitesExpensify merged 13 commits into
Expensify:mainfrom
mananjadhav:fix/emoji-category-translations
Jan 12, 2022
Merged

Fix: Added emoji category translations#7125
stitesExpensify merged 13 commits into
Expensify:mainfrom
mananjadhav:fix/emoji-category-translations

Conversation

@mananjadhav

@mananjadhav mananjadhav commented Jan 11, 2022

Copy link
Copy Markdown
Collaborator

Details

  • Added translations for emoji categories
  • Added Food & Drinks category
  • Removed hardcoded spaces in the list and added a dynamic spacing logic.

Fixed Issues

$ #7060
$ #7074

Tests

  1. Tested for English category names
  2. Tested for Spanish category names
  • Verify that no errors appear in the JS console

Errors are not related to my code

QA Steps

  1. Go to home page, and settings, change the language preference to Spanish
  2. Go to any chat, and click on emoji button on compose input
  3. Category names should have translated values
  • Verify that no errors appear in the JS console

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

Translation
web-emoji-cat-name-es
web-emoji-cat-name-eng

Food & Drinks
web-food-drinks


Mobile Web

Translation
mweb-emoji-cat-name-es

Food and Drinks
mweb-food-and-drinks


Desktop

Translation
desktop-emoji-cat-name-es

Food and Drinks
desktop-food-and-drinks


iOS

Translations
ios-emoji-cat-name-es

Food and Drinks
ios-food-and-drinks


Android

Translations
android-emoji-cat-name-es

Food and Drinks
android-food-and-drinks

@mananjadhav mananjadhav requested a review from a team as a code owner January 11, 2022 09:27
@MelvinBot MelvinBot requested review from rushatgabhane and stitesExpensify and removed request for a team January 11, 2022 09:27
@mananjadhav

mananjadhav commented Jan 11, 2022

Copy link
Copy Markdown
Collaborator Author

@parasharrajat @rushatgabhane, Because @stitesExpensify is a reviewer for #7074 as well, I've created a common PR.

It also helps me avoid conflicts that I will only have to resolve. I hope it isn't a big trouble in reviewing it.

Comment thread src/libs/EmojiUtils.js Outdated
@rushatgabhane

rushatgabhane commented Jan 11, 2022

Copy link
Copy Markdown
Member

@mananjadhav Is it just me or the emoji picker is bugged.

Screencast.from.11-01-22.05-40-09.PM.+03.mp4

Head is at the latest commit.

image

@mananjadhav

Copy link
Copy Markdown
Collaborator Author

Let me check and get back

@mananjadhav

Copy link
Copy Markdown
Collaborator Author

@rushatgabhane I checked and I am not able to reproduce this. Can you probably hard refresh and check?

emoji-picker.mp4

@rushatgabhane

Copy link
Copy Markdown
Member

Can you probably hard refresh and check?

Thanks, nothing worked but for some reason npm ci again helped 🥴
This bug isn't reproducible anymore.

@rushatgabhane rushatgabhane left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! some suggestions.

Comment thread src/libs/EmojiUtils.js
@stitesExpensify

Copy link
Copy Markdown
Contributor

Is it just me or the emoji picker is bugged.

This is what happens if the dynamic spacer elements are off FYI. I wonder if you had a cached emoji list or something? Weird regardless, glad it's not actually a problem 😄

Comment thread src/languages/es.js
Comment thread src/libs/EmojiUtils.js
@stitesExpensify

Copy link
Copy Markdown
Contributor

Also, I believe if you pull main the tests will pass now

parasharrajat
parasharrajat previously approved these changes Jan 11, 2022

@parasharrajat parasharrajat left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. C+ Linked issue for ref #7074

cc: @stitesExpensify
🎀 👀 🎀 C+ reviewed

Comment thread src/languages/es.js Outdated
@stitesExpensify

Copy link
Copy Markdown
Contributor

Hmm i'm actually getting this too... I did an npm ci and a hard refresh/empty cache and it's still happening. I'm worried that the same problem is going to happen to all of our users if this goes live like this...

2022-01-11_11-26-26

@parasharrajat

Copy link
Copy Markdown
Member

Time for me to test it again. I try to reproduce that broken UI..

@rushatgabhane

rushatgabhane commented Jan 11, 2022

Copy link
Copy Markdown
Member

Interesting, gonna dig deeper.

@mananjadhav

Copy link
Copy Markdown
Collaborator Author

Ohhh 🤔 For some reason, I didn’t get this at all 😕

Let me try to check the issue as well.

@parasharrajat

Copy link
Copy Markdown
Member

I don't see that issue. cc: @rushatgabhane

Co-authored-by: Ionatan Wiznia <iwiznia@hotmail.com>
Comment thread src/libs/EmojiUtils.js Outdated
_.each(emojis, (emoji, index) => {
if (emoji.header) {
updatedEmojis = updatedEmojis.concat(getDynamicSpacing(updatedEmojis.length, index), [emoji], getDynamicSpacing(1, index));
} else {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return early here

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure when you say return early. There's an if and else case to it. Neither it gave an error for the same.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean to say - return at end of if
So you don't need to use else

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realised and commit pushed.

@rushatgabhane rushatgabhane left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still investigating the UI bug, having a hard time replicating it consistently for debugging.
Weird thing is, it fixes itself sometimes after reopening emoji drawer.
Dry ran the code but couldn't find any edge cases yet.

Small change requested.

@mananjadhav

Copy link
Copy Markdown
Collaborator Author

Well, team, I was able to reproduce this consistently for one case -> "When we don't have any frequently used emojis."

App/src/libs/EmojiUtils.js

Lines 112 to 115 in 7e50a8d

function mergeEmojisWithFrequentlyUsedEmojis(emojis, frequentlyUsedEmojis = []) {
if (frequentlyUsedEmojis.length === 0) {
return emojis;
}

This code should ideally be :

if (frequentlyUsedEmojis.length === 0) {
    return addSpacesToEmojiCategories(emojis);
}

@mananjadhav

Copy link
Copy Markdown
Collaborator Author

@stitesExpensify @parasharrajat @rushatgabhane PR updated.

Hopefully you shouldn't get the spacing issue now 😃

@parasharrajat

parasharrajat commented Jan 12, 2022

Copy link
Copy Markdown
Member

Oh, Nice. I didn't notice the frequent emojis. Glad you found it.

@parasharrajat parasharrajat left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@rushatgabhane rushatgabhane left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
cc: @stitesExpensify

@stitesExpensify

Copy link
Copy Markdown
Contributor

Well, team, I was able to reproduce this consistently for one case -> "When we don't have any frequently used emojis."

Nice find!

@stitesExpensify stitesExpensify left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@stitesExpensify stitesExpensify merged commit c226b8e into Expensify:main Jan 12, 2022
@OSBotify

Copy link
Copy Markdown
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by @stitesExpensify in version: 1.1.29-6 🚀

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

@OSBotify

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by @roryabraham in version: 1.1.30-3 🚀

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants