[native] introudce selectMultipleEmojis and alreadySelectedEmojis to EmojiKeyboard component
ClosedPublic
Actions

Authored by ginsu on Jun 21 2023, 3:19 PM.

Details

Reviewers

atul
kamil

Commits

rCOMMb400d0b364f6: [native] introudce selectMultipleEmojis and alreadySelectedEmojis to…

Summary

This diff is the first part to highlight the already selected emojis to indicate on the emoji keyboard what emojis the user has already selected. This diff handles the case when selectMultipleEmojis is equal to false and the next diff will handle the case when selectMultipleEmojis is equal to true

The big obstacle I had to overcome to build this was that the selectedEmojis prop needs to be an array of emoji names and we only store the actual emoji in our database. To overcome this obstacle I index the emojiData by the emoji so that we can easily grab the correct emoji name and pass it into the selectedEmojis prop.

Here is a link to an example to the docs that helped me with this implementation:
https://thewidlarzgroup.github.io/rn-emoji-keyboard/docs/documentation/Examples/selected_emojis

Linear Task: https://linear.app/comm/issue/ENG-3794/mobile-emoji-keyboard-highlight-emojis-that-a-user-has-already

Depends on D8282

Test Plan

Please watch the demo video below:

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Jun 21 2023, 3:19 PM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 21 2023, 3:19 PM

Harbormaster completed remote builds in B20411: Diff 27983.Jun 21 2023, 3:36 PM

ginsu requested review of this revision.Jun 21 2023, 3:36 PM

ginsu edited the summary of this revision. (Show Details)Jun 21 2023, 3:58 PM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, kamil.

ginsu added a parent revision: D8282: [native] persist recently used emojis.

ginsu attached a referenced file: F600937: Screen Recording 2023-06-21 at 3.55.44 PM.mov. (Show Details)

ginsu added inline comments.

native/chat/multimedia-message-tooltip-button.react.js
155 ↗	(On Diff #27983)	This is just a placeholder, the very next diff will address this
native/chat/robotext-message-tooltip-button.react.js
138 ↗	(On Diff #27983)	This is just a placeholder, the very next diff will address this
native/chat/text-message-tooltip-button.react.js
152 ↗	(On Diff #27983)	This is just a placeholder, the very next diff will address this
native/components/emoji-keyboard.react.js
9 ↗	(On Diff #27983)	Unfortunately, we can't import `emojisData` from `rn-emoji-keyboard` so we need to import it directly from the file. I have been in contact with the team at `rn-emoji-keyboard` and they are taking a look at improving this in the near future
27 ↗	(On Diff #27983)	Here is what the `emojiData` looks like: We want to first flatten the array so that we only have a one level array that is just the `data` field all combined together. After we do that we can key the data by the `emoji` field so that we can easily index and get the `name` field from the emoji
63 ↗	(On Diff #27983)	The next diff will add more cases for when `selectMultipleEmojis` is equal to `true`