refactor: GroupChannelList migration (#1231)

This is a part of state management migration. This PR migrate
'GroupChannelListProvider' and related files to the new style.
* Created `useGroupChannelList()` hook. It'll replace the previous
`useGroupChannelContext()` hook.

Author: git-babel

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

@@ -1,10 +1,16 @@
 import React, { useState } from 'react';
 import AddGroupChannelView from './AddGroupChannelView';
-import { useGroupChannelListContext } from '../../context/GroupChannelListProvider';
+import { useGroupChannelList } from '../../context/useGroupChannelList';
 
 export const AddGroupChannel = () => {
   const [createChannelVisible, setCreateChannelVisible] = useState(false);
-  const { onChannelCreated, onBeforeCreateChannel, onCreateChannelClick } = useGroupChannelListContext();
+  const {
+    state: {
+      onChannelCreated,
+      onBeforeCreateChannel,
+      onCreateChannelClick,
+    },
+  } = useGroupChannelList();
 
   return (
     <AddGroupChannelView

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

@@ -5,8 +5,8 @@ import type { SendableMessageType } from '../../../../utils';
 import * as utils from './utils';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
-import { useGroupChannelListContext } from '../../context/GroupChannelListProvider';
 import { GroupChannelListItemBasicProps, GroupChannelListItemView } from './GroupChannelListItemView';
+import { useGroupChannelList } from '../../context/useGroupChannelList';
 
 export interface GroupChannelListItemProps extends GroupChannelListItemBasicProps {}
 
@@ -21,7 +21,12 @@ export const GroupChannelListItem = ({
 }: GroupChannelListItemProps) => {
   const { config } = useSendbirdStateContext();
   const { stringSet } = useLocalization();
-  const { isTypingIndicatorEnabled = false, isMessageReceiptStatusEnabled = false } = useGroupChannelListContext();
+  const {
+    state: {
+      isTypingIndicatorEnabled = false,
+      isMessageReceiptStatusEnabled = false,
+    },
+  } = useGroupChannelList();
 
   const userId = config.userId;
   const isMessageStatusEnabled = isMessageReceiptStatusEnabled

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

@@ -2,14 +2,14 @@ import './index.scss';
 
 import React from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
-import { useGroupChannelListContext } from '../../context/GroupChannelListProvider';
 import { GroupChannelListUIView } from './GroupChannelListUIView';
 import GroupChannelPreviewAction from '../GroupChannelPreviewAction';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelListItem } from '../GroupChannelListItem';
 import AddGroupChannel from '../AddGroupChannel';
 import { GroupChannelListItemBasicProps } from '../GroupChannelListItem/GroupChannelListItemView';
 import { noop } from '../../../../utils/utils';
+import { useGroupChannelList } from '../../context/useGroupChannelList';
 
 interface GroupChannelItemProps extends GroupChannelListItemBasicProps {}
 
@@ -25,17 +25,19 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
   const { renderHeader, renderChannelPreview, renderPlaceHolderError, renderPlaceHolderLoading, renderPlaceHolderEmptyList } = props;
 
   const {
-    onChannelSelect,
-    onThemeChange,
-    allowProfileEdit,
-    typingChannelUrls,
-    groupChannels,
-    initialized,
-    selectedChannelUrl,
-    loadMore,
-    onUserProfileUpdated,
-    scrollRef,
-  } = useGroupChannelListContext();
+    state: {
+      onChannelSelect,
+      onThemeChange,
+      allowProfileEdit,
+      typingChannelUrls,
+      groupChannels,
+      initialized,
+      selectedChannelUrl,
+      loadMore,
+      onUserProfileUpdated,
+      scrollRef,
+    },
+  } = useGroupChannelList();
 
   const { stores, config } = useSendbirdStateContext();
   const { logger, isOnline } = config;

src/modules/GroupChannelList/context/useGroupChannelList.ts

@@ -0,0 +1,14 @@
+import { GroupChannelListState, useGroupChannelListContext } from './GroupChannelListProvider';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useMemo } from 'react';
+
+export const useGroupChannelList = () => {
+  const store = useGroupChannelListContext();
+  if (!store) throw new Error('useChannelSettings must be used within a ChannelSettingsProvider');
+
+  const state: GroupChannelListState = useSyncExternalStore(store.subscribe, store.getState);
+  const actions = useMemo(() => ({
+  }), [store]);
+
+  return { state, actions };
+};