Fix: Mark as read definitely when receiving message (#373)

* Add 10px as a buffer when calculating if the scroll reached the bottom

Author: HoonBaek

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

@@ -84,27 +84,26 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
       });
     }
 
-    // save the lastest scroll bottom value
+    // Save the lastest scroll bottom value
     if (scrollRef?.current) {
       const current = scrollRef?.current;
       setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight)
     }
 
-    // do this later
-    setTimeout(() => {
-      // mark as read if scroll is at end
-      if (!disableMarkAsRead && clientHeight + scrollTop === scrollHeight) {
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+      // Mark as read if scroll is at end
+      setTimeout(() => {
         messagesDispatcher({
           type: messageActionTypes.MARK_AS_READ,
           payload: { channel: currentGroupChannel },
         });
         try {
-          currentGroupChannel?.markAsRead();
+          currentGroupChannel?.markAsRead?.();
         } catch {
           //
         }
-      }
-    }, 500);
+      }, 500);
+    }
   };
 
   const onClickScrollBot = () => {

src/smart-components/Channel/context/hooks/useHandleChannelEvents.ts

@@ -56,7 +56,8 @@ function useHandleChannelEvents({
             let scrollToEnd = false;
             try {
               const { current } = scrollRef;
-              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight;
+              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              // 10 is a buffer
             } catch (error) {
               //
             }

src/ui/MessageStatus/index.tsx

@@ -1,5 +1,5 @@
 import './index.scss';
-import React, { useMemo } from 'react';
+import React from 'react';
 import format from 'date-fns/format';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { FileMessage, UserMessage } from '@sendbird/chat/message';
@@ -29,9 +29,7 @@ export default function MessageStatus({
   channel,
 }: MessageStatusProps): React.ReactElement {
   const { dateLocale } = useLocalization();
-  const status = useMemo(() => (
-    getOutgoingMessageState(channel, message)
-  ), [channel, message]);
+  const status = getOutgoingMessageState(channel, message);
   const hideMessageStatusIcon = channel?.isGroupChannel?.() && (
     (channel.isSuper || channel.isPublic || channel.isBroadcast)
     && !(status === OutgoingMessageStates.PENDING || status === OutgoingMessageStates.FAILED)