refactor: should disable in message input wrapper view (#1137)

## Changes - Updated the logic to align with other platforms for consistency. - Relocated the logic to the same section where other `disabled` conditions are checked. ticket: [AC-2781] [AC-2781]: https://sendbird.atlassian.net/browse/AC-2781?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
sendbird · Jun 17, 2024 · a8297f6 · a8297f6
1 parent 7c61d09
commit a8297f6
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 51 deletions.
diff --git a/src/modules/Channel/components/MessageInputWrapper/index.tsx b/src/modules/Channel/components/MessageInputWrapper/index.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
-
-import { getSuggestedReplies } from '../../../../utils';
 import MessageInputWrapperView from '../../../GroupChannel/components/MessageInputWrapper/MessageInputWrapperView';
 import { useChannelContext } from '../../context/ChannelProvider';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
 
 export interface MessageInputWrapperProps {
@@ -16,30 +13,13 @@ export interface MessageInputWrapperProps {
 }
 
 export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
-  const { config } = useSendbirdStateContext();
   const context = useChannelContext();
-  const {
-    quoteMessage,
-    localMessages,
-    currentGroupChannel,
-    sendMessage,
-    sendFileMessage,
-    sendVoiceMessage,
-    sendMultipleFilesMessage,
-  } = context;
-
-  const lastMessage = currentGroupChannel?.lastMessage;
-  const isLastMessageSuggestedRepliesEnabled = config?.groupChannel?.enableSuggestedReplies
-    && getSuggestedReplies(lastMessage).length > 0
-    && localMessages?.length === 0;
-  const disableMessageInput = props.disabled
-    || isLastMessageSuggestedRepliesEnabled && !!lastMessage?.extendedMessagePayload?.['disable_chat_input'];
+  const { quoteMessage, currentGroupChannel, sendMessage, sendFileMessage, sendVoiceMessage, sendMultipleFilesMessage } = context;
 
   return (
     <MessageInputWrapperView
       {...props}
       {...context}
-      disabled={disableMessageInput}
       currentChannel={currentGroupChannel}
       sendUserMessage={(params) => {
         return sendMessage({

diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
@@ -14,6 +14,7 @@ import type {
 import {
   isDisabledBecauseFrozen,
   isDisabledBecauseMuted,
+  isDisabledBecauseSuggestedReplies,
 } from '../../context/utils';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
@@ -97,11 +98,13 @@ export const MessageInputWrapperView = React.forwardRef((
 
   // Conditions
   const isMessageInputDisabled = loading
-    || !currentChannel
+    || (!currentChannel || !sdk)
+    || (!sdk.isCacheEnabled && !isOnline)
     || isDisabledBecauseFrozen(currentChannel)
     || isDisabledBecauseMuted(currentChannel)
-    || (!isOnline && !sdk?.isCacheEnabled)
+    || isDisabledBecauseSuggestedReplies(currentChannel, config.groupChannel.enableSuggestedReplies)
     || disabled;
+
   const showSuggestedMentionList = !isMessageInputDisabled
     && isMentionEnabled
     && mentionNickname.length > 0
@@ -192,7 +195,7 @@ export const MessageInputWrapperView = React.forwardRef((
       ) : (
         <MessageInput
           className="sendbird-message-input-wrapper__message-input"
-          channel={currentChannel as GroupChannel}
+          channel={currentChannel}
           channelUrl={currentChannel?.url}
           isMobile={isMobile}
           acceptableMimeTypes={acceptableMimeTypes}

diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 import MessageInputWrapperView from './MessageInputWrapperView';
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
-import { useIIFE } from '@sendbird/uikit-tools';
-import { getSuggestedReplies, isSendableMessage } from '../../../../utils';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 
 export interface MessageInputWrapperProps {
@@ -16,31 +13,8 @@ export interface MessageInputWrapperProps {
 }
 
 export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
-  const { config } = useSendbirdStateContext();
   const context = useGroupChannelContext();
-  const {
-    messages,
-    currentChannel,
-  } = context;
-  const lastMessage = currentChannel?.lastMessage;
-  const isLastMessageSuggestedRepliesEnabled = useIIFE(() => {
-    if (!config?.groupChannel?.enableSuggestedReplies) return false;
-    if (getSuggestedReplies(lastMessage ?? undefined).length === 0) return false;
-    const lastMessageInContext = messages[messages.length - 1];
-    if (isSendableMessage(lastMessageInContext) && lastMessageInContext.sendingStatus !== 'succeeded') return false;
-
-    return true;
-  });
-  const disableMessageInput = props.disabled
-    || isLastMessageSuggestedRepliesEnabled && !!lastMessage?.extendedMessagePayload?.['disable_chat_input'];
-
-  return (
-    <MessageInputWrapperView
-      {...props}
-      {...context}
-      disabled={disableMessageInput}
-    />
-  );
+  return <MessageInputWrapperView {...props} {...context} />;
 };
 
 export { VoiceMessageInputWrapper, type VoiceMessageInputWrapperProps } from './VoiceMessageInputWrapper';

diff --git a/src/modules/GroupChannel/context/utils.ts b/src/modules/GroupChannel/context/utils.ts
@@ -35,3 +35,7 @@ export const isDisabledBecauseMuted = (groupChannel?: GroupChannel | null) => {
   if (!groupChannel) return false;
   return groupChannel.myMutedState === 'muted';
 };
+
+export const isDisabledBecauseSuggestedReplies = (channel: GroupChannel | null | undefined, enableSuggestedReplies: boolean) => {
+  return enableSuggestedReplies && !!channel?.lastMessage?.extendedMessagePayload?.disable_chat_input;
+};