Page MenuHomePhabricator

[native] implement emoji keyboard button on reaction selection popover
ClosedPublic

Authored by ginsu on Jan 29 2023, 9:31 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Nov 1, 11:37 AM
Unknown Object (File)
Thu, Oct 31, 7:07 AM
Unknown Object (File)
Sun, Oct 27, 6:20 PM
Unknown Object (File)
Sat, Oct 26, 9:41 PM
Unknown Object (File)
Sat, Oct 26, 9:41 PM
Unknown Object (File)
Sat, Oct 26, 9:41 PM
Unknown Object (File)
Sat, Oct 26, 9:41 PM
Unknown Object (File)
Sat, Oct 26, 9:41 PM
Subscribers

Details

Summary

implemented the emoji keyboard button on the reaction selection popover. The button uses a plus icon, and when the user presses on it, the emoji keyboard opens, showing all the emojis the user can use to react

Figma


Depends on D6454
Linear Task: ENG-2777

Test Plan

Please watch the demo video to see the changes I made:

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu requested review of this revision.Jan 29 2023, 9:44 PM
tomek requested changes to this revision.Jan 30 2023, 6:07 AM

When we have a couple of reactions, it is not clear to which of these the number corresponds.

I'm surprised how easy it was to introduce the picker!

native/navigation/tooltip.react.js
647–651 ↗(On Diff #21549)

Are we sure that we want to render the picker for all the tooltips? Can we render it only for the tooltips where reaction can be made?

This revision now requires changes to proceed.Jan 30 2023, 6:07 AM

When we have a couple of reactions, it is not clear to which of these the number corresponds.

@tomek could you elaborate on what you mean by the number these correspond to?

In D6455#193305, @ginsu wrote:

When we have a couple of reactions, it is not clear to which of these the number corresponds.

@tomek could you elaborate on what you mean by the number these correspond to?

Sure! I was talking about the number from the video

reactions.png (134×776 px, 98 KB)

The 2 probably corresponds to the 4th emoji, but I think we should make it more obvious, by e.g. increasing the padding between emoji-number pairs, changing the background, or something else. It doesn't need to be addressed here - the main issue here is always rendering the picker.

ginsu edited the summary of this revision. (Show Details)

rebase with new implementation

In D6455#193353, @tomek wrote:
In D6455#193305, @ginsu wrote:

When we have a couple of reactions, it is not clear to which of these the number corresponds.

@tomek could you elaborate on what you mean by the number these correspond to?

Sure! I was talking about the number from the video

reactions.png (134×776 px, 98 KB)

The 2 probably corresponds to the 4th emoji, but I think we should make it more obvious, by e.g. increasing the padding between emoji-number pairs, changing the background, or something else. It doesn't need to be addressed here - the main issue here is always rendering the picker.

Created a task to track this

tomek requested changes to this revision.Feb 1 2023, 3:11 AM
tomek added inline comments.
native/chat/multimedia-message-tooltip-button.react.js
105–117

What's the point of extracting this?

160–164

Why is this change needed?

163–168

This logic is duplicated in all the messages and in the popover

This revision now requires changes to proceed.Feb 1 2023, 3:11 AM
native/chat/multimedia-message-tooltip-button.react.js
160–164

This change is needed because it is blocking the rerender of this component whenever the value of showEmojiKeyboard changes. Since this component matches the pattern of robotext-message-tooltip-button.react and text-message-tooltip-button.react, I believe that a better approach would be just to memoize the expensive part of the component which is InnerMultimediaMessage

address tomek's feedback

native/chat/multimedia-message-tooltip-button.react.js
163–168

Updated the diff to reduce redundancy in all the messages. This task should also further improve this redundancy.

tomek added inline comments.
native/chat/multimedia-message-tooltip-button.react.js
160–164

It makes sense to have a consistent approach, but could you explain a little bit more what do you mean by:

This change is needed because it is blocking the rerender of this component whenever the value of showEmojiKeyboard changes.

Why using memo causes that? Why removing the memo fixes the issue?

This revision is now accepted and ready to land.Feb 2 2023, 4:28 AM
native/chat/multimedia-message-tooltip-button.react.js
160–164

From what I understand about shared values, I am mutating the value field of showEmojiKeyboard, but the reference (which I am passing down as a prop) was staying the same so a rerender was not happening.

context on shared value objects

Please let me know if you have more questions about this