Fix undefined error of emojiCategory (#1324)

### Changelog
* Fixed unnecessary instantiation of `EmojiManager`.
* Fixed the code that lead to undefined error of `emojiCategory`.

Author: git-babel

src/lib/Sendbird/context/SendbirdProvider.tsx

@@ -180,10 +180,14 @@ const SendbirdContextManager = ({
 
   // Emoji Manager
   const emojiManager = useMemo(() => {
-    return new EmojiManager({
-      sdk,
-      logger,
-    });
+    if (sdkStore.initialized) {
+      return new EmojiManager({
+        sdk,
+        logger,
+      });
+    }
+
+    return undefined;
   }, [sdkStore.initialized]);
 
   const uikitConfigs = useMemo(() => ({

src/ui/ContextMenu/EmojiListItems.tsx

@@ -1,10 +1,11 @@
-import React, { ReactElement, ReactNode, RefObject, useEffect, useRef, useState } from 'react';
+import React, { Children, ReactElement, ReactNode, RefObject, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import SortByRow from '../SortByRow';
 import { Nullable } from '../../types';
 import { EMOJI_MENU_ROOT_ID, MENU_OBSERVING_CLASS_NAME } from '.';
 import { APP_LAYOUT_ROOT } from '../../modules/App/const';
+import { Label, LabelColors, LabelTypography } from '../Label';
 
 const defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
 type SpaceFromTrigger = { x: number, y: number };
@@ -96,7 +97,7 @@ export const EmojiListItems = ({
       }
       setReactionStyle(reactionStyle);
     }
-  }, []);
+  }, [children]);
 
   const rootElement = document.getElementById(EMOJI_MENU_ROOT_ID);
   if (rootElement) {
@@ -115,14 +116,26 @@ export const EmojiListItems = ({
               top: `${Math.round(reactionStyle.top)}px`,
             }}
           >
-            <SortByRow
-              className="sendbird-dropdown__reaction-bar__row"
-              maxItemCount={8}
-              itemWidth={44}
-              itemHeight={40}
-            >
-              {children}
-            </SortByRow>
+            {Children.count(children) <= 0
+              ? (
+                <Label
+                  className="sendbird-dropdown__reaction-bar__emptyLabel"
+                  type={LabelTypography.BODY_1}
+                  color={LabelColors.ONBACKGROUND_1}
+                >
+                  Emojis is not loaded yet.
+                </Label>
+              ) : (
+                <SortByRow
+                  className="sendbird-dropdown__reaction-bar__row"
+                  maxItemCount={8}
+                  itemWidth={44}
+                  itemHeight={40}
+                >
+                  {children}
+                </SortByRow>
+              )
+            }
           </ul>
         </div>,
         rootElement,

src/ui/EmojiReactions/index.tsx

@@ -121,16 +121,14 @@ const EmojiReactions = ({
             </ReactionBadge>
           )}
           menuItems={(closeDropdown: () => void): ReactElement => {
-            if (filteredEmojis.length === 0) return null;
-
             return (
               <EmojiListItems
                 parentRef={addReactionRef}
                 parentContainRef={addReactionRef}
                 closeDropdown={closeDropdown}
                 spaceFromTrigger={spaceFromTrigger}
               >
-                {getEmojiListByCategoryIds(emojiContainer, filterEmojiCategoryIds?.(message)).map((emoji: Emoji): ReactElement => {
+                {filteredEmojis.map((emoji: Emoji): ReactElement => {
                   const isReacted: boolean = (message?.reactions
                     ?.find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds
                     ?.some((reactorId: string): boolean => reactorId === userId)) || false;

src/ui/MessageContent/index.tsx

@@ -416,8 +416,7 @@ export function MessageContent(props: MessageContentProps): ReactElement {
                   message,
                   channel,
                   isByMe,
-                  // @ts-ignore
-                  emojiContainer: emojiContainer ?? new EmojiContainer({}),
+                  emojiContainer: emojiContainer,
                   memberNicknamesMap: nicknamesMap ?? new Map(),
                   toggleReaction,
                   onPressUserProfile: onPressUserProfileHandler,

src/ui/MessageItemReactionMenu/index.tsx

@@ -73,8 +73,6 @@ export function MessageEmojiMenu({
           </IconButton>
         )}
         menuItems={(closeDropdown: () => void): ReactElement => {
-          if (filteredEmojis.length === 0) return null;
-
           return (
             <EmojiListItems
               id={getObservingId(message.messageId)}

src/utils/index.ts

@@ -529,7 +529,7 @@ export const getEmojiMapAll = (emojiContainer: EmojiContainer): Map<string, Emoj
   return emojiMap;
 };
 export const getEmojiListByCategoryIds = (emojiContainer: EmojiContainer, categoryIds: number[]): Array<Emoji> => {
-  if (!categoryIds) return getEmojiListAll(emojiContainer);
+  if (!categoryIds) return getEmojiListAll(emojiContainer) || [];
 
   return emojiContainer?.emojiCategories
     ?.filter((emojiCategory: EmojiCategory) => categoryIds.includes(emojiCategory.id))