[$500] Status - Selected emojis in status page's emoji picker don't add to frequently used section

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.3-0
Reproducible in staging?: Y
Reproducible in production?: Y
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1, Go to staging.expensify
2. Navigate to Settings > Profile > Status > Status Detail
3, Click on the down chevron icon to open the emoji picker
4, Select an emoji, then go to the top of the emoji picker section and observe that the emoji is not added to the frequently used section

Expected Result:

When clicking on emojis, they should be added to the frequently used section, similar to the behavior in the composer emoji picker

Actual Result:

Selected emojis are not added to the frequently used section, unlike the behavior in the composer emoji picker

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6288618_1700750204564.emoji_picker.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ca6c37a3f4b46846
• Upwork Job ID: 1727805546590011392
• Last Price Increase: 2023-12-14

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ca6c37a3f4b46846

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @0xmiroslav (External)

[ZhenjaHorbach]

Proposal

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

Status - Selected emojis in the status page's emoji picker don't add to frequently used section

What is the root cause of that problem?

The main problem is that in order to store the values in the frequently used section we must use a separate function(User.updateFrequentlyUsedEmojis)
Which is not used on the status screen, unlike other places

Usage example:

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

Lines 157 to 160 in 458e270

	const debouncedUpdateFrequentlyUsedEmojis = useCallback(() => {
	User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(insertedEmojisRef.current));
	insertedEmojisRef.current = [];
	}, []);

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

Since this functionality, in my opinion, should exist for all places where we use EmojiPickerButtonDropdown, we can add this functionality inside EmojiPickerButtonDropdown

For example, we can update this code like this (This is an example that works well. I think this can be optimized or made as an optional functionality that can be disabled and enabled using an additional parameter)

        EmojiPickerAction.showEmojiPicker(
            props.onModalHide,
            (emoji) => {
                User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis([EmojiUtils.findEmojiByCode(emoji)]));
                props.onInputChange(emoji);
            },
            emojiPopoverAnchor.current,
            {
                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                shiftVertical: 4,
            },
        );

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Line 38 in 458e270

EmojiPickerAction.showEmojiPicker(props.onModalHide, (emoji) => props.onInputChange(emoji), emojiPopoverAnchor.current, {

What alternative solutions did you explore? (Optional)

We can use onChangeText and implement this functionality within StatusSetPage. But first, we need to update this function and add the ability to use onChangeText for EmojiPickerButtonDropdown

Like

        EmojiPickerAction.showEmojiPicker(
            props.onModalHide,
            (emoji) => {
                props.onChangeText(emoji);
                props.onInputChange(emoji);
            },
            emojiPopoverAnchor.current,
            {
                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                shiftVertical: 4,
            },
        );

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Line 38 in 458e270

EmojiPickerAction.showEmojiPicker(props.onModalHide, (emoji) => props.onInputChange(emoji), emojiPopoverAnchor.current, {

And then update here like

                            <InputWrapper
                                InputComponent={EmojiPickerButtonDropdown}
                                inputID={INPUT_IDS.EMOJI_CODE}
                                aria-label={INPUT_IDS.EMOJI_CODE}
                                defaultValue={defaultEmoji}
                                onChangeText={(emoji) => {
                                    User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis([EmojiUtils.findEmojiByCode(emoji)]));
                                }}
                            />

https://github.com/Expensify/App/blob/f52c59d55be2d6d2775623d92c3043bd6d42cc0f/src/pages/settings/Profile/CustomStatus/StatusSetPage.js#L67-L72C3

---

We can use useEffect which will be called when updating emoji inside EmojiPickerButtonDropdown or StatusSetPage

---

Since in this case, we use EmojiPickerButtonDropdown within FormProvider, we can add similar functionality within onInputChange

App/src/components/Form/FormProvider.js

Lines 292 to 315 in f6ea6f3

	onInputChange: (value, key) => {
	const inputKey = key || inputID;
	setInputValues((prevState) => {
	const newState = {
	...prevState,
	[inputKey]: value,
	};
	if (shouldValidateOnChange) {
	onValidate(newState);
	}
	return newState;
	});
	if (propsToParse.shouldSaveDraft) {
	FormActions.setDraftValues(formID, {[inputKey]: value});
	}
	if (_.isFunction(propsToParse.onValueChange)) {
	propsToParse.onValueChange(value, inputKey);
	}
	},
	};
	},

And add a new parameter that will analyze the presence of emoji in inputs and save them in frequentlyUsed

---

As the most radical way, we can add this functionality when clicking on an emoji inside the EmojiPicker

[DylanDylann]

Proposal

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

Status - Selected emojis in status page's emoji picker don't add to frequently used section

What is the root cause of that problem?

We don't call User.updateFrequentlyUsedEmojis in Status Page

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

We are handling updateFrequentlyUsedEmojis case by case so It is easy to miss updating frequently used emojis when new emoji picker is created. I suggest we should move logic updateFrequentlyUsedEmojis into EmojiPicker to avoid duplicated code and handle all same logic in one
In here

App/src/components/EmojiPicker/EmojiPicker.js

Line 48 in f52c59d

const showEmojiPicker = (onModalHideValue, onEmojiSelectedValue, emojiPopoverAnchorValue, anchorOrigin, onWillShow = () => {}, id) => {

We should add a new prop called shouldUpdateFrequentlyUsedEmojis. When this prop is true we will call User.updateFrequentlyUsedEmojis function

Because currently, we are handling updateFrequentlyUsedEmojis case by case in these places: AddReactionBubble, MiniQuickEmojiReactions, EmojiPickerButtonDropdown (Status Page, don't handle updateFrequentlyUsedEmojis), EmojiPickerButton (Main composer and Edit Composer). With my approach, we need to remove logic updateFrequentlyUsedEmojis in AddReactionBubble, MiniQuickEmojiReactions. In EmojiPickerButton, we will pass shouldUpdateFrequentlyUsedEmojis is false, because here, we have another logic to handle updateFrequentlyUsedEmojis to cover many other cases like pasting text that contains emoji, selecting emoji from the suggestion,...

What alternative solutions did you explore? (Optional)

[melvin-bot]

@bfitzexpensify, @0xmiroslav Whoops! This issue is 2 days overdue. Let's get this updated quick!

[0xmiros]

reviewing proposals

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@bfitzexpensify, @0xmiroslav Whoops! This issue is 2 days overdue. Let's get this updated quick!

[bfitzexpensify]

How are we looking here @0xmiroslav?

[melvin-bot]

@bfitzexpensify, @0xmiroslav Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[bfitzexpensify]

Bump on this one @0xmiroslav

[melvin-bot]

@bfitzexpensify @0xmiroslav this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[0xmiros]

I will provide update soon

[melvin-bot]

@bfitzexpensify, @0xmiroslav Whoops! This issue is 2 days overdue. Let's get this updated quick!

[bfitzexpensify]

How are things looking here @0xmiroslav?

[melvin-bot]

@bfitzexpensify @0xmiroslav this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[bfitzexpensify]

Bump on this one again @0xmiroslav, thank you!

[0xmiros]

sorry missed this. will update today

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[bfitzexpensify]

I've re-reviewed the problem here, and I don't think it fits neatly into any of the waves or VIP projects we have. I'm going to close this out for focus.

[0xmiros]

I've re-reviewed the problem here, and I don't think it fits neatly into any of the waves or VIP projects we have. I'm going to close this out for focus.

Agree 👍