feat: Add disableMarkAsDelivered props into the App and Sendbird comp (#326)

Author: HoonBaek

scripts/index_d_ts

@@ -54,6 +54,7 @@ declare module "SendbirdUIKitGlobal" {
     dateLocale?: Locale;
     allowProfileEdit?: boolean;
     disableUserProfile?: boolean;
+    disableMarkAsDelivered?: boolean;
     showSearchIcon?: boolean;
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
     onProfileEditSuccess?(user: User): void;
@@ -220,6 +221,7 @@ declare module "SendbirdUIKitGlobal" {
     profileUrl?: string;
     dateLocale?: Locale;
     disableUserProfile?: boolean;
+    disableMarkAsDelivered?: boolean;
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
     allowProfileEdit?: boolean;
     userListQuery?(): UserListQuery;
@@ -239,6 +241,7 @@ declare module "SendbirdUIKitGlobal" {
 
   export interface SendBirdStateConfig {
     disableUserProfile: boolean;
+    disableMarkAsDelivered: boolean;
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
     allowProfileEdit: boolean;
     isOnline: boolean;

src/index.d.ts

@@ -101,6 +101,7 @@ interface SendBirdProviderProps {
   profileUrl?: string;
   dateLocale?: Locale;
   disableUserProfile?: boolean;
+  disableMarkAsDelivered?: boolean;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   allowProfileEdit?: boolean;
   userListQuery?(): UserListQuery;
@@ -119,6 +120,7 @@ interface SendBirdProviderProps {
 
 interface SendBirdStateConfig {
   disableUserProfile: boolean;
+  disableMarkAsDelivered: boolean;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   allowProfileEdit: boolean;
   isOnline: boolean;
@@ -270,6 +272,7 @@ interface AppProps {
   dateLocale?: Locale;
   allowProfileEdit?: boolean;
   disableUserProfile?: boolean;
+  disableMarkAsDelivered?: boolean;
   showSearchIcon?: boolean;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   onProfileEditSuccess?(user: User): void;

src/lib/Sendbird.jsx

@@ -34,6 +34,7 @@ export default function Sendbird(props) {
     customWebSocketHost,
     children,
     disableUserProfile,
+    disableMarkAsDelivered,
     renderUserProfile,
     allowProfileEdit,
     theme,
@@ -174,6 +175,7 @@ export default function Sendbird(props) {
         },
         config: {
           disableUserProfile,
+          disableMarkAsDelivered,
           renderUserProfile,
           allowProfileEdit,
           isOnline,
@@ -221,6 +223,7 @@ Sendbird.propTypes = {
   dateLocale: PropTypes.shape({}),
   profileUrl: PropTypes.string,
   disableUserProfile: PropTypes.bool,
+  disableMarkAsDelivered: PropTypes.bool,
   renderUserProfile: PropTypes.func,
   allowProfileEdit: PropTypes.bool,
   userListQuery: PropTypes.func,
@@ -269,6 +272,7 @@ Sendbird.defaultProps = {
   dateLocale: null,
   profileUrl: '',
   disableUserProfile: false,
+  disableMarkAsDelivered: false,
   renderUserProfile: null,
   allowProfileEdit: false,
   userListQuery: null,

src/lib/types.ts

@@ -33,6 +33,7 @@ export interface SendBirdProviderProps {
   profileUrl?: string;
   dateLocale?: Locale;
   disableUserProfile?: boolean;
+  disableMarkAsDelivered?: boolean;
   renderUserProfile?: (props: SendBirdTypes.RenderUserProfileProps) => React.ReactElement;
   allowProfileEdit?: boolean;
   userListQuery?(): SendBirdTypes.UserListQuery;
@@ -51,6 +52,7 @@ export interface SendBirdProviderProps {
 
 export interface SendBirdStateConfig {
   disableUserProfile: boolean;
+  disableMarkAsDelivered: boolean;
   renderUserProfile?: (props: SendBirdTypes.RenderUserProfileProps) => React.ReactElement;
   allowProfileEdit: boolean;
   isOnline: boolean;

src/smart-components/App/index.jsx

@@ -36,6 +36,7 @@ export default function App(props) {
     stringSet,
     allowProfileEdit,
     disableUserProfile,
+    disableMarkAsDelivered,
     renderUserProfile,
     showSearchIcon,
     onProfileEditSuccess,
@@ -66,6 +67,7 @@ export default function App(props) {
       config={config}
       colorSet={colorSet}
       disableUserProfile={disableUserProfile}
+      disableMarkAsDelivered={disableMarkAsDelivered}
       renderUserProfile={renderUserProfile}
       imageCompression={imageCompression}
       isReactionEnabled={isReactionEnabled}
@@ -164,6 +166,7 @@ App.propTypes = {
   profileUrl: PropTypes.string,
   allowProfileEdit: PropTypes.bool,
   disableUserProfile: PropTypes.bool,
+  disableMarkAsDelivered: PropTypes.bool,
   renderUserProfile: PropTypes.func,
   onProfileEditSuccess: PropTypes.func,
   dateLocale: PropTypes.shape({}),
@@ -210,6 +213,7 @@ App.defaultProps = {
   allowProfileEdit: false,
   onProfileEditSuccess: null,
   disableUserProfile: false,
+  disableMarkAsDelivered: false,
   showSearchIcon: false,
   renderUserProfile: null,
   config: {},

src/smart-components/ChannelList/components/ChannelListUI/index.tsx

@@ -66,9 +66,11 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
 
   const sdkStore = state?.stores?.sdkStore;
   const config = state?.config;
-
-  const isOnline = state?.config?.isOnline;
-  const logger = config?.logger;
+  const {
+    logger = null,
+    isOnline = false,
+    disableMarkAsDelivered = false,
+  } = config;
 
   const sdk = sdkStore?.sdk as SendbirdGroupChat;
   const sdkError = sdkStore?.error;
@@ -78,7 +80,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
   useEffect(() => {
     // https://stackoverflow.com/a/60907638
     let isMounted = true;
-    if (channelsTomarkAsRead?.length > 0) {
+    if (channelsTomarkAsRead?.length > 0 && !disableMarkAsDelivered) {
       channelsTomarkAsRead?.forEach((c, idx) => {
         // Plan-based rate limits - minimum limit is 5 requests per second
         setTimeout(() => {

src/smart-components/ChannelList/context/ChannelListProvider.tsx

@@ -150,8 +150,9 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
   const { sdkStore } = stores;
   const { pubSub, logger } = config;
   const {
-    isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList,
+    disableMarkAsDelivered = false,
+    isTypingIndicatorEnabledOnChannelList = false,
+    isMessageReceiptStatusEnabledOnChannelList = false,
   } = config;
   const sdk = sdkStore?.sdk as SendbirdGroupChat;
 
@@ -179,7 +180,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
   useEffect(() => {
     // https://stackoverflow.com/a/60907638
     let isMounted = true;
-    if (channelsTomarkAsRead?.length > 0) {
+    if (channelsTomarkAsRead?.length > 0 && !disableMarkAsDelivered) {
       channelsTomarkAsRead?.forEach((c, idx) => {
         // Plan-based rate limits - minimum limit is 5 requests per second
         setTimeout(() => {