fix: Handle all chances of command not recieved error (#230)

* Handle chances of command not recieved error in markAsRead
* Experimental markasread handling -> longer times, no more call after unmount
* Move typing handler in channellist into local variable

Author: sravan-s

src/lib/hooks/useOnlineStatus.js

@@ -8,25 +8,30 @@ function useConnectionStatus(sdk, logger) {
 
   useEffect(() => {
     const uniqueHandlerId = uuidv4();
-    logger.warning('sdk changed', uniqueHandlerId);
-    const handler = new ConnectionHandler();
-
-    handler.onReconnectStarted = () => {
-      setIsOnline(false);
-      logger.warning('onReconnectStarted', { isOnline });
-    };
-    handler.onReconnectSucceeded = () => {
-      setIsOnline(true);
-      logger.warning('onReconnectSucceeded', { isOnline });
-    };
-    handler.onReconnectFailed = () => {
-      sdk.reconnect();
-      logger.warning('onReconnectFailed');
-    };
-    logger.info('Added ConnectionHandler', uniqueHandlerId);
-
-    if (sdk?.addConnectionHandler) {
-      sdk.addConnectionHandler(uniqueHandlerId, handler);
+    try {
+      logger.warning('sdk changed', uniqueHandlerId);
+      const handler = new ConnectionHandler();
+      handler.onDisconnected = () => {
+        logger.warning('onDisconnected', { isOnline });
+      };
+      handler.onReconnectStarted = () => {
+        setIsOnline(false);
+        logger.warning('onReconnectStarted', { isOnline });
+      };
+      handler.onReconnectSucceeded = () => {
+        setIsOnline(true);
+        logger.warning('onReconnectSucceeded', { isOnline });
+      };
+      handler.onReconnectFailed = () => {
+        sdk.reconnect();
+        logger.warning('onReconnectFailed');
+      };
+      logger.info('Added ConnectionHandler', uniqueHandlerId);
+      if (sdk?.addConnectionHandler) {
+        sdk.addConnectionHandler(uniqueHandlerId, handler);
+      }
+    } catch {
+      //
     }
     return () => {
       try {

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

@@ -117,7 +117,11 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
               if (scrollRef?.current?.scrollTop) {
                 scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
               }
-              currentGroupChannel?.markAsRead();
+              try {
+                currentGroupChannel?.markAsRead();
+              } catch {
+                //
+              }
               messagesDispatcher({
                 type: messageActionTypes.MARK_AS_READ,
                 payload: { channel: currentGroupChannel },

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

@@ -95,7 +95,11 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
           type: messageActionTypes.MARK_AS_READ,
           payload: { channel: currentGroupChannel },
         });
-        currentGroupChannel?.markAsRead();
+        try {
+          currentGroupChannel?.markAsRead();
+        } catch {
+          //
+        }
       }
     }, 500);
   };

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

@@ -20,7 +20,11 @@ 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
-          groupChannel.markAsRead();
+          try {
+            groupChannel.markAsRead();
+          } catch {
+            //
+          }
         })
         .catch((e) => {
           logger.warning('Channel | useSetChannel fetch channel failed', { channelUrl, e });

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

@@ -88,9 +88,11 @@ function useHandleReconnect(
                   payload: { currentGroupChannel },
                 });
               })
-              .finally(() => {
+              try {
                 currentGroupChannel?.markAsRead?.();
-              });
+              } catch {
+                //
+              }
           });
       }
     };

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

@@ -1,6 +1,6 @@
 import './channel-list-ui.scss';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { GroupChannel, Member, SendbirdGroupChat } from '@sendbird/chat/groupChannel';
 import type { User } from '@sendbird/chat';
 
@@ -74,6 +74,25 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
   const sdkError = sdkStore?.error;
   const sdkIntialized = sdkStore?.initialized || false;
 
+  const [channelsTomarkAsRead, setChannelsToMarkAsRead] = useState([]);
+  useEffect(() => {
+    // https://stackoverflow.com/a/60907638
+    let isMounted = true;
+    if (channelsTomarkAsRead?.length > 0) {
+      channelsTomarkAsRead?.forEach((c, idx) => {
+        // Plan-based rate limits - minimum limit is 5 requests per second
+        setTimeout(() => {
+          if (isMounted) {
+            c?.markAsDelivered();
+          }
+        }, 2000 * idx);
+      });
+    }
+    return () => {
+      isMounted = false;
+    }
+  }, [channelsTomarkAsRead]);
+
   return (
     <>
       <div className="sendbird-channel-list__header">
@@ -124,12 +143,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
               if (canSetMarkAsDelivered) {
                 logger.info('ChannelList: Marking all channels as read');
                 // eslint-disable-next-line no-unused-expressions
-                channelList?.forEach((c, idx) => {
-                  // Plan-based rate limits - minimum limit is 5 requests per second
-                  setTimeout(() => {
-                    c?.markAsDelivered();
-                  }, 300 * idx);
-                });
+                setChannelsToMarkAsRead(channelList);
               }
             }).catch((err) => {
               logger.info('ChannelList: Fetching channels failed', err);

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

@@ -174,9 +174,27 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
 
   const [channelSource, setChannelSource] = useState<GroupChannelListQuerySb>();
   const [sdkChannelHandlerId, setSdkChannelHandlerId] = useState<string | null>(null);
-  const [typingHandlerId, setTypingHandlerId] = useState<string | null>(null);
   const [typingChannels, setTypingChannels] = useState<Array<GroupChannel>>([]);
 
+  const [channelsTomarkAsRead, setChannelsToMarkAsRead] = useState([]);
+  useEffect(() => {
+    // https://stackoverflow.com/a/60907638
+    let isMounted = true;
+    if (channelsTomarkAsRead?.length > 0) {
+      channelsTomarkAsRead?.forEach((c, idx) => {
+        // Plan-based rate limits - minimum limit is 5 requests per second
+        setTimeout(() => {
+          if (isMounted) {
+            c?.markAsDelivered();
+          }
+        }, 2000 * idx);
+      });
+    }
+    return () => {
+      isMounted = false;
+    }
+  }, [channelsTomarkAsRead]);
+
   useEffect(() => {
     const subscriber = pubSubHandler(pubSub, channelListDispatcher);
     return () => {
@@ -198,6 +216,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
         logger,
         sortChannelList,
         disableAutoSelect,
+        setChannelsToMarkAsRead,
       });
     } else {
       logger.info('ChannelList: Removing channelHandlers');
@@ -222,8 +241,9 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
   }, [sdkIntialized, userFilledChannelListQuery, sortChannelList]);
 
   useEffect(() => {
+    let typingHandlerId = null;
     if (sdk?.groupChannel?.addGroupChannelHandler) {
-      const handlerId = uuidv4()
+      typingHandlerId = uuidv4();
       const handler = new GroupChannelHandler({
         onTypingStatusUpdated: (channel) => {
           const typingMemberCount = channel?.getTypingUsers()?.length
@@ -273,11 +293,10 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
             });
         },
       });
-      sdk?.groupChannel?.addGroupChannelHandler(handlerId, handler)
-      setTypingHandlerId(handlerId)
+      sdk?.groupChannel?.addGroupChannelHandler(typingHandlerId, handler);
     }
     return () => {
-      if (sdk?.groupChannel?.removeGroupChannelHandler) {
+      if (sdk?.groupChannel?.removeGroupChannelHandler && typingHandlerId) {
         sdk.groupChannel.removeGroupChannelHandler(typingHandlerId);
       }
     }

src/smart-components/ChannelList/utils.js

@@ -157,6 +157,7 @@ function setupChannelList({
   logger,
   sortChannelList,
   disableAutoSelect,
+  setChannelsToMarkAsRead,
 }) {
   if (sdk?.groupChannel) {
     createEventHandler({
@@ -211,15 +212,7 @@ function setupChannelList({
         ?.find((feature) => (feature === DELIVERY_RECIPT));
 
       if (canSetMarkAsDelivered) {
-        logger.info('ChannelList: Marking all channels as read');
-        // eslint-disable-next-line no-unused-expressions
-        channelList.forEach((c, idx) => {
-          // Plan-based rate limits - minimum limit is 5 requests per second
-          setTimeout(() => {
-            // eslint-disable-next-line no-unused-expressions
-            c.markAsDelivered();
-          }, 300 * idx);
-        });
+        setChannelsToMarkAsRead(sortedChannelList);
       }
     }).catch((err) => {
       if (err) {