Clean up code duplicates

Expensify · Oct 13, 2024 · 8010e02 · 8010e02
1 parent 592dc56
commit 8010e02
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 71 deletions.
diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx
@@ -153,19 +153,7 @@ function AccountSwitcher() {
                                 style={[styles.textBold, styles.textLarge, styles.flexShrink1]}
                             >
                                 {processedTextArray.length !== 0
-                                    ? processedTextArray.map(({text, isEmoji}, index) =>
-                                          isEmoji ? (
-                                              <Text
-                                                  // eslint-disable-next-line react/no-array-index-key
-                                                  key={index}
-                                                  style={styles.initialSettingsUsernameEmoji}
-                                              >
-                                                  {text}
-                                              </Text>
-                                          ) : (
-                                              text
-                                          ),
-                                      )
+                                    ? EmojiUtils.getProcessedText(processedTextArray, styles.initialSettingsUsernameEmoji)
                                     : currentUserPersonalDetails?.displayName}
                             </Text>
                             {canSwitchAccounts && (

diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx
@@ -13,21 +13,7 @@ function TextWithTooltip({text, style, numberOfLines = 1}: TextWithTooltipProps)
             style={style}
             numberOfLines={numberOfLines}
         >
-            {processedTextArray.length !== 0
-                ? processedTextArray.map(({text: textItem, isEmoji}, index) =>
-                      isEmoji ? (
-                          <Text
-                              // eslint-disable-next-line react/no-array-index-key
-                              key={index}
-                              style={[style, styles.emojisFontFamily]}
-                          >
-                              {textItem}
-                          </Text>
-                      ) : (
-                          textItem
-                      ),
-                  )
-                : text}
+            {processedTextArray.length !== 0 ? EmojiUtils.getProcessedText(processedTextArray, [style, styles.emojisFontFamily]) : text}
         </Text>
     );
 }

diff --git a/src/components/WorkspacesListRowDisplayName/index.native.tsx b/src/components/WorkspacesListRowDisplayName/index.native.tsx
@@ -14,19 +14,7 @@ function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowD
             style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
         >
             {processedOwnerName.length !== 0
-                ? processedOwnerName.map(({text, isEmoji}, index) =>
-                      isEmoji ? (
-                          <Text
-                              // eslint-disable-next-line react/no-array-index-key
-                              key={index}
-                              style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}, styles.emojisWithTextFontFamily]}
-                          >
-                              {text}
-                          </Text>
-                      ) : (
-                          text
-                      ),
-                  )
+                ? EmojiUtils.getProcessedText(processedOwnerName, [styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}, styles.emojisWithTextFontFamily])
                 : ownerName}
         </Text>
     );

diff --git a/src/libs/EmojiUtils.ts → src/libs/EmojiUtils.tsx b/src/libs/EmojiUtils.ts → src/libs/EmojiUtils.tsx
@@ -1,8 +1,11 @@
 import {Str} from 'expensify-common';
+import React from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
 import Onyx from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import * as Emojis from '@assets/emojis';
 import type {Emoji, HeaderEmoji, PickerEmojis} from '@assets/emojis/types';
+import Text from '@components/Text';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {FrequentlyUsedEmoji, Locale} from '@src/types/onyx';
@@ -652,13 +655,30 @@ function splitTextWithEmojis(text = ''): TextWithEmoji[] {
     return splitText;
 }
 
+function getProcessedText(processedTextArray: TextWithEmoji[], style: StyleProp<TextStyle>): Array<React.JSX.Element | string> {
+    return processedTextArray.map(({text, isEmoji}, index) =>
+        isEmoji ? (
+            <Text
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                style={style}
+            >
+                {text}
+            </Text>
+        ) : (
+            text
+        ),
+    );
+}
+
 export type {HeaderIndice, EmojiPickerList, EmojiSpacer, EmojiPickerListItem};
 
 export {
     findEmojiByName,
     findEmojiByCode,
     getEmojiName,
     getLocalizedEmojiName,
+    getProcessedText,
     getHeaderEmojis,
     mergeEmojisWithFrequentlyUsedEmojis,
     containsOnlyEmojis,

diff --git a/src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx b/src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx
@@ -19,21 +19,7 @@ function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateA
                 numberOfLines={isSingleLine ? 1 : undefined}
                 style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap, styles.dFlex]}
             >
-                {processedTextArray.length !== 0
-                    ? processedTextArray.map(({text, isEmoji}, index) =>
-                          isEmoji ? (
-                              <Text
-                                  // eslint-disable-next-line react/no-array-index-key
-                                  key={index}
-                                  style={[styles.emojisWithTextFontSize, styles.emojisWithTextFontFamily]}
-                              >
-                                  {text}
-                              </Text>
-                          ) : (
-                              text
-                          ),
-                      )
-                    : fragmentText}
+                {processedTextArray.length !== 0 ? EmojiUtils.getProcessedText(processedTextArray, [styles.emojisWithTextFontSize, styles.emojisWithTextFontFamily]) : fragmentText}
             </Text>
         </UserDetailsTooltip>
     );

diff --git a/src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx b/src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx
@@ -19,21 +19,7 @@ function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateA
                 numberOfLines={isSingleLine ? 1 : undefined}
                 style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap]}
             >
-                {processedTextArray.length !== 0
-                    ? processedTextArray.map(({text, isEmoji}, index) =>
-                          isEmoji ? (
-                              <Text
-                                  // eslint-disable-next-line react/no-array-index-key
-                                  key={index}
-                                  style={styles.emojisWithTextFontSize}
-                              >
-                                  {text}
-                              </Text>
-                          ) : (
-                              text
-                          ),
-                      )
-                    : fragmentText}
+                {processedTextArray.length !== 0 ? EmojiUtils.getProcessedText(processedTextArray, styles.emojisWithTextFontSize) : fragmentText}
             </Text>
         </UserDetailsTooltip>
     );