[HOLD for payment 2021-12-27] Add support for Frequently/Recently Used Emojis

[mananjadhav]

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

---

With respect to comment #4456 (comment), adding this issue.

Action Performed:

1. Click on Chat
2. Open Emoji Picker

Expected Result:

There should be an option to see Recently used or Frequently used Emojis.

Actual Result:

No option to use recently used/frequently used Emojis.

Workaround:

User has to find the Emoji and enter again

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

Upwork job: https://www.upwork.com/jobs/~010528886766f948f5

[MelvinBot]

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[mananjadhav]

Proposal

We should have additional category Frequently Used and/or Recently Used emojis.

It could have a set of default emojis in the list by default if we choose to keep Frequently used. Based on the user behavior we can sync this with Onyx and ensure that it available for the user to use. I don't think it is necessary to sync it across devices, but can be discussed.

Changes:

An additional FlatList in EmojiPicker with a recentEmojis

<FlatList
	ref={el => this.recentEmojiList = el}
	data={this.state.recentEmojis}
	renderItem={this.renderItem}
	keyExtractor={item => `emoji_picker_${item.code}`}
	numColumns={this.numColumns}
	style={styles.emojiPickerList}
	extraData={[this.state.filteredEmojis, this.state.highlightedRecentIndex]}
	stickyHeaderIndices={this.state.headerIndices}
	onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}
/>	

Extend onEmojiSelected/addEmojiToTextBox to add recently used emojis. We can restrict the maximum number of emojis for this category.

addEmojiToTextBox(emoji) {
	
	if(recentEmojis.length >= maxAllowedRecent) {
		recentEmojis.splice(-1)
	}
	recentEmojis.unshift(emoji);

	Onyx.set(ONYXKEYS.RECENT_EMOJIS, recentEmojis);

	// existing code

}

For frequently used, the logic would differ. We would have to somehow manage a counter { 1faa: 10, 1f78: 45, ...}. The logic of the map would also change as we would then add based on the counter.

Apple adds to the list by using both - Recently used anf Frequently used. Your frequently used appear first and then your recently used. A combined list could also work for us.

[MelvinBot]

@sonialiap Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

@sonialiap 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[MelvinBot]

Triggered auto assignment to @timszot (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[sonialiap]

Sorry for not triaging this earlier, I was OOO. Looks good