fix: Keep scroll if context menu is opened when receiving messages (#433)

Refactor
* Replace `FrozenNotification`, `UnreadCount` (Also notification bar),
and `LoadingPlaceHolder` into the `MessageList` component from
`ChannelUI`
Bugfix
* Do not `scrollIntoBottom` if the message is not reached the bottom
scrollIntoBottom is a function moving scroll when a new message is
received
* Do not `handleScroll` when a message is initially mounted
handleScroll is a function moving scroll when the last message's layout
is changed

Author: HoonBaek

src/smart-components/Channel/components/ChannelHeader/index.tsx

@@ -13,7 +13,13 @@ import { useChannelContext } from '../../context/ChannelProvider';
 import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import { noop } from '../../../../utils/utils'
 
-const ChannelHeader: React.FC = () => {
+interface ChannelHeaderProps {
+  className?: string;
+}
+
+const ChannelHeader: React.FC<ChannelHeaderProps> = ({
+  className = '',
+}) => {
   const globalStore = useSendbirdStateContext();
   const userId = globalStore?.config?.userId;
   const theme = globalStore?.config?.theme;
@@ -33,7 +39,7 @@ const ChannelHeader: React.FC = () => {
 
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className="sendbird-chat-header">
+    <div className={`sendbird-chat-header ${className}`}>
       <div className="sendbird-chat-header__left">
         {
           isMobile && (

src/smart-components/Channel/components/ChannelUI/index.tsx

@@ -1,6 +1,6 @@
 import './channel-ui.scss';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
 import { useChannelContext } from '../../context/ChannelProvider';
@@ -9,11 +9,8 @@ import ConnectionStatus from '../../../../ui/ConnectionStatus';
 import ChannelHeader from '../ChannelHeader';
 import MessageList from '../MessageList';
 import TypingIndicator from '../TypingIndicator';
-import FrozenNotification from '../FrozenNotification';
-import UnreadCount from '../UnreadCount';
 import MessageInputWrapper from '../MessageInput';
 import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
-import * as messageActionTypes from '../../context/dux/actionTypes';
 
 export interface ChannelUIProps {
   isLoading?: boolean;
@@ -23,9 +20,9 @@ export interface ChannelUIProps {
   renderChannelHeader?: () => React.ReactElement;
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderMessageInput?: () => React.ReactElement;
-  renderFileUploadIcon?: () =>  React.ReactElement;
-  renderVoiceMessageIcon?: () =>  React.ReactElement;
-  renderSendMessageIcon?: () =>  React.ReactElement;
+  renderFileUploadIcon?: () => React.ReactElement;
+  renderVoiceMessageIcon?: () => React.ReactElement;
+  renderSendMessageIcon?: () => React.ReactElement;
   renderTypingIndicator?: () => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
 }
@@ -45,28 +42,9 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   renderSendMessageIcon,
 }: ChannelUIProps) => {
   const {
-    currentGroupChannel,
     channelUrl,
     isInvalid,
-    unreadSince,
-    loading,
-    setInitialTimeStamp,
-    setAnimatedMessageId,
-    setHighLightedMessageId,
-    scrollRef,
-    messagesDispatcher,
-    disableMarkAsRead,
   } = useChannelContext();
-  const [unreadCount, setUnreadCount] = useState(0);
-  useEffect(() => {
-    // simple debounce to avoid flicker of UnreadCount badge
-    const handler = setTimeout(() => {
-      setUnreadCount(currentGroupChannel?.unreadMessageCount);
-    }, 1000);
-    return () => {
-      clearTimeout(handler);
-    }
-  }, [currentGroupChannel?.unreadMessageCount]);
 
   const globalStore = useSendbirdStateContext();
   const sdkError = globalStore?.stores?.sdkStore?.error;
@@ -122,62 +100,16 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   }
   return (
     <div className='sendbird-conversation'>
-      {
-        renderChannelHeader?.() || (
-          <ChannelHeader />
-        )
-      }
-      {
-        currentGroupChannel?.isFrozen && (
-          <FrozenNotification />
-        )
-      }
-      {
-        unreadCount > 0 && (
-          <UnreadCount
-            count={unreadCount}
-            time={unreadSince}
-            onClick={() => {
-              setUnreadCount(0);
-              if (scrollRef?.current?.scrollTop) {
-                scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
-              }
-              if (!disableMarkAsRead) {
-                try {
-                  currentGroupChannel?.markAsRead();
-                } catch {
-                  //
-                }
-                messagesDispatcher({
-                  type: messageActionTypes.MARK_AS_READ,
-                  payload: { channel: currentGroupChannel },
-                });
-              }
-              setInitialTimeStamp(null);
-              setAnimatedMessageId(null);
-              setHighLightedMessageId(null);
-            }}
-          />
-        )
-      }
-      {
-        loading
-          ? (
-            <div className="sendbird-conversation">
-              {
-                renderPlaceholderLoader?.() || (
-                  <PlaceHolder type={PlaceHolderTypes.LOADING} />
-                )
-              }
-            </div>
-          ) : (
-            <MessageList
-              renderMessage={renderMessage}
-              renderPlaceholderEmpty={renderPlaceholderEmpty}
-              renderCustomSeparator={renderCustomSeparator}
-            />
-          )
-      }
+      {renderChannelHeader?.() || (
+        <ChannelHeader className="sendbird-conversation__channel-header" />
+      )}
+      <MessageList
+        className="sendbird-conversation__message-list"
+        renderMessage={renderMessage}
+        renderPlaceholderEmpty={renderPlaceholderEmpty}
+        renderCustomSeparator={renderCustomSeparator}
+        renderPlaceholderLoader={renderPlaceholderLoader}
+      />
       <div className="sendbird-conversation__footer">
         {
           renderMessageInput?.() || (

src/smart-components/Channel/components/FrozenNotification/index.tsx

@@ -5,10 +5,16 @@ import './frozen-notification.scss';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography } from '../../../../ui/Label';
 
-const FrozenNotification = (): JSX.Element => {
+interface FrozenNotificationProps {
+  className?: string;
+}
+
+const FrozenNotification = ({
+  className = '',
+}: FrozenNotificationProps): React.ReactElement => {
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className="sendbird-notification sendbird-notification--frozen">
+    <div className={`sendbird-notification sendbird-notification--frozen ${className}`}>
       <Label
         className="sendbird-notification__text"
         type={LabelTypography.CAPTION_2}

src/smart-components/Channel/components/Message/index.tsx

@@ -8,6 +8,7 @@ import React, {
 import type { FileMessage } from '@sendbird/chat/message';
 import format from 'date-fns/format';
 
+import useDidMountEffect from '../../../../utils/useDidMountEffect';
 import SuggestedMentionList from '../SuggestedMentionList';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelContext } from '../../context/ChannelProvider';
@@ -39,19 +40,17 @@ type MessageUIProps = {
 };
 
 // todo: Refactor this component, is too complex now
-const Message = (props: MessageUIProps): React.FC<MessageUIProps> | React.ReactElement => {
-  const {
-    message,
-    hasSeparator,
-    chainTop,
-    chainBottom,
-    handleScroll,
-    renderCustomSeparator,
-    renderEditInput,
-    renderMessage,
-    renderMessageContent,
-  } = props;
-
+const Message = ({
+  message,
+  hasSeparator,
+  chainTop,
+  chainBottom,
+  handleScroll,
+  renderCustomSeparator,
+  renderEditInput,
+  renderMessage,
+  renderMessageContent,
+}: MessageUIProps): React.ReactElement => {
   const { dateLocale } = useLocalization();
   const globalStore = useSendbirdStateContext();
   const {
@@ -130,8 +129,10 @@ const Message = (props: MessageUIProps): React.FC<MessageUIProps> | React.ReactE
     }));
   }, [mentionedUserIds]);
 
-  useLayoutEffect(() => {
-    handleScroll?.();
+  useDidMountEffect(() => {
+    if (currentGroupChannel?.lastMessage?.messageId === message?.messageId) {
+      handleScroll?.();
+    }
   }, [showEdit, message?.reactions?.length]);
 
   useLayoutEffect(() => {