From 040eeefcf5f7a364daa1e4d1f8e959fdab69c320 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Tue, 28 Mar 2023 09:53:10 +0200
Subject: [PATCH 1/6] fix skin tone on replaceEmojis

---
 src/libs/EmojiUtils.js                               | 5 +++--
 src/pages/home/report/ReportActionCompose.js         | 2 +-
 src/pages/home/report/ReportActionItemMessageEdit.js | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 9e52eec797e6..47fcd7691fef 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -190,9 +190,10 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
  * If we're on mobile, we also add a space after the emoji granted there's no text after it.
  * @param {String} text
  * @param {Boolean} isSmallScreenWidth
+ * @param {Number} preferredSkinTone
  * @returns {String}
  */
-function replaceEmojis(text, isSmallScreenWidth = false) {
+function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = -1) {
     let newText = text;
     const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
     if (!emojiData || emojiData.length === 0) {
@@ -201,7 +202,7 @@ function replaceEmojis(text, isSmallScreenWidth = false) {
     for (let i = 0; i < emojiData.length; i++) {
         const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1));
         if (checkEmoji && checkEmoji.metaData.code) {
-            let emojiReplacement = checkEmoji.metaData.code;
+            let emojiReplacement = checkEmoji.metaData.types[preferredSkinTone] || checkEmoji.metaData.code;
 
             // If this is the last emoji in the message and it's the end of the message so far,
             // add a space after it so the user can keep typing easily.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 4e57dba3b159..0755212273c3 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -529,7 +529,7 @@ class ReportActionCompose extends React.Component {
      * @param {Boolean} shouldDebounceSaveComment
      */
     updateComment(comment, shouldDebounceSaveComment) {
-        const newComment = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth);
+        const newComment = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone);
         this.setState((prevState) => {
             const newState = {
                 isCommentEmpty: !!newComment.match(/^(\s)*$/),
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index eb84a6837236..677121e9aad2 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -121,7 +121,7 @@ class ReportActionItemMessageEdit extends React.Component {
      * @param {String} draft
      */
     updateDraft(draft) {
-        const newDraft = EmojiUtils.replaceEmojis(draft, this.props.isSmallScreenWidth);
+        const newDraft = EmojiUtils.replaceEmojis(draft, this.props.isSmallScreenWidth, this.props.preferredSkinTone);
         this.setState((prevState) => {
             const newState = {draft: newDraft};
             if (draft !== newDraft) {
@@ -336,6 +336,9 @@ export default compose(
             key: ({reportID, action}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${action.reportActionID}`,
             initWithStoredValues: false,
         },
+        preferredSkinTone: {
+            key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
+        },
     }),
 )(React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */

From 7768680d63b15db2652e90c323562feceebc00f9 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Tue, 28 Mar 2023 10:52:55 +0200
Subject: [PATCH 2/6] add eslint rule 'onyx-props-must-have-default'

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 677121e9aad2..0ffe1ab6cd79 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -1,3 +1,4 @@
+/* eslint-disable rulesdir/onyx-props-must-have-default */
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {InteractionManager, Keyboard, View} from 'react-native';

From d4a97412e014a8b2dbf8bfda836587f8184ced38 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Fri, 31 Mar 2023 10:59:40 +0200
Subject: [PATCH 3/6] move definition outside component to circumvent onyx bug

---
 src/libs/EmojiUtils.js                              |  7 +------
 src/pages/home/report/ReportActionItem.js           | 13 +++++++++++++
 .../home/report/ReportActionItemMessageEdit.js      |  3 ---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index e49e3165bdee..39c116ceea99 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -202,12 +202,7 @@ function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = -1)
     for (let i = 0; i < emojiData.length; i++) {
         const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1));
         if (checkEmoji && checkEmoji.metaData.code) {
-            let emojiReplacement;
-            if (preferredSkinTone >= 0) {
-                emojiReplacement = checkEmoji.metaData.types[preferredSkinTone];
-            } else {
-                emojiReplacement = checkEmoji.metaData.code;
-            }
+            let emojiReplacement = this.getEmojiCodeWithSkinColor(checkEmoji.metaData, preferredSkinTone);
 
             // If this is the last emoji in the message and it's the end of the message so far,
             // add a space after it so the user can keep typing easily.
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 7415a51aff48..caaede886cc5 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -3,6 +3,7 @@ import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
 import CONST from '../../../CONST';
 import ONYXKEYS from '../../../ONYXKEYS';
 import reportActionPropTypes from './reportActionPropTypes';
@@ -64,12 +65,16 @@ const propTypes = {
     /** Draft message - if this is set the comment is in 'edit' mode */
     draftMessage: PropTypes.string,
 
+    /** Stores user's preferred skin tone */
+    preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     draftMessage: '',
     hasOutstandingIOU: false,
+    preferredSkinTone: -1,
 };
 
 class ReportActionItem extends Component {
@@ -192,6 +197,9 @@ class ReportActionItem extends Component {
                                 index={this.props.index}
                                 ref={el => this.textInput = el}
                                 report={this.props.report}
+
+                                // Avoid defining within component due to an existing Onyx bug
+                                preferredSkinTone={this.props.preferredSkinTone}
                                 shouldDisableEmojiPicker={
                                     (ReportUtils.chatIncludesConcierge(this.props.report) && User.isBlockedFromConcierge(this.props.blockedFromConcierge))
                                     || ReportUtils.isArchivedRoom(this.props.report)
@@ -314,4 +322,9 @@ export default compose(
             return lodashGet(drafts, draftKey, '');
         },
     }),
+    withOnyx({
+        preferredSkinTone: {
+            key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
+        },
+    }),
 )(ReportActionItem);
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 0ffe1ab6cd79..50c214bda6da 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -337,9 +337,6 @@ export default compose(
             key: ({reportID, action}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${action.reportActionID}`,
             initWithStoredValues: false,
         },
-        preferredSkinTone: {
-            key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
-        },
     }),
 )(React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */

From d829d81ee5228b74a4cc26372c4160739be025b5 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Fri, 31 Mar 2023 17:46:08 +0200
Subject: [PATCH 4/6] update propTypes

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 50c214bda6da..48d1207bc95d 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -54,6 +54,9 @@ const propTypes = {
     /** Whether or not the emoji picker is disabled */
     shouldDisableEmojiPicker: PropTypes.bool,
 
+    /** Stores user's preferred skin tone */
+    preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
     ...keyboardStatePropTypes,

From 71ac6678bdabafcf066289e299230272fb932ba2 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Mon, 3 Apr 2023 11:30:48 +0200
Subject: [PATCH 5/6] remove required from preferredSkinTone

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 48d1207bc95d..e832863dd9ba 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -55,7 +55,7 @@ const propTypes = {
     shouldDisableEmojiPicker: PropTypes.bool,
 
     /** Stores user's preferred skin tone */
-    preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
@@ -67,6 +67,7 @@ const defaultProps = {
     report: {},
     shouldDisableEmojiPicker: false,
     numberOfLines: 1,
+    preferredSkinTone: -1,
 };
 
 class ReportActionItemMessageEdit extends React.Component {

From 3073e4b8056ca5c4b5e3cb82dd08750c3820cfaf Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Mon, 3 Apr 2023 15:28:44 +0200
Subject: [PATCH 6/6] use preferredSkinTone from CONST

---
 src/libs/EmojiUtils.js                               | 2 +-
 src/pages/home/report/ReportActionItem.js            | 2 +-
 src/pages/home/report/ReportActionItemMessageEdit.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 39c116ceea99..cdf434150cf8 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -193,7 +193,7 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
  * @param {Number} preferredSkinTone
  * @returns {String}
  */
-function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = -1) {
+function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE) {
     let newText = text;
     const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
     if (!emojiData || emojiData.length === 0) {
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index caaede886cc5..2e57e9b7e542 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -74,7 +74,7 @@ const propTypes = {
 const defaultProps = {
     draftMessage: '',
     hasOutstandingIOU: false,
-    preferredSkinTone: -1,
+    preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
 };
 
 class ReportActionItem extends Component {
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index e832863dd9ba..8dd683569248 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -67,7 +67,7 @@ const defaultProps = {
     report: {},
     shouldDisableEmojiPicker: false,
     numberOfLines: 1,
-    preferredSkinTone: -1,
+    preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
 };
 
 class ReportActionItemMessageEdit extends React.Component {
