feat: Add disableMarkAsRead to the Channel comp (#329)

Author: HoonBaek

scripts/index_d_ts

@@ -465,6 +465,7 @@ declare module "SendbirdUIKitGlobal" {
     queries?: ChannelQueries;
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
     disableUserProfile?: boolean;
+    disableMarkAsRead?: boolean;
   };
 
   export interface ChannelUIProps {

src/index.d.ts

@@ -636,6 +636,7 @@ type ChannelContextProps = {
   queries?: ChannelQueries;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   disableUserProfile?: boolean;
+  disableMarkAsRead?: boolean;
 };
 
 interface ChannelUIProps {

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

@@ -47,6 +47,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
     setHighLightedMessageId,
     scrollRef,
     messagesDispatcher,
+    disableMarkAsRead,
   } = useChannelContext();
   const [unreadCount, setUnreadCount] = useState(0);
   useEffect(() => {
@@ -117,15 +118,17 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
               if (scrollRef?.current?.scrollTop) {
                 scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
               }
-              try {
-                currentGroupChannel?.markAsRead();
-              } catch {
-                //
+              if (!disableMarkAsRead) {
+                try {
+                  currentGroupChannel?.markAsRead();
+                } catch {
+                  //
+                }
+                messagesDispatcher({
+                  type: messageActionTypes.MARK_AS_READ,
+                  payload: { channel: currentGroupChannel },
+                });
               }
-              messagesDispatcher({
-                type: messageActionTypes.MARK_AS_READ,
-                payload: { channel: currentGroupChannel },
-              });
               setInitialTimeStamp(null);
               setAnimatedMessageId(null);
               setHighLightedMessageId(null);

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

@@ -39,6 +39,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
     messagesDispatcher,
     messageActionTypes,
     currentGroupChannel,
+    disableMarkAsRead,
   } = useChannelContext();
   const [scrollBottom, setScrollBottom] = useState(0);
 
@@ -90,7 +91,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
     // do this later
     setTimeout(() => {
       // mark as read if scroll is at end
-      if (clientHeight + scrollTop === scrollHeight) {
+      if (!disableMarkAsRead && clientHeight + scrollTop === scrollHeight) {
         messagesDispatcher({
           type: messageActionTypes.MARK_AS_READ,
           payload: { channel: currentGroupChannel },

src/smart-components/Channel/context/ChannelProvider.tsx

@@ -83,6 +83,7 @@ export type ChannelContextProps = {
   queries?: ChannelQueries;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   disableUserProfile?: boolean;
+  disableMarkAsRead?: boolean;
 };
 
 interface MessageStoreInterface {
@@ -117,7 +118,7 @@ interface UpdateMessageProps {
 
 interface ChannelProviderInterface extends ChannelContextProps, MessageStoreInterface {
   scrollToMessage?(createdAt: number, messageId: number): void;
-  messageActionTypes: Record<string ,string>;
+  messageActionTypes: Record<string, string>;
   messagesDispatcher: CustomUseReducerDispatcher;
   quoteMessage: UserMessage | FileMessage;
   setQuoteMessage: React.Dispatch<React.SetStateAction<UserMessage | FileMessage>>;
@@ -164,6 +165,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     onSearchClick,
     replyType,
     queries,
+    disableMarkAsRead = false,
   } = props;
 
   const globalStore = useSendbirdStateContext();
@@ -271,7 +273,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
   // to create message-datasource
   // this hook sets currentGroupChannel asynchronously
   useGetChannel(
-    { channelUrl, sdkInit },
+    { channelUrl, sdkInit, disableMarkAsRead },
     { messagesDispatcher, sdk, logger },
   );
 
@@ -282,7 +284,12 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
 
   // Hook to handle ChannelEvents and send values to useReducer using messagesDispatcher
   useHandleChannelEvents(
-    { currentGroupChannel, sdkInit, hasMoreNext },
+    {
+      currentGroupChannel,
+      sdkInit,
+      hasMoreNext,
+      disableMarkAsRead
+    },
     {
       messagesDispatcher,
       sdk,
@@ -316,7 +323,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
   }, [channelUrl, sdkInit]);
 
   // handling connection breaks
-  useHandleReconnect({ isOnline, replyType }, {
+  useHandleReconnect({ isOnline, replyType, disableMarkAsRead }, {
     logger,
     sdk,
     currentGroupChannel,
@@ -368,6 +375,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
       onSearchClick,
       replyType,
       queries,
+      disableMarkAsRead,
 
       // messagesStore
       allMessages,

src/smart-components/Channel/context/hooks/useGetChannel.js

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import * as messageActionTypes from '../dux/actionTypes';
 
-function useSetChannel({ channelUrl, sdkInit }, {
+function useSetChannel({ channelUrl, sdkInit, disableMarkAsRead }, {
   messagesDispatcher,
   sdk,
   logger,
@@ -19,11 +19,13 @@ function useSetChannel({ channelUrl, sdkInit }, {
           });
 
           logger.info('Channel: Mark as read', groupChannel);
-          // this order is important - this mark as read should update the event handler up above
-          try {
-            groupChannel.markAsRead();
-          } catch {
-            //
+          if (!disableMarkAsRead) {
+            // this order is important - this mark as read should update the event handler up above
+            try {
+              groupChannel.markAsRead();
+            } catch {
+              //
+            }
           }
         })
         .catch((e) => {

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

@@ -20,6 +20,7 @@ import * as messageActions from '../dux/actionTypes';
 interface DynamicParams {
   sdkInit: boolean;
   hasMoreNext: boolean;
+  disableMarkAsRead: boolean;
   currentGroupChannel: GroupChannel;
 }
 interface StaticParams {
@@ -34,6 +35,7 @@ function useHandleChannelEvents(
   {
     sdkInit,
     hasMoreNext,
+    disableMarkAsRead,
     currentGroupChannel,
   }: DynamicParams,
   {
@@ -69,7 +71,9 @@ function useHandleChannelEvents(
             if (scrollToEnd) {
               try {
                 setTimeout(() => {
-                  currentGroupChannel?.markAsRead?.();
+                  if (!disableMarkAsRead) {
+                    currentGroupChannel?.markAsRead?.();
+                  }
                   scrollIntoLast();
                 });
               } catch (error) {

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

@@ -13,6 +13,7 @@ import { NEXT_RESULT_SIZE } from '../const';
 interface DynamicParams {
   isOnline: boolean;
   replyType?: string;
+  disableMarkAsRead: boolean;
 }
 
 interface StaticParams {
@@ -24,7 +25,7 @@ interface StaticParams {
 }
 
 function useHandleReconnect(
-  { isOnline, replyType }: DynamicParams,
+  { isOnline, replyType, disableMarkAsRead }: DynamicParams,
   {
     logger,
     sdk,
@@ -88,10 +89,12 @@ function useHandleReconnect(
                   payload: { currentGroupChannel },
                 });
               })
-              try {
-                currentGroupChannel?.markAsRead?.();
-              } catch {
-                //
+              if (!disableMarkAsRead) {
+                try {
+                  currentGroupChannel?.markAsRead?.();
+                } catch {
+                  //
+                }
               }
           });
       }

src/smart-components/Channel/index.tsx

@@ -27,6 +27,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
       queries={props?.queries}
       renderUserProfile={props?.renderUserProfile}
       disableUserProfile={props?.disableUserProfile}
+      disableMarkAsRead={props?.disableMarkAsRead}
     >
       <ChannelUI
         renderPlaceholderLoader={props?.renderPlaceholderLoader}