fix: update open channel interface properly (#1049)

- Update the type of `renderMessage` in the OpenChannel module.
- Deprecate the `renderInput` prop and add a new `renderMessageInput`
prop.
- Refactor `isXXXMessage` utils and removed redundant type-casting

Author: bang9

src/modules/Channel/context/hooks/useSendFileMessageCallback.ts

@@ -47,11 +47,16 @@ export default function useSendFileMessageCallback(
           pubSub.publish(topics.SEND_MESSAGE_START, {
             /* pubSub is used instead of messagesDispatcher
               to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+            // TODO: remove data pollution
             message: {
               ...pendingMessage,
               url: URL.createObjectURL(compressedFile),
               // pending thumbnail message seems to be failed
               requestState: 'pending',
+              isUserMessage: pendingMessage.isUserMessage,
+              isFileMessage: pendingMessage.isFileMessage,
+              isAdminMessage: pendingMessage.isAdminMessage,
+              isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
             } as unknown as FileMessage,
             channel: currentGroupChannel,
             publishingModules: [PublishingModuleType.CHANNEL],

src/modules/OpenChannel/components/OpenChannelMessage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, ReactElement, useMemo } from 'react';
+import React, { useState, useRef, ReactElement } from 'react';
 import { AdminMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
 import { User } from '@sendbird/chat';
 import format from 'date-fns/format';
@@ -24,17 +24,15 @@ import { useLocalization } from '../../../../lib/LocalizationContext';
 import { CoreMessageType, SendableMessageType } from '../../../../utils';
 
 export type OpenChannelMessageProps = {
-  renderMessage?: (
-    props: RenderMessageProps
-  ) => React.ElementType<RenderMessageProps>;
+  renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   message: CoreMessageType;
   chainTop?: boolean;
   chainBottom?: boolean;
   hasSeparator?: boolean;
   editDisabled?: boolean;
 };
 
-export default function MessagOpenChannelMessageeHoc(
+export default function OpenChannelMessage(
   props: OpenChannelMessageProps,
 ): ReactElement {
   const { message, chainTop, chainBottom, hasSeparator, renderMessage } = props;
@@ -57,13 +55,6 @@ export default function MessagOpenChannelMessageeHoc(
     sender = (message as SendableMessageType)?.sender;
   }
 
-  const RenderedMessage = useMemo(
-    () => (props: RenderMessageProps) => {
-      return <>{renderMessage ? renderMessage(props) : null}</>;
-    },
-    [message, renderMessage],
-  );
-
   const [showEdit, setShowEdit] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
   const [showFileViewer, setShowFileViewer] = useState(false);
@@ -80,14 +71,10 @@ export default function MessagOpenChannelMessageeHoc(
         === SendingMessageStatus.FAILED;
   }
 
-  if (renderMessage && RenderedMessage) {
+  if (renderMessage) {
     return (
       <div className="sendbird-msg-hoc sendbird-msg--scroll-ref">
-        <RenderedMessage
-          message={message}
-          chainTop={chainTop}
-          chainBottom={chainBottom}
-        />
+        {renderMessage({ message, chainTop, chainBottom })}
       </div>
     );
   }

src/modules/OpenChannel/components/OpenChannelMessageList/index.tsx

@@ -15,15 +15,15 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useHandleOnScrollCallback } from '../../../../hooks/useHandleOnScrollCallback';
 import { compareMessagesForGrouping } from '../../../../utils/messages';
 
-export type OpenchannelMessageListProps = {
-  renderMessage?: (props: RenderMessageProps) => React.ElementType<RenderMessageProps>;
+export type OpenChannelMessageListProps = {
+  renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderPlaceHolderEmptyList?: () => React.ReactElement;
 };
 
-function OpenchannelMessageList(
-  props: OpenchannelMessageListProps,
-  ref: React.RefObject<HTMLDivElement>,
-): ReactElement {
+/** @deprecated * */
+export type OpenchannelMessageListProps = OpenChannelMessageListProps;
+
+function OpenChannelMessageList(props: OpenChannelMessageListProps, ref: React.RefObject<HTMLDivElement>): ReactElement {
   const {
     isMessageGroupingEnabled = true,
     allMessages,
@@ -129,4 +129,4 @@ function OpenchannelMessageList(
   );
 }
 
-export default React.forwardRef(OpenchannelMessageList);
+export default React.forwardRef(OpenChannelMessageList);

src/modules/OpenChannel/components/OpenChannelUI/index.tsx

@@ -12,23 +12,27 @@ import OpenChannelMessageList from '../OpenChannelMessageList';
 import { RenderMessageProps } from '../../../../types';
 
 export interface OpenChannelUIProps {
-  renderMessage?: (props: RenderMessageProps) => React.ElementType<RenderMessageProps>;
+  renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderHeader?: () => React.ReactElement;
-  renderInput?: () => React.ReactElement;
+  renderMessageInput?: () => React.ReactElement;
   renderPlaceHolderEmptyList?: () => React.ReactElement;
   renderPlaceHolderError?: () => React.ReactElement;
   renderPlaceHolderLoading?: () => React.ReactElement;
+
+  /** @deprecated Please use renderMessageInput instead * */
+  renderInput?: () => React.ReactElement;
 }
 
 const COMPONENT_CLASS_NAME = 'sendbird-openchannel-conversation';
 
 const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
   renderMessage,
   renderHeader,
-  renderInput,
   renderPlaceHolderEmptyList,
   renderPlaceHolderError,
   renderPlaceHolderLoading,
+  renderMessageInput,
+  renderInput,
 }: OpenChannelUIProps) => {
   const {
     currentOpenChannel,
@@ -58,28 +62,18 @@ const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
     );
   }
 
+  const renderInputComponent = renderMessageInput || renderInput;
+
   return (
     <div className={COMPONENT_CLASS_NAME}>
-      {
-        renderHeader?.() || (
-          <OpenChannelHeader />
-        )
-      }
-      {
-        currentOpenChannel?.isFrozen && (
-          <FrozenChannelNotification />
-        )
-      }
+      {renderHeader?.() || <OpenChannelHeader />}
+      {currentOpenChannel?.isFrozen && <FrozenChannelNotification />}
       <OpenChannelMessageList
         ref={conversationScrollRef}
         renderMessage={renderMessage}
         renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
       />
-      {
-        renderInput?.() || (
-          <OpenChannelInput ref={messageInputRef} />
-        )
-      }
+      {renderInputComponent?.() || <OpenChannelInput ref={messageInputRef} />}
     </div>
   );
 };

src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx

@@ -104,11 +104,16 @@ function useFileUploadCallback({
           messagesDispatcher({
             type: messageActionTypes.SENDING_MESSAGE_START,
             payload: {
+              // TODO: remove data pollution
               message: {
                 ...pendingMessage,
                 url: URL.createObjectURL(file),
                 // pending thumbnail message seems to be failed
                 requestState: 'pending',
+                isUserMessage: pendingMessage.isUserMessage,
+                isFileMessage: pendingMessage.isFileMessage,
+                isAdminMessage: pendingMessage.isAdminMessage,
+                isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
               },
               channel: currentOpenChannel,
             },

src/modules/OpenChannel/index.tsx

@@ -23,6 +23,7 @@ const OpenChannel: React.FC<OpenChannelProps> = (props: OpenChannelProps) => {
         renderMessage={props?.renderMessage}
         renderHeader={props?.renderHeader}
         renderInput={props?.renderInput}
+        renderMessageInput={props?.renderMessageInput}
         renderPlaceHolderEmptyList={props?.renderPlaceHolderEmptyList}
         renderPlaceHolderError={props?.renderPlaceHolderError}
         renderPlaceHolderLoading={props?.renderPlaceHolderLoading}

src/modules/Thread/context/hooks/useSendFileMessage.ts

@@ -56,11 +56,16 @@ export default function useSendFileMessageCallback({
             payload: {
               /* pubSub is used instead of messagesDispatcher
               to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+              // TODO: remove data pollution
               message: {
                 ...pendingMessage,
                 url: URL.createObjectURL(file),
                 // pending thumbnail message seems to be failed
                 requestState: 'pending',
+                isUserMessage: pendingMessage.isUserMessage,
+                isFileMessage: pendingMessage.isFileMessage,
+                isAdminMessage: pendingMessage.isAdminMessage,
+                isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
               },
             },
           });

src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts

@@ -73,11 +73,16 @@ export const useSendVoiceMessageCallback = ({
           payload: {
             /* pubSub is used instead of messagesDispatcher
             to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+            // TODO: remove data pollution
             message: {
               ...pendingMessage,
               url: URL.createObjectURL(file),
               // pending thumbnail message seems to be failed
               requestState: 'pending',
+              isUserMessage: pendingMessage.isUserMessage,
+              isFileMessage: pendingMessage.isFileMessage,
+              isAdminMessage: pendingMessage.isAdminMessage,
+              isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
             },
           },
         });