feat: Provide fetchChannelList method via ChannelListContext (#708)

### What was the issue
Customers could fetch the channel list using the `channelSource` of
ChannelListContext
but it couldn't be able to update the `allChannels` because the state is
only updated by an internal dispatcher.

### Fix
Add fetchChannelList to the ChannelListContext
* Make a custom hook function `useFetchChanneelList`
* Use it for fetching channel list inside of the ChannelListUI component
  * Add tests for this function
* Provide the method through the ChannelListContext: fetchChannelList

### Usage
Here's an example of using `getFetchChannelList`

1. import below
```javascript
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
import useSendbirdStateContext from '@sendbird/uikit-react/useSendbirdStateContext'
import { ChannelListProvider, useChannelListContext } from '@sendbird/uikit-react/ChannelList/context'
```
2. implement a custom channel list
```javascript
const isAboutSame = (a, b, px) => (Math.abs(a - b) <= px);
export const CustomChannelList = () => {
  const {
    allChannels,
    fetchChannelList,
  } = useChannelListContext();

  <div
    className="custom-channel-list"
    onScroll={(e) => {
      const target = e.target;
      if (isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 10)) {
        fetchChannelList();
      }
    }}
  >
    {allChannels.map((channel) => {
      return // custom channel list item
    })}
  </div>
}
```
3. apply it to the custom app
```javascript
import { CustomChannelList } from '../customChannelList.jsx'

const CustomApp = () => {
  return (
    <div className="custom-app">
      <SendbirdProvider ... >
        <ChannelListProvider ... >
          <CustomChannelList />
        </ChannelListProvider>
      </SendbirdProvider>
    </div>
  )
}
```

[CLNP-348](https://sendbird.atlassian.net/browse/CLNP-348)

[CLNP-348]:
https://sendbird.atlassian.net/browse/CLNP-348?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Sravan S <[email protected]>

Author: HoonBaek

scripts/index_d_ts

@@ -230,7 +230,8 @@ declare module "SendbirdUIKitGlobal" {
   ) => Promise<UserMessage>;
   export type GetResendFileMessage = (
     channel: GroupChannel | OpenChannel,
-    failedMessage: FileMessage
+    failedMessage: FileMessage,
+    blob: Blob,
   ) => Promise<FileMessage>;
 
   export interface sendbirdSelectorsInterface {
@@ -415,6 +416,7 @@ declare module "SendbirdUIKitGlobal" {
     // channelListDispatcher: CustomUseReducerDispatcher;
     channelSource: GroupChannelListQuery;
     typingChannels: GroupChannel[];
+    fetchChannelList: () => void;
   }
 
 

src/index.d.ts

@@ -249,7 +249,8 @@ type GetResendUserMessage = (
 ) => Promise<UserMessage>;
 type GetResendFileMessage = (
   channel: GroupChannel | OpenChannel,
-  failedMessage: FileMessage
+  failedMessage: FileMessage,
+  blob: Blob,
 ) => Promise<FileMessage>;
 
 interface sendbirdSelectorsInterface {
@@ -438,6 +439,8 @@ export interface ChannelListProviderInterface extends ChannelListProviderProps {
   currentUserId: string;
   // channelListDispatcher: CustomUseReducerDispatcher;
   channelSource: GroupChannelListQuery;
+  typingChannels: GroupChannel[];
+  fetchChannelList: () => void;
 }
 
 interface RenderChannelPreviewProps {

src/modules/ChannelList/components/ChannelListUI/index.tsx

@@ -1,7 +1,7 @@
 import './channel-list-ui.scss';
 
 import React, { useState } from 'react';
-import type { GroupChannel, Member, SendbirdGroupChat } from '@sendbird/chat/groupChannel';
+import type { GroupChannel, Member } from '@sendbird/chat/groupChannel';
 import type { User } from '@sendbird/chat';
 
 import ChannelListHeader from '../ChannelListHeader';
@@ -16,8 +16,6 @@ import EditUserProfile from '../../../EditUserProfile';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import { isAboutSame } from '../utils';
 
-const DELIVERY_RECIPT = 'delivery_receipt';
-
 interface RenderChannelPreviewProps {
   channel: GroupChannel;
   onLeaveChannel(
@@ -59,23 +57,18 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
     loading,
     currentChannel,
     channelListDispatcher,
-    channelSource,
     typingChannels,
     initialized,
+    fetchChannelList,
   } = useChannelListContext();
 
   const state = useSendbirdStateContext();
-
   const sdkStore = state?.stores?.sdkStore;
   const config = state?.config;
   const {
     logger,
     isOnline = false,
-    markAsDeliveredScheduler,
-    disableMarkAsDelivered,
   } = config;
-
-  const sdk = sdkStore?.sdk as SendbirdGroupChat;
   const sdkError = sdkStore?.error;
 
   return (
@@ -112,38 +105,8 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
         className="sendbird-channel-list__body"
         onScroll={(e) => {
           const target = e?.target as HTMLDivElement;
-          const fetchMore = isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 10);
-          if (fetchMore && channelSource?.hasNext) {
-            logger.info('ChannelList: Fetching more channels');
-            channelListDispatcher({
-              type: channelListActions.FETCH_CHANNELS_START,
-              payload: null,
-            });
-            channelSource.next().then((channelList) => {
-              logger.info('ChannelList: Fetching channels successful', channelList);
-              channelListDispatcher({
-                type: channelListActions.FETCH_CHANNELS_SUCCESS,
-                payload: channelList,
-              });
-              const canSetMarkAsDelivered = sdk?.appInfo?.premiumFeatureList
-                ?.find((feature) => (feature === DELIVERY_RECIPT));
-
-              if (canSetMarkAsDelivered && !disableMarkAsDelivered) {
-                logger.info('ChannelList: Marking all channels as read');
-                // eslint-disable-next-line no-unused-expressions
-                channelList?.forEach((channel) => {
-                  if (channel?.unreadMessageCount > 0) {
-                    markAsDeliveredScheduler.push(channel);
-                  }
-                });
-              }
-            }).catch((err) => {
-              logger.info('ChannelList: Fetching channels failed', err);
-              channelListDispatcher({
-                type: channelListActions.FETCH_CHANNELS_FAILURE,
-                payload: err,
-              });
-            });
+          if (isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 10)) {
+            fetchChannelList();
           }
         }}
       >

src/modules/ChannelList/context/ChannelListProvider.tsx

@@ -34,6 +34,7 @@ import channelListReducers from '../dux/reducers';
 import channelListInitialState from '../dux/initialState';
 import { CHANNEL_TYPE } from '../../CreateChannel/types';
 import useActiveChannelUrl from './hooks/useActiveChannelUrl';
+import { useFetchChannelList } from './hooks/useFetchChannelList';
 
 interface ApplicationUserListQuery {
   limit?: number;
@@ -104,6 +105,7 @@ export interface ChannelListProviderInterface extends ChannelListProviderProps {
   currentUserId: string;
   channelListDispatcher: CustomUseReducerDispatcher;
   channelSource: GroupChannelListQuerySb | null;
+  fetchChannelList: () => void;
 }
 
 interface ChannelListStoreInterface {
@@ -169,6 +171,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
     isMessageReceiptStatusEnabledOnChannelList = false,
   } = config;
   const sdk = sdkStore?.sdk as SendbirdGroupChat;
+  const { premiumFeatureList = [] } = sdk?.appInfo ?? {};
 
   // derive some variables
   // enable if it is true atleast once(both are flase by default)
@@ -345,6 +348,16 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
     channelListDispatcher,
   });
 
+  const fetchChannelList = useFetchChannelList({
+    channelSource,
+    premiumFeatureList,
+    disableMarkAsDelivered,
+  }, {
+    channelListDispatcher,
+    logger,
+    markAsDeliveredScheduler,
+  });
+
   return (
     <ChannelListContext.Provider value={{
       className,
@@ -364,6 +377,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
       typingChannels,
       isTypingIndicatorEnabled: (isTypingIndicatorEnabled !== null) ? isTypingIndicatorEnabled : isTypingIndicatorEnabledOnChannelList,
       isMessageReceiptStatusEnabled: (isMessageReceiptStatusEnabled !== null) ? isMessageReceiptStatusEnabled : isMessageReceiptStatusEnabledOnChannelList,
+      fetchChannelList,
     }}>
       <UserProfileProvider
         disableUserProfile={userDefinedDisableUserProfile ?? config?.disableUserProfile}

src/modules/ChannelList/context/hooks/__tests__/useFetchChannelList.spec.ts

@@ -0,0 +1,150 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { GroupChannelListQuery } from '@sendbird/chat/groupChannel';
+
+import { useFetchChannelList } from '../useFetchChannelList';
+import { mockChannelList } from '../channelList.mock';
+import { DELIVERY_RECEIPT } from '../../../../../utils/consts';
+import { CustomUseReducerDispatcher, Logger } from '../../../../../lib/SendbirdState';
+import { Nullable } from '../../../../../types';
+import { MarkAsDeliveredSchedulerType } from '../../../../../lib/hooks/useMarkAsDeliveredScheduler';
+import * as channelListActions from '../../../dux/actionTypes';
+
+interface GlobalContextType {
+  mockChannelSource: Nullable<GroupChannelListQuery>,
+  channelListDispatcher: Nullable<CustomUseReducerDispatcher>,
+  markAsDeliveredScheduler: Nullable<MarkAsDeliveredSchedulerType>,
+  logger: Nullable<Logger>,
+}
+const mockPremiumFeatureList = [DELIVERY_RECEIPT];
+const globalContext = {} as GlobalContextType;
+
+describe('useFetchChannelList', () => {
+  beforeEach(() => {
+    globalContext.mockChannelSource = {
+      hasNext: true,
+      next: jest.fn(() => Promise.resolve(mockChannelList)),
+    } as unknown as GroupChannelListQuery;
+    globalContext.channelListDispatcher = jest.fn() as CustomUseReducerDispatcher;
+    globalContext.markAsDeliveredScheduler = {
+      push: jest.fn(),
+      clear: jest.fn(),
+      getQueue: jest.fn(),
+    };
+    globalContext.logger = {
+      info: jest.fn(),
+      warning: jest.fn(),
+      error: jest.fn(),
+    };
+  });
+  afterEach(() => {
+    globalContext.mockChannelSource = null;
+    globalContext.channelListDispatcher = null;
+    globalContext.markAsDeliveredScheduler = null;
+    globalContext.logger = null;
+  });
+
+  it('should update allChannels after successful fetch channel list', async () => {
+    const {
+      mockChannelSource,
+      channelListDispatcher,
+      markAsDeliveredScheduler,
+      logger,
+    } = globalContext;
+    const hook = renderHook(
+      () => useFetchChannelList({
+        channelSource: mockChannelSource,
+        premiumFeatureList: mockPremiumFeatureList,
+        disableMarkAsDelivered: false,
+      }, {
+        channelListDispatcher: channelListDispatcher as CustomUseReducerDispatcher,
+        logger: logger as Logger,
+        markAsDeliveredScheduler: markAsDeliveredScheduler as MarkAsDeliveredSchedulerType,
+      }),
+    );
+    const resultCallback = hook.result.current as unknown as () => void;
+    await act(async () => {
+      await resultCallback();
+    });
+
+    expect(channelListDispatcher).toHaveBeenCalledTimes(2);
+    expect(mockChannelSource?.next).toHaveBeenCalledOnce();
+    expect(channelListDispatcher).toHaveBeenNthCalledWith(1, {
+      type: channelListActions.FETCH_CHANNELS_START,
+      payload: null,
+    });
+    expect(channelListDispatcher).toHaveBeenNthCalledWith(2, {
+      type: channelListActions.FETCH_CHANNELS_SUCCESS,
+      payload: mockChannelList,
+    });
+  });
+
+  it('should expect failure when failed fetching channel list', async () => {
+    const mockError = { code: 0, message: 'Error message' };
+    const {
+      mockChannelSource,
+      channelListDispatcher,
+      markAsDeliveredScheduler,
+      logger,
+    } = globalContext;
+    const hook = renderHook(
+      () => useFetchChannelList({
+        channelSource: {
+          ...mockChannelSource,
+          next: jest.fn(() => Promise.reject(mockError)),
+        } as unknown as GroupChannelListQuery,
+        premiumFeatureList: mockPremiumFeatureList,
+        disableMarkAsDelivered: false,
+      }, {
+        channelListDispatcher: channelListDispatcher as CustomUseReducerDispatcher,
+        logger: logger as Logger,
+        markAsDeliveredScheduler: markAsDeliveredScheduler as MarkAsDeliveredSchedulerType,
+      }),
+    );
+    const resultCallback = hook.result.current as unknown as () => void;
+    await act(async () => {
+      await resultCallback();
+    });
+
+    expect(channelListDispatcher).toHaveBeenCalledTimes(2);
+    expect(mockChannelSource?.next).not.toHaveBeenCalled();
+    expect(channelListDispatcher).toHaveBeenNthCalledWith(1, {
+      type: channelListActions.FETCH_CHANNELS_START,
+      payload: null,
+    });
+    expect(channelListDispatcher).toHaveBeenNthCalledWith(2, {
+      type: channelListActions.FETCH_CHANNELS_FAILURE,
+      payload: mockError,
+    });
+  });
+
+  it('should not try to fetch channel list when hasNext is false', async () => {
+    const {
+      mockChannelSource,
+      channelListDispatcher,
+      markAsDeliveredScheduler,
+      logger,
+    } = globalContext;
+    const hook = renderHook(
+      () => useFetchChannelList({
+        channelSource: {
+          ...mockChannelSource,
+          hasNext: false,
+        } as unknown as GroupChannelListQuery,
+        premiumFeatureList: mockPremiumFeatureList,
+        disableMarkAsDelivered: false,
+      }, {
+        channelListDispatcher: channelListDispatcher as CustomUseReducerDispatcher,
+        logger: logger as Logger,
+        markAsDeliveredScheduler: markAsDeliveredScheduler as MarkAsDeliveredSchedulerType,
+      }),
+    );
+    const resultCallback = hook.result.current as unknown as () => void;
+    await act(async () => {
+      await resultCallback();
+    });
+
+    expect(mockChannelSource?.next).not.toHaveBeenCalled();
+    expect(channelListDispatcher).not.toHaveBeenCalled();
+  });
+});