[CLNP-5907] fix: update group channel list state properly (#1261)

Fixes https://sendbird.atlassian.net/browse/CLNP-5907
https://sendbird.slack.com/archives/C05AN1T4Z5Z/p1732853520502099

Author: AhyoungRyu

src/modules/GroupChannelList/components/GroupChannelListItem/index.tsx

@@ -23,8 +23,8 @@ export const GroupChannelListItem = ({
   const { stringSet } = useLocalization();
   const {
     state: {
-      isTypingIndicatorEnabled = false,
-      isMessageReceiptStatusEnabled = false,
+      isTypingIndicatorEnabled,
+      isMessageReceiptStatusEnabled,
     },
   } = useGroupChannelList();
 

src/modules/GroupChannelList/context/GroupChannelListProvider.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import type { User } from '@sendbird/chat';
 import type { GroupChannel, GroupChannelCreateParams, GroupChannelFilterParams } from '@sendbird/chat/groupChannel';
 import { GroupChannelCollectionParams, GroupChannelFilter } from '@sendbird/chat/groupChannel';
-import { useGroupChannelList, useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { useGroupChannelList as useGroupChannelListDataSource, useGroupChannelHandler } from '@sendbird/uikit-tools';
 
 import type { CHANNEL_TYPE } from '../../CreateChannel/types';
 import { UserProfileProvider } from '../../../lib/UserProfileContext';
@@ -16,9 +16,10 @@ import { createStore } from '../../../utils/storeManager';
 import { useStore } from '../../../hooks/useStore';
 import { noop } from '../../../utils/utils';
 import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
+import useGroupChannelList from './useGroupChannelList';
 
 type OnCreateChannelClickParams = { users: Array<string>; onClose: () => void; channelType: CHANNEL_TYPE };
-type ChannelListDataSource = ReturnType<typeof useGroupChannelList>;
+type ChannelListDataSource = ReturnType<typeof useGroupChannelListDataSource>;
 export type ChannelListQueryParamsType = Omit<GroupChannelCollectionParams, 'filter'> & GroupChannelFilterParams;
 
 interface ContextBaseType {
@@ -83,7 +84,7 @@ const initialState: GroupChannelListState = {
 /**
  * @returns {ReturnType<typeof createStore<GroupChannelListState>>}
  */
-const useGroupChannelListStore = () => {
+export const useGroupChannelListStore = () => {
   return useStore(GroupChannelListContext, state => state, initialState);
 };
 
@@ -92,9 +93,6 @@ export const GroupChannelListManager: React.FC<GroupChannelListProviderProps> =
   selectedChannelUrl = '',
 
   disableAutoSelect = false,
-  allowProfileEdit,
-  isTypingIndicatorEnabled,
-  isMessageReceiptStatusEnabled,
 
   channelListQueryParams,
   onThemeChange,
@@ -103,17 +101,19 @@ export const GroupChannelListManager: React.FC<GroupChannelListProviderProps> =
   onCreateChannelClick,
   onBeforeCreateChannel,
   onUserProfileUpdated,
+  ...props
 }: GroupChannelListProviderProps) => {
   const { state: sendbirdState } = useSendbird();
   const { config, stores } = sendbirdState;
-  const { state, updateState } = useGroupChannelListStore();
+  const { state } = useGroupChannelList();
+  const { updateState } = useGroupChannelListStore();
   const { sdkStore } = stores;
 
   const sdk = sdkStore.sdk;
   const isConnected = useOnlineStatus(sdk, config.logger);
   const scheduler = useMarkAsDeliveredScheduler({ isConnected }, config);
 
-  const channelListDataSource = useGroupChannelList(sdk, {
+  const channelListDataSource = useGroupChannelListDataSource(sdk, {
     collectionCreator: getCollectionCreator(sdk, channelListQueryParams),
     markAsDelivered: (channels) => channels.forEach(scheduler.push),
     onChannelsDeleted: (channelUrls) => {
@@ -142,6 +142,7 @@ export const GroupChannelListManager: React.FC<GroupChannelListProviderProps> =
   ]);
 
   const { typingChannelUrls } = state;
+
   useGroupChannelHandler(sdk, {
     onTypingStatusUpdated: (channel) => {
       const channelList = typingChannelUrls.filter((channelUrl) => channelUrl !== channel.url);
@@ -157,47 +158,62 @@ export const GroupChannelListManager: React.FC<GroupChannelListProviderProps> =
     },
   });
 
-  useEffect(() => {
-    updateState({
-      className,
-      selectedChannelUrl,
-      disableAutoSelect,
-      allowProfileEdit,
-      isTypingIndicatorEnabled,
-      isMessageReceiptStatusEnabled,
-      onChannelSelect,
-      onChannelCreated,
-      onThemeChange,
-      onCreateChannelClick,
-      onBeforeCreateChannel,
-      onUserProfileUpdated,
-      typingChannelUrls,
-      refreshing,
-      initialized,
-      groupChannels,
-      refresh,
-      loadMore,
-    });
-  }, [
-    className,
-    selectedChannelUrl,
-    disableAutoSelect,
-    allowProfileEdit,
-    isTypingIndicatorEnabled,
-    isMessageReceiptStatusEnabled,
+  const allowProfileEdit = props.allowProfileEdit ?? config.allowProfileEdit ?? true;
+  const isTypingIndicatorEnabled = props.isTypingIndicatorEnabled ?? config.groupChannelList.enableTypingIndicator ?? false;
+  const isMessageReceiptStatusEnabled = props.isMessageReceiptStatusEnabled ?? config.groupChannelList.enableMessageReceiptStatus ?? false;
+
+  const eventHandlers = useMemo(() => ({
+    onChannelSelect,
+    onChannelCreated,
+    onThemeChange,
+    onCreateChannelClick,
+    onBeforeCreateChannel,
+    onUserProfileUpdated,
+  }), [
     onChannelSelect,
     onChannelCreated,
     onThemeChange,
     onCreateChannelClick,
     onBeforeCreateChannel,
     onUserProfileUpdated,
+  ]);
+  const configurations = useMemo(() => ({
+    className,
+    selectedChannelUrl,
+    disableAutoSelect,
+    allowProfileEdit,
+    isTypingIndicatorEnabled,
+    isMessageReceiptStatusEnabled,
+    typingChannelUrls,
+    refreshing,
+    initialized,
+    refresh,
+    loadMore,
+  }), [
+    className,
+    selectedChannelUrl,
+    disableAutoSelect,
+    allowProfileEdit,
+    isTypingIndicatorEnabled,
+    isMessageReceiptStatusEnabled,
     typingChannelUrls,
     refreshing,
     initialized,
-    groupChannels.map(channel => channel.url).join(),
     refresh,
     loadMore,
   ]);
+  const memoizedGroupChannel = useMemo(() => groupChannels, [groupChannels]);
+  useEffect(() => {
+    updateState({
+      groupChannels: memoizedGroupChannel,
+      ...eventHandlers,
+      ...configurations,
+    });
+  }, [
+    configurations,
+    eventHandlers,
+    memoizedGroupChannel,
+  ]);
 
   return null;
 };
@@ -225,10 +241,10 @@ export const GroupChannelListProvider = (props: GroupChannelListProviderProps) =
   );
 };
 
+// Keep this function for backward compatibility.
 export const useGroupChannelListContext = () => {
-  const context = useContext(GroupChannelListContext);
-  if (!context) throw new Error('GroupChannelListContext not found. Use within the GroupChannelList module.');
-  return context;
+  const { state, actions } = useGroupChannelList();
+  return { ...state, ...actions };
 };
 
 function getCollectionCreator(sdk: SdkStore['sdk'], channelListQueryParams?: ChannelListQueryParamsType) {

src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  GroupChannelListProvider,
-  useGroupChannelListContext,
-} from '../GroupChannelListProvider';
+import { GroupChannelListProvider, useGroupChannelListStore } from '../GroupChannelListProvider';
+import { useGroupChannelList } from '../useGroupChannelList';
 import { act, renderHook, waitFor } from '@testing-library/react';
 
 const mockState = {
@@ -16,7 +14,11 @@ const mockState = {
       initialized: true,
     },
   },
-  config: { logger: console },
+  config: {
+    logger: console,
+    groupChannelList: {
+    },
+  },
 };
 jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
   __esModule: true,
@@ -64,9 +66,9 @@ describe('GroupChannelListProvider', () => {
       </GroupChannelListProvider>
     );
 
-    const { result } = renderHook(() => useGroupChannelListContext(), { wrapper });
+    const { result } = renderHook(() => useGroupChannelList(), { wrapper });
 
-    expect(result.current.getState()).toMatchObject(initialState);
+    expect(result.current.state).toMatchObject(initialState);
   });
 
   it('update state correctly', async () => {
@@ -79,14 +81,14 @@ describe('GroupChannelListProvider', () => {
 
     channelListQueryParams.prev = 42;
 
-    const { result } = renderHook(() => useGroupChannelListContext(), { wrapper });
-    expect(result.current.getState().className).toEqual('old-classname');
+    const { result } = renderHook(() => useGroupChannelListStore(), { wrapper });
+    expect(result.current.state.className).toEqual('old-classname');
 
     await act(async () => {
-      result.current.setState({ className: 'new-classname' });
-      result.current.setState({ disableAutoSelect: true });
+      result.current.updateState({ className: 'new-classname' });
+      result.current.updateState({ disableAutoSelect: true });
       await waitFor(() => {
-        const newState = result.current.getState();
+        const newState = result.current.state;
         expect(newState.className).toEqual('new-classname');
         expect(newState.disableAutoSelect).toEqual(true);
       });

src/modules/GroupChannelList/context/useGroupChannelList.ts

@@ -1,9 +1,9 @@
-import { GroupChannelListState, useGroupChannelListContext } from './GroupChannelListProvider';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { useMemo } from 'react';
+import { useMemo, useContext } from 'react';
+import { GroupChannelListState, GroupChannelListContext } from './GroupChannelListProvider';
 
 export const useGroupChannelList = () => {
-  const store = useGroupChannelListContext();
+  const store = useContext(GroupChannelListContext);
   if (!store) throw new Error('useGroupChannelList must be used within a GroupChannelListProvider');
 
   const state: GroupChannelListState = useSyncExternalStore(store.subscribe, store.getState);
@@ -12,3 +12,5 @@ export const useGroupChannelList = () => {
 
   return { state, actions };
 };
+
+export default useGroupChannelList;