From 839a6107ba19b57b8ce69e063293569d994ecd88 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 21 Jun 2021 16:39:55 +0300
Subject: [PATCH] Emoji Tooltip: Always support English keywords (#1197)

---
 src/components/middle/composer/Composer.tsx   |  7 +++++-
 .../middle/composer/EmojiTooltip.tsx          |  5 +++-
 .../middle/composer/hooks/useEmojiTooltip.ts  | 25 ++++++++++++-------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index cb08a04c0..c8b1f8246 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -121,6 +121,7 @@ type StateProps = {
   contentToBeScheduled?: GlobalState['messages']['contentToBeScheduled'];
   shouldSuggestStickers?: boolean;
   language: LangCode;
+  baseEmojiKeywords?: Record<string, string[]>;
   emojiKeywords?: Record<string, string[]>;
   serverTimeOffset: number;
 } & Pick<GlobalState, 'connectionState'>;
@@ -180,6 +181,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
   contentToBeScheduled,
   shouldSuggestStickers,
   language,
+  baseEmojiKeywords,
   emojiKeywords,
   serverTimeOffset,
   recentEmojis,
@@ -308,6 +310,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
     recentEmojis,
     undefined,
     setHtml,
+    baseEmojiKeywords,
     emojiKeywords,
   );
 
@@ -927,7 +930,8 @@ export default memo(withGlobal<OwnProps>(
     const messageWithActualBotKeyboard = isChatWithBot && selectNewestMessageWithBotKeyboardButtons(global, chatId);
     const scheduledIds = selectScheduledIds(global, chatId);
     const { language } = global.settings.byKey;
-    const emojiKeywords = selectEmojiKeywords(global, language);
+    const baseEmojiKeywords = selectEmojiKeywords(global, 'en');
+    const emojiKeywords = language !== 'en' ? selectEmojiKeywords(global, language) : undefined;
 
     return {
       editingMessage: selectEditingMessage(global, chatId, threadId, messageListType),
@@ -963,6 +967,7 @@ export default memo(withGlobal<OwnProps>(
       shouldSuggestStickers: global.settings.byKey.shouldSuggestStickers,
       recentEmojis: global.recentEmojis,
       language,
+      baseEmojiKeywords: baseEmojiKeywords ? baseEmojiKeywords.keywords : undefined,
       emojiKeywords: emojiKeywords ? emojiKeywords.keywords : undefined,
       serverTimeOffset: global.serverTimeOffset,
     };
diff --git a/src/components/middle/composer/EmojiTooltip.tsx b/src/components/middle/composer/EmojiTooltip.tsx
index 47a989520..11f098889 100644
--- a/src/components/middle/composer/EmojiTooltip.tsx
+++ b/src/components/middle/composer/EmojiTooltip.tsx
@@ -79,7 +79,10 @@ const EmojiTooltip: FC<OwnProps> = ({
   const [selectedIndex, setSelectedIndex] = useState(NO_EMOJI_SELECTED_INDEX);
 
   useEffect(() => {
-    loadEmojiKeywords({ language });
+    loadEmojiKeywords({ language: 'en' });
+    if (language !== 'en') {
+      loadEmojiKeywords({ language });
+    }
   }, [loadEmojiKeywords, language]);
 
   useEffect(() => {
diff --git a/src/components/middle/composer/hooks/useEmojiTooltip.ts b/src/components/middle/composer/hooks/useEmojiTooltip.ts
index 63fd9f885..9448b20a3 100644
--- a/src/components/middle/composer/hooks/useEmojiTooltip.ts
+++ b/src/components/middle/composer/hooks/useEmojiTooltip.ts
@@ -34,6 +34,7 @@ export default function useEmojiTooltip(
   recentEmojiIds: string[],
   inputId = EDITABLE_INPUT_ID,
   onUpdateHtml: (html: string) => void,
+  baseEmojiKeywords?: Record<string, string[]>,
   emojiKeywords?: Record<string, string[]>,
 ) {
   const [isOpen, markIsOpen, unmarkIsOpen] = useFlag();
@@ -78,14 +79,20 @@ export default function useEmojiTooltip(
 
     const emojis = Object.values(byId);
 
-    if (emojiKeywords) {
-      const byNative = buildCollectionByKey(emojis, 'native');
-      const emojisByKeyword = mapValues(emojiKeywords, (natives) => {
+    const byNative = buildCollectionByKey(emojis, 'native');
+    const baseEmojisByKeyword = baseEmojiKeywords
+      ? mapValues(baseEmojiKeywords, (natives) => {
         return Object.values(pickTruthy(byNative, natives));
-      });
-      setByKeyword(emojisByKeyword);
-      setKeywords(Object.keys(emojisByKeyword));
-    }
+      })
+      : {};
+    const emojisByKeyword = emojiKeywords
+      ? mapValues(emojiKeywords, (natives) => {
+        return Object.values(pickTruthy(byNative, natives));
+      })
+      : {};
+
+    setByKeyword({ ...baseEmojisByKeyword, ...emojisByKeyword });
+    setKeywords([...Object.keys(baseEmojisByKeyword), ...Object.keys(emojisByKeyword)]);
 
     const emojisByName = emojis.reduce((result, emoji) => {
       emoji.names.forEach((name) => {
@@ -100,10 +107,10 @@ export default function useEmojiTooltip(
     }, {} as Record<string, Emoji[]>);
     setByName(emojisByName);
     setNames(Object.keys(emojisByName));
-  }, [byId, emojiKeywords]);
+  }, [baseEmojiKeywords, byId, emojiKeywords]);
 
   useEffect(() => {
-    if (!isAllowed || !html || !byId) {
+    if (!isAllowed || !html || !byId || !keywords || !keywords.length) {
       unmarkIsOpen();
       return;
     }