[Refactor] Migrate GroupChannelProvider to new state management pattern

Author: AhyoungRyu

apps/testing/vite.config.ts

@@ -9,6 +9,11 @@ import postcssRtlOptions from '../../postcssRtlOptions.mjs';
 export default defineConfig({
   plugins: [react(), vitePluginSvgr({ include: '**/*.svg' })],
   css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
     postcss: {
       plugins: [postcssRtl(postcssRtlOptions)],
     },

src/modules/GroupChannel/components/FileViewer/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { FileMessage } from '@sendbird/chat/message';
 
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
 import { FileViewerView } from './FileViewerView';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
 export interface FileViewerProps {
@@ -11,7 +11,10 @@ export interface FileViewerProps {
 }
 
 export const FileViewer = (props: FileViewerProps) => {
-  const { deleteMessage, onBeforeDownloadFileMessage } = useGroupChannelContext();
+  const {
+    state: { onBeforeDownloadFileMessage },
+    actions: { deleteMessage },
+  } = useGroupChannel();
   const { config } = useSendbirdStateContext();
   const { logger } = config;
   return (

src/modules/GroupChannel/components/GroupChannelUI/index.tsx

@@ -7,12 +7,13 @@ import GroupChannelHeader, { GroupChannelHeaderProps } from '../GroupChannelHead
 import MessageList, { GroupChannelMessageListProps } from '../MessageList';
 import MessageInputWrapper from '../MessageInputWrapper';
 import { deleteNullish } from '../../../../utils/utils';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
 
 export interface GroupChannelUIProps extends GroupChannelUIBasicProps {}
 
 export const GroupChannelUI = (props: GroupChannelUIProps) => {
   const context = useGroupChannelContext();
-  const { channelUrl, fetchChannelError } = context;
+  const { state: { channelUrl, fetchChannelError } } = useGroupChannel();
 
   // Inject components to presentation layer
   const {

src/modules/GroupChannel/components/Message/MessageView.tsx

@@ -20,7 +20,7 @@ import MessageContent, { MessageContentProps } from '../../../../ui/MessageConte
 
 import SuggestedReplies, { SuggestedRepliesProps } from '../SuggestedReplies';
 import SuggestedMentionListView from '../SuggestedMentionList/SuggestedMentionListView';
-import type { OnBeforeDownloadFileMessageType } from '../../context/GroupChannelProvider';
+import type { OnBeforeDownloadFileMessageType } from '../../context/types';
 import { classnames, deleteNullish } from '../../../../utils/utils';
 
 export interface MessageProps {

src/modules/GroupChannel/components/Message/index.tsx

@@ -4,38 +4,42 @@ import { useIIFE } from '@sendbird/uikit-tools';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { getSuggestedReplies, isSendableMessage } from '../../../../utils';
 import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../context/utils';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import MessageView, { MessageProps } from './MessageView';
 import FileViewer from '../FileViewer';
 import RemoveMessageModal from '../RemoveMessageModal';
 import { ThreadReplySelectType } from '../../context/const';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
 
 export const Message = (props: MessageProps): React.ReactElement => {
   const { config, emojiManager } = useSendbirdStateContext();
   const {
-    loading,
-    currentChannel,
-    animatedMessageId,
-    setAnimatedMessageId,
-    scrollToMessage,
-    replyType,
-    threadReplySelectType,
-    isReactionEnabled,
-    toggleReaction,
-    nicknamesMap,
-    setQuoteMessage,
-    renderUserMentionItem,
-    filterEmojiCategoryIds,
-    onQuoteMessageClick,
-    onReplyInThreadClick,
-    onMessageAnimated,
-    onBeforeDownloadFileMessage,
-    messages,
-    updateUserMessage,
-    sendUserMessage,
-    resendMessage,
-    deleteMessage,
-  } = useGroupChannelContext();
+    state: {
+      loading,
+      currentChannel,
+      animatedMessageId,
+      replyType,
+      threadReplySelectType,
+      isReactionEnabled,
+      nicknamesMap,
+      renderUserMentionItem,
+      filterEmojiCategoryIds,
+      onQuoteMessageClick,
+      onReplyInThreadClick,
+      onMessageAnimated,
+      onBeforeDownloadFileMessage,
+      updateUserMessage,
+      sendUserMessage,
+      resendMessage,
+      messages,
+    },
+    actions: {
+      toggleReaction,
+      setQuoteMessage,
+      setAnimatedMessageId,
+      scrollToMessage,
+      deleteMessage,
+    },
+  } = useGroupChannel();
 
   const { message } = props;
   const initialized = !loading && Boolean(currentChannel);

src/modules/GroupChannel/components/MessageInputWrapper/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import MessageInputWrapperView from './MessageInputWrapperView';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
 
 export interface MessageInputWrapperProps {
   value?: string;
@@ -13,8 +13,8 @@ export interface MessageInputWrapperProps {
 }
 
 export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
-  const context = useGroupChannelContext();
-  return <MessageInputWrapperView {...props} {...context} />;
+  const { state, actions } = useGroupChannel();
+  return <MessageInputWrapperView {...props} {...state} { ...actions} />;
 };
 
 export { VoiceMessageInputWrapper, type VoiceMessageInputWrapperProps } from './VoiceMessageInputWrapper';

src/modules/GroupChannel/components/MessageList/index.tsx

@@ -14,13 +14,13 @@ import FrozenNotification from '../FrozenNotification';
 import { SCROLL_BUFFER } from '../../../../utils/consts';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import TypingIndicatorBubble from '../../../../ui/TypingIndicatorBubble';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 import { deleteNullish } from '../../../../utils/utils';
 import { getMessagePartsInfo } from './getMessagePartsInfo';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
 import { getComponentKeyFromMessage } from '../../context/utils';
 import { InfiniteList } from './InfiniteList';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
 
 export interface GroupChannelMessageListProps {
   className?: string;
@@ -67,25 +67,29 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
   } = deleteNullish(props);
 
   const {
-    channelUrl,
-    hasNext,
-    loading,
-    messages,
-    newMessages,
-    scrollToBottom,
-    isScrollBottomReached,
-    isMessageGroupingEnabled,
-    scrollRef,
-    scrollDistanceFromBottomRef,
-    scrollPositionRef,
-    currentChannel,
-    replyType,
-    scrollPubSub,
-    loadNext,
-    loadPrevious,
-    setIsScrollBottomReached,
-    resetNewMessages,
-  } = useGroupChannelContext();
+    state: {
+      channelUrl,
+      hasNext,
+      loading,
+      messages,
+      newMessages,
+      isScrollBottomReached,
+      isMessageGroupingEnabled,
+      currentChannel,
+      replyType,
+      scrollPubSub,
+      loadNext,
+      loadPrevious,
+      resetNewMessages,
+      scrollRef,
+      scrollPositionRef,
+      scrollDistanceFromBottomRef,
+    },
+    actions: {
+      scrollToBottom,
+      setIsScrollBottomReached,
+    },
+  } = useGroupChannel();
 
   const store = useSendbirdStateContext();
 

src/modules/GroupChannel/components/RemoveMessageModal/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import RemoveMessageModalView, { RemoveMessageModalProps } from './RemoveMessageModalView';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
 
 export const RemoveMessageModal = (props: RemoveMessageModalProps) => {
-  const { deleteMessage } = useGroupChannelContext();
+  const { actions: { deleteMessage } } = useGroupChannel();
   return <RemoveMessageModalView {...props} deleteMessage={deleteMessage} />;
 };