[UK-1013] Fix file view error and add debouncing (#57)

HoonBaek · web-flow · commit d9b49bb4f358 · 2021-11-17T14:09:42.000+09:00
* Add debouncing logic to the MessageSearch component
* Add optional chaining for isResendable of message
* Add optional chaining for emojiCategories of message
* Apply order to message search as 'ts'
diff --git a/src/smart-components/MessageSearch/dux/actionTypes.ts b/src/smart-components/MessageSearch/dux/actionTypes.ts
@@ -6,3 +6,4 @@ export const SET_QUERY_INVALID = 'SET_QUERY_INVALID';
 
 export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';
 export const CHANNEL_INVALID = 'CHANNEL_INVALID';
+export const RESET_SEARCH_STRING = 'RESET_SEARCH_STRING';
diff --git a/src/smart-components/MessageSearch/dux/reducers.ts b/src/smart-components/MessageSearch/dux/reducers.ts
@@ -73,6 +73,12 @@ export default function reducer(
         hasMoreResult: state.currentMessageSearchQuery.hasNext,
       };
     }
+    case actionTypes.RESET_SEARCH_STRING: {
+      return {
+        ...state,
+        allMessages: [],
+      };
+    }
     default: {
       return state;
     }
diff --git a/src/smart-components/MessageSearch/hooks/useGetSearchedMessages.ts b/src/smart-components/MessageSearch/hooks/useGetSearchedMessages.ts
@@ -6,7 +6,7 @@ import SendBird from 'sendbird';
 interface MainProps {
   currentChannel: SendbirdUIKit.GroupChannelType;
   channelUrl: string;
-  searchString?: string;
+  requestString?: string;
   messageSearchQuery?: SendbirdUIKit.MessageSearchQueryType;
   onResultLoaded?: (
     messages?: Array<SendBird.UserMessage | SendBird.FileMessage | SendBird.AdminMessage>,
@@ -21,7 +21,7 @@ interface ToolProps {
 }
 
 function useGetSearchedMessages(
-  { currentChannel, channelUrl, searchString, messageSearchQuery, onResultLoaded, retryCount }: MainProps,
+  { currentChannel, channelUrl, requestString, messageSearchQuery, onResultLoaded, retryCount }: MainProps,
   { sdk, logger, messageSearchDispathcer }: ToolProps,
 ): void {
   useEffect(() => {
@@ -30,13 +30,14 @@ function useGetSearchedMessages(
       payload: null,
     });
     if (sdk && channelUrl && sdk.createMessageSearchQuery && currentChannel) {
-      if (searchString) {
+      if (requestString) {
         const inputSearchMessageQueryObject = {
           ...messageSearchQuery,
+          order: 'ts' as const,
           channelUrl,
           messageTimestampFrom: currentChannel.invitedAt,
         };
-        const createdQuery = sdk.createMessageSearchQuery(searchString, inputSearchMessageQueryObject);
+        const createdQuery = sdk.createMessageSearchQuery(requestString, inputSearchMessageQueryObject);
         createdQuery.next((messages, error) => {
           if (!error) {
             logger.info('MessageSearch | useGetSearchedMessages: succeeded getting messages', messages);
@@ -69,7 +70,7 @@ function useGetSearchedMessages(
         logger.info('MessageSearch | useGetSeasrchedMessages: search string is empty');
       }
     }
-  }, [channelUrl, messageSearchQuery, searchString, currentChannel, retryCount]);
+  }, [channelUrl, messageSearchQuery, requestString, currentChannel, retryCount]);
 }
 
 export default useGetSearchedMessages;
diff --git a/src/smart-components/MessageSearch/hooks/useSearchStringEffect.ts b/src/smart-components/MessageSearch/hooks/useSearchStringEffect.ts
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import * as messageActionTypes from '../dux/actionTypes';
+
+interface DynamicParams {
+  searchString: string;
+}
+
+interface StaticParams {
+  messageSearchDispathcer: ({ type: string, payload: any }) => void;
+}
+
+const DEBOUNCING_TIME = 500;
+
+function useSearchStringEffect(
+  { searchString }: DynamicParams,
+  { messageSearchDispathcer }: StaticParams,
+): string {
+  const [requestString, setRequestString] = useState('');
+  const [debouncingTimer, setDebouncingTimer] = useState(null);
+  useEffect(() => {
+    clearTimeout(debouncingTimer);
+    if (searchString) {
+      setDebouncingTimer(
+        setTimeout(() => {
+          setRequestString(searchString);
+        }, DEBOUNCING_TIME)
+      );
+    } else {
+      setRequestString('');
+      messageSearchDispathcer({
+        type: messageActionTypes.RESET_SEARCH_STRING,
+        payload: '',
+      });
+    }
+  }, [searchString]);
+  return requestString;
+}
+
+export default useSearchStringEffect;
diff --git a/src/smart-components/MessageSearch/index.tsx b/src/smart-components/MessageSearch/index.tsx
@@ -15,6 +15,7 @@ import { LocalizationContext } from '../../lib/LocalizationContext';
 import MessageSearchFileItem from '../../ui/MessageSearchFileItem';
 
 import SendbirdUIKit from '../../index';
+import useSearchStringEffect from './hooks/useSearchStringEffect';
 
 const COMPONENT_CLASS_NAME = 'sendbird-message-search';
 
@@ -80,12 +81,8 @@ function MessageSearch(props: Props): JSX.Element {
   };
 
   // const
-  const {
-    sdkStore,
-  } = stores;
-  const {
-    logger,
-  } = config;
+  const { sdkStore } = stores;
+  const { logger } = config;
   const { sdk } = sdkStore;
   const sdkInit = sdkStore.initialized;
   const scrollRef = useRef(null);
@@ -112,8 +109,10 @@ function MessageSearch(props: Props): JSX.Element {
     { sdk, logger, messageSearchDispathcer },
   );
 
+  const requestString = useSearchStringEffect({ searchString }, { messageSearchDispathcer });
+
   useGetSearchMessages(
-    { currentChannel, channelUrl, searchString, messageSearchQuery, onResultLoaded, retryCount },
+    { currentChannel, channelUrl, requestString, messageSearchQuery, onResultLoaded, retryCount },
     { sdk, logger, messageSearchDispathcer },
   );
 
@@ -126,7 +125,7 @@ function MessageSearch(props: Props): JSX.Element {
     setRetryCount(retryCount + 1);
   };
 
-  if (isInvalid && searchString) {
+  if (isInvalid && searchString && requestString) {
     return (
       <div className={COMPONENT_CLASS_NAME}>
         <PlaceHolder
@@ -137,7 +136,7 @@ function MessageSearch(props: Props): JSX.Element {
     );
   }
 
-  if (loading && searchString) {
+  if (loading && searchString && requestString) {
     return (
       <div className={COMPONENT_CLASS_NAME}>
         <PlaceHolder type={PlaceHolderTypes.SEARCHING} />
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
@@ -153,6 +153,7 @@ export default function MessageContent({
               <MessageItemReactionMenu
                 className="sendbird-message-content-menu__reaction-menu"
                 message={message as UserMessage | FileMessage}
+                channel={channel}
                 userId={userId}
                 spaceFromTrigger={{}}
                 emojiContainer={emojiContainer}
@@ -233,6 +234,7 @@ export default function MessageContent({
               <MessageItemReactionMenu
                 className="sendbird-message-content-menu__reaction-menu"
                 message={message as UserMessage | FileMessage}
+                channel={channel}
                 userId={userId}
                 spaceFromTrigger={{}}
                 emojiContainer={emojiContainer}
diff --git a/src/ui/MessageItemMenu/index.tsx b/src/ui/MessageItemMenu/index.tsx
@@ -44,8 +44,8 @@ export default function MessageItemMenu({
   const showMenuItemCopy: boolean = isUserMessage(message as UserMessage);
   const showMenuItemReply: boolean = false && !isFailedMessage(channel, message) && !isPendingMessage(channel, message);
   const showMenuItemEdit: boolean = (isUserMessage(message as UserMessage) && isSentMessage(channel, message) && isByMe);
-  const showMenuItemResend: boolean = (isFailedMessage(channel, message) && message.isResendable() && isByMe);
-  const showMenuItemDelete: boolean = (isSentMessage(channel, message) && isByMe);
+  const showMenuItemResend: boolean = (isFailedMessage(channel, message) && message?.isResendable?.() && isByMe);
+  const showMenuItemDelete: boolean = !isPendingMessage(channel, message) && isByMe;
 
   if (!(showMenuItemCopy || showMenuItemEdit || showMenuItemResend || showMenuItemDelete)) {
     return null;
diff --git a/src/ui/MessageItemReactionMenu/__tests__/MessageItemReactionMenu.spec.js b/src/ui/MessageItemReactionMenu/__tests__/MessageItemReactionMenu.spec.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import {shallow} from 'enzyme';
 import renderer from 'react-test-renderer';
 
 import MessageItemReactionMenu from "../index";
@@ -8,7 +7,9 @@ describe('MessageItemReactionMenu', () => {
   it('should do a snapshot test of the MessageItemReactionMenu DOM', function() {
     const text = "example-text";
     const component = renderer.create(
-      <MessageItemReactionMenu />,
+      <MessageItemReactionMenu
+        message={{ sendingStatus: 'succeeded' }}
+      />,
     );
     let tree = component.toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/src/ui/MessageItemReactionMenu/index.tsx b/src/ui/MessageItemReactionMenu/index.tsx
@@ -1,17 +1,18 @@
 import React, { ReactElement, useRef } from 'react';
-import { FileMessage, UserMessage, Emoji, Reaction, EmojiContainer } from 'sendbird';
+import { FileMessage, UserMessage, Emoji, Reaction, EmojiContainer, GroupChannel, OpenChannel } from 'sendbird';
 import './index.scss';
 
 import ContextMenu, { EmojiListItems } from '../ContextMenu';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import IconButton from '../IconButton';
 import ImageRenderer from '../ImageRenderer';
 import ReactionButton from '../ReactionButton';
-import { getClassName, getEmojiListAll } from '../../utils';
+import { getClassName, getEmojiListAll, isPendingMessage, isFailedMessage } from '../../utils';
 
 interface Props {
   className?: string | Array<string>;
   message: UserMessage | FileMessage;
+  channel: GroupChannel | OpenChannel;
   userId: string;
   spaceFromTrigger?: Record<string, unknown>;
   emojiContainer?: EmojiContainer;
@@ -22,6 +23,7 @@ interface Props {
 export default function MessageItemReactionMenu({
   className,
   message,
+  channel,
   userId,
   spaceFromTrigger = {},
   emojiContainer,
@@ -31,6 +33,10 @@ export default function MessageItemReactionMenu({
   const triggerRef = useRef(null);
   const containerRef = useRef(null);
 
+  if(isPendingMessage(channel, message) || isFailedMessage(channel, message)) {
+    return null;
+  }
+
   return (
     <div
       className={getClassName([className, 'sendbird-message-item-reaction-menu'])}
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -114,7 +114,7 @@ export const getOutgoingMessageStates = (): OutgoingMessageStates => ({ ...Outgo
 export const getOutgoingMessageState = (channel: GroupChannel | OpenChannel, message: UserMessage | FileMessage): string => {
   if (message.sendingStatus === 'pending') return OutgoingMessageStates.PENDING;
   if (message.sendingStatus === 'failed') return OutgoingMessageStates.FAILED;
-  if (channel.isGroupChannel()) {
+  if (channel?.isGroupChannel?.()) {
     /* GroupChannel only */
     if ((channel as GroupChannel).getUnreadMemberCount(message) === 0) {
       return OutgoingMessageStates.READ;
@@ -137,6 +137,7 @@ export const isDeliveredMessage = (channel: GroupChannel, message: UserMessage |
 export const isReadMessage = (channel: GroupChannel, message: UserMessage | FileMessage): boolean => (
   getOutgoingMessageState(channel, message) === OutgoingMessageStates.READ
 );
+// TODO: Remove channel from the params, it seems unnecessary
 export const isFailedMessage = (channel: GroupChannel | OpenChannel, message: UserMessage | FileMessage): boolean => (
   getOutgoingMessageState(channel, message) === OutgoingMessageStates.FAILED
 );
@@ -288,13 +289,18 @@ export const copyToClipboard = (text: string): boolean => {
 };
 
 export const getEmojiListAll = (emojiContainer: EmojiContainer): Array<Emoji> => (
-  emojiContainer.emojiCategories
-    .map((emojiCategory: EmojiCategory) => emojiCategory.emojis)
+  emojiContainer?.emojiCategories?.map((emojiCategory: EmojiCategory) => emojiCategory.emojis)
     .reduce((prevArr: Array<Emoji>, currArr: Array<Emoji>) => prevArr.concat(currArr), [])
 );
 export const getEmojiMapAll = (emojiContainer: EmojiContainer): Map<string, Emoji> => {
   const emojiMap = new Map();
-  emojiContainer.emojiCategories.forEach((category: EmojiCategory) => category.emojis.forEach((emoji: Emoji): void => { emojiMap.set(emoji.key, emoji) }));
+  emojiContainer?.emojiCategories?.forEach((category: EmojiCategory) => {
+    category?.emojis?.forEach((emoji: Emoji): void => {
+      if (emoji && emoji.key) {
+        emojiMap.set(emoji.key, emoji);
+      }
+    });
+  });
   return emojiMap;
 };
 

Original file line number	Diff line number	Diff line change
`@@ -6,3 +6,4 @@ export const SET_QUERY_INVALID = 'SET_QUERY_INVALID';`
`6`	`6`
`7`	`7`	`export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';`
`8`	`8`	`export const CHANNEL_INVALID = 'CHANNEL_INVALID';`
	`9`	`+export const RESET_SEARCH_STRING = 'RESET_SEARCH_STRING';`
Original file line number	Diff line number	Diff line change
`@@ -73,6 +73,12 @@ export default function reducer(`
`73`	`73`	`hasMoreResult: state.currentMessageSearchQuery.hasNext,`
`74`	`74`	`};`
`75`	`75`	`}`
	`76`	`+ case actionTypes.RESET_SEARCH_STRING: {`
	`77`	`+ return {`
	`78`	`+ ...state,`
	`79`	`+ allMessages: [],`
	`80`	`+ };`
	`81`	`+ }`
`76`	`82`	`default: {`
`77`	`83`	`return state;`
`78`	`84`	`}`