[HOLD for c+ payment in newdot] [$1000] Dev: "0:undefined:" displayed in reaction emoji tooltip

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open a chat
2. Send a message
3. React message with any emoji
4. Right click on reacted emoji
5. Notice "0:undefined:" will be displayed

Expected Result:

"0:undefined:" displayed should not displayed in reaction emoji tooltip

Actual Result:

"0:undefined:" displayed in reaction emoji tooltip

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev v1.3.43-2
Reproducible in staging?: n/a
Reproducible in production?: n/a
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-recording-2023-07-20-at-45905-pm_i7reUDxU.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ayazhussain79
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689854537784799

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ca4a5f95b82060ec
• Upwork Job ID: 1682153064419074048
2023-07-20
• Automatic offers:
• | | 0
• jfquevedol2198 | Contributor | 25679499
• | | 0

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[StevenKKC]

Proposal

Please re-state the problem that we are trying to solve in this issue.

"0:undefined:" displayed in reaction emoji tooltip.

What is the root cause of that problem?

Reaction emoji tooltip is displayed by following code.

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Lines 98 to 100 in 7fea760

	const onReactionListOpen = (event) => {
	reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID);
	};

We pass reaction.emoji to showReactionList in this line.
But showReactionList requires emojiName, so "0:undefined:" displayed in reaction emoji tooltip.

What changes do you think we should make in order to solve the problem?

We should pass reaction.emojiName to showReactionList.

    reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emojiName, props.reportActionID);

And in this line, there is no hasAccountIDReacted function in Report.js.
We should change to hasAccountIDEmojiReacted function.

    const hasUserReacted = Report.hasAccountIDEmojiReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers);

What alternative solutions did you explore? (Optional)

None.

[ayazhussain79]

This bug might be regression of this PR

[jfquevedol2198]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Dev: "0:undefined:" displayed in reaction emoji tooltip

What is the root cause of that problem?

1. In this line, reaction.emoji is undefined.

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Lines 98 to 100 in 7fea760

	const onReactionListOpen = (event) => {
	reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID);
	};

2. In this line, Report.hasAccountIDReacted is not found.

App/src/pages/home/report/ReactionList/PopoverReactionList.js

Line 189 in 7fea760

const hasUserReacted = Report.hasAccountIDReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers);

What changes do you think we should make in order to solve the problem?

1. Update this line to

    reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emojiName, props.reportActionID);

2. Update this line

    const hasUserReacted = Report.hasAccountIDEmojiReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers);

By doing this: popup should look like follows, Its missing Emoji on Popup.

3. We need to do this:

App/src/libs/EmojiUtils.js

Lines 395 to 406 in 7fea760

	const getUniqueEmojiCodes = (emojiAsset, users) => {
	const uniqueEmojiCodes = [];
	_.each(users, (userSkinTones) => {
	_.each(lodashGet(userSkinTones, 'skinTones'), (createdAt, skinTone) => {
	const emojiCode = getPreferredEmojiCode(emojiAsset, skinTone);
	if (emojiCode && !uniqueEmojiCodes.includes(emojiCode)) {
	uniqueEmojiCodes.push(emojiCode);
	}
	});
	});
	return uniqueEmojiCodes;
	};

In EmojiUtils.getUniqueEmojiCodes,
users should be

    {[accountID]: {skinTones: {createdAt, skinTone}}
    or
     [ {accountID, skinTones: {createdAt, skinTone}} ]

But on PopoverReactionsList, its passing like this:

    [ {accountID, skinTone} ]

Update this line so that we will get users in [ {accountID, skinTones: {createdAt, skinTone}} ] type.

    getSelectedReactionFromAction(reportAction, emojiName) {
        const reactions = lodashGet(reportAction, ['message', 0, 'reactions'], []);
        const reactionsWithCount = _.filter(reactions, (reaction) => reaction.users.length > 0);
        const reaction = _.find(reactionsWithCount, (reaction) => reaction.emoji === emojiName);
        if (reaction) {
            return {
                ...reaction,
                users: reaction.users.map(({accountID, skinTone}) => ({accountID, skinTones: {skinTone}}))
            }
        }
        return undefined;
    }

RESULT

What alternative solutions did you explore? (Optional)

[stitesExpensify]

I agree that this is most likely a regression from that PR.