feat: add reconnectOnIdle option to ChannelProvider (#690)

Addresses https://sendbird.atlassian.net/browse/AC-200 

Added an option to the ChannelProvider: `reconnectOnIdle`(default: true), which prevents data refresh in the background.

Author: AhyoungRyu

scripts/index_d_ts

@@ -584,6 +584,7 @@ declare module "SendbirdUIKitGlobal" {
     onMessageAnimated?: () => void;
     onMessageHighlighted?: () => void;
     scrollBehavior?: 'smooth' | 'auto';
+    reconnectOnIdle?: boolean;
   };
 
   export interface ChannelUIProps {

src/index.d.ts

@@ -746,6 +746,7 @@ type ChannelContextProps = {
   disableUserProfile?: boolean;
   disableMarkAsRead?: boolean;
   scrollBehavior?: 'smooth' | 'auto';
+  reconnectOnIdle?: boolean;
 };
 
 interface ChannelUIProps {

src/modules/Channel/context/ChannelProvider.tsx

@@ -96,6 +96,7 @@ export type ChannelContextProps = {
   onMessageAnimated?: () => void;
   onMessageHighlighted?: () => void;
   scrollBehavior?: 'smooth' | 'auto';
+  reconnectOnIdle?: boolean;
 };
 
 interface MessageStoreInterface {
@@ -188,6 +189,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     onMessageAnimated,
     onMessageHighlighted,
     scrollBehavior = 'auto',
+    reconnectOnIdle = true,
   } = props;
 
   const globalStore = useSendbirdStateContext();
@@ -368,7 +370,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
   }, [channelUrl, sdkInit]);
 
   // handling connection breaks
-  useHandleReconnect({ isOnline, replyType, disableMarkAsRead }, {
+  useHandleReconnect({ isOnline, replyType, disableMarkAsRead, reconnectOnIdle }, {
     logger,
     sdk,
     scrollRef,

src/modules/Channel/context/hooks/__test__/useHandleReconnect.spec.ts

@@ -0,0 +1,51 @@
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { renderHook, act } from '@testing-library/react';
+import useReconnectOnIdle from '../useReconnectOnIdle';
+
+describe('useReconnectOnIdle', () => {
+  beforeAll(() => {
+    // Mock dispatchEvent for the document object
+    document.dispatchEvent = jest.fn();
+    jest.spyOn(document, 'addEventListener');
+    jest.spyOn(document, 'removeEventListener');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should update shouldReconnect on tab visibility change', () => {
+    const hook = renderHook(() => useReconnectOnIdle(true, { url: 'url' } as GroupChannel, true));
+    expect(hook.result.current.shouldReconnect).toBe(false);
+
+    act(() => {
+      Object.defineProperty(document, 'hidden', { value: false, configurable: true });
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+    expect(hook.result.current.shouldReconnect).toBe(false);
+  });
+
+  it('should not update shouldReconnect on isOnline change', () => {
+    const { result, rerender } = renderHook(({ isOnline }) => useReconnectOnIdle(isOnline, { url: 'url' } as GroupChannel, true), {
+      initialProps: { isOnline: false },
+    });
+    expect(result.current.shouldReconnect).toBe(true);
+
+    rerender({ isOnline: true });
+    expect(result.current.shouldReconnect).toBe(false);
+  });
+
+  it('should not update shouldReconnect if reconnectOnIdle is false', async () => {
+    const reconnectOnIdle = false;
+    renderHook(({ isOnline }) => useReconnectOnIdle(isOnline, { url: 'url' } as GroupChannel, reconnectOnIdle), {
+      initialProps: { isOnline: false },
+    });
+
+    const spy = jest.spyOn(document, 'addEventListener');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    const lastCall = spy.mock.calls[spy.mock.calls.length - 1];
+    expect(lastCall).toEqual(['visibilitychange', expect.any(Function)]);
+    spy.mockRestore();
+  });
+});

src/modules/Channel/context/hooks/useHandleReconnect.ts

@@ -7,11 +7,13 @@ import { PREV_RESULT_SIZE, NEXT_RESULT_SIZE } from '../const';
 import * as messageActionTypes from '../dux/actionTypes';
 import { Logger } from '../../../../lib/SendbirdState';
 import { MarkAsReadSchedulerType } from '../../../../lib/hooks/useMarkAsReadScheduler';
+import useReconnectOnIdle from './useReconnectOnIdle';
 
 interface DynamicParams {
   isOnline: boolean;
   replyType?: string;
   disableMarkAsRead: boolean;
+  reconnectOnIdle: boolean;
 }
 
 interface StaticParams {
@@ -25,7 +27,7 @@ interface StaticParams {
 }
 
 function useHandleReconnect(
-  { isOnline, replyType, disableMarkAsRead }: DynamicParams,
+  { isOnline, replyType, disableMarkAsRead, reconnectOnIdle }: DynamicParams,
   {
     logger,
     sdk,
@@ -36,11 +38,12 @@ function useHandleReconnect(
     userFilledMessageListQuery,
   }: StaticParams,
 ): void {
+  const { shouldReconnect } = useReconnectOnIdle(isOnline, currentGroupChannel, reconnectOnIdle);
+
   useEffect(() => {
-    const wasOffline = !isOnline;
     return () => {
-      // state changed from offline to online
-      if (wasOffline && currentGroupChannel?.url) {
+      // state changed from offline to online AND tab is visible
+      if (shouldReconnect) {
         logger.info('Refreshing conversation state');
         const isReactionEnabled = sdk?.appInfo?.useReaction || false;
 
@@ -97,7 +100,7 @@ function useHandleReconnect(
           });
       }
     };
-  }, [isOnline, replyType]);
+  }, [shouldReconnect, replyType]);
 }
 
 export default useHandleReconnect;

src/modules/Channel/context/hooks/useReconnectOnIdle.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+
+function useReconnectOnIdle(isOnline: boolean, currentGroupChannel: GroupChannel, reconnectOnIdle = true)
+  :{ shouldReconnect: boolean }
+{
+  const [isTabHidden, setIsTabHidden] = useState<boolean>(false);
+  const wasOffline = !isOnline;
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (reconnectOnIdle) {
+        setIsTabHidden(document.hidden);
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [reconnectOnIdle, document.hidden]);
+
+  const shouldReconnect = wasOffline && currentGroupChannel?.url != null && !isTabHidden;
+  return { shouldReconnect };
+}
+
+export default useReconnectOnIdle;

src/modules/Channel/index.tsx

@@ -37,6 +37,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
       onMessageAnimated={props?.onMessageAnimated}
       onMessageHighlighted={props?.onMessageHighlighted}
       scrollBehavior={props.scrollBehavior}
+      reconnectOnIdle={props.reconnectOnIdle}
     >
       <ChannelUI
         isLoading={props?.isLoading}