[CLNP-5046] Migrate ThreadProvider to the new state management pattern (#1250)

### Overview
This PR migrate ThreadProvider and related files to the new state
management pattern.

### Changelog
* `ThreadProvider` is migrated, and `useThread()` hook is introduced.
* Removed `ThreadDispatcher` usages in ThreadProvider; it is replaced
with the new state-action pattern of `useThread()`.
* `PubSub` of `config` still remains. It is out of scope of this PR.

### Remaining tasks
* Add unit tests and integration tests.

### FurtherConcern
* Handling hook
* The previous `ThreadProvider` contained several custom hooks. Those
hooks retrieved state and actions through `useThreadContext()`
* Due to that, replacing `useThreadContext()` to new `useThread()` faced
a problem. Those hooks �conatin `useThread()`, `useThread()` contains
the hooks. So it makes cycle.
* For now, I moved all functionality of the hooks to the `useThread()`,
but it looks wrong. Any good way to handle this?

Author: git-babel

src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx

@@ -28,7 +28,6 @@ import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 import TextButton from '../../../../ui/TextButton';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import EmojiReactions from '../../../../ui/EmojiReactions';
-import { useThreadContext } from '../../context/ThreadProvider';
 import VoiceMessageItemBody from '../../../../ui/VoiceMessageItemBody';
 import TextFragment from '../../../Message/components/TextFragment';
 import { tokenizeMessage } from '../../../Message/utils/tokens/tokenize';
@@ -39,6 +38,7 @@ import { useFileInfoListWithUploaded } from '../../../Channel/context/hooks/useF
 import { Colors } from '../../../../utils/color';
 import type { OnBeforeDownloadFileMessageType } from '../../../GroupChannel/context/types';
 import { openURL } from '../../../../utils/utils';
+import useThread from '../../context/useThread';
 
 export interface ParentMessageInfoItemProps {
   className?: string;
@@ -59,12 +59,16 @@ export default function ParentMessageInfoItem({
   const currentUserId = stores?.userStore?.user?.userId;
   const { stringSet } = useLocalization();
   const {
-    currentChannel,
-    emojiContainer,
-    nicknamesMap,
-    toggleReaction,
-    filterEmojiCategoryIds,
-  } = useThreadContext();
+    state: {
+      currentChannel,
+      emojiContainer,
+      nicknamesMap,
+      filterEmojiCategoryIds,
+    },
+    actions: {
+      toggleReaction,
+    },
+  } = useThread();
   const { isMobile } = useMediaQueryContext();
 
   const isReactionEnabled = config.groupChannel.enableReactions;

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -10,7 +10,6 @@ import { getSenderName, SendableMessageType } from '../../../../utils';
 import { getIsReactionEnabled } from '../../../../utils/getIsReactionEnabled';
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { useThreadContext } from '../../context/ThreadProvider';
 import { useUserProfileContext } from '../../../../lib/UserProfileContext';
 import SuggestedMentionList from '../SuggestedMentionList';
 
@@ -32,6 +31,7 @@ import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyTyp
 import { classnames } from '../../../../utils/utils';
 import { MessageMenu, MessageMenuProps } from '../../../../ui/MessageMenu';
 import useElementObserver from '../../../../hooks/useElementObserver';
+import useThread from '../../context/useThread';
 
 export interface ParentMessageInfoProps {
   className?: string;
@@ -49,20 +49,24 @@ export default function ParentMessageInfo({
   const userId = stores.userStore.user?.userId ?? '';
   const { dateLocale, stringSet } = useLocalization();
   const {
-    currentChannel,
-    parentMessage,
-    allThreadMessages,
-    emojiContainer,
-    toggleReaction,
-    updateMessage,
-    deleteMessage,
-    onMoveToParentMessage,
-    onHeaderActionClick,
-    isMuted,
-    isChannelFrozen,
-    onBeforeDownloadFileMessage,
-    filterEmojiCategoryIds,
-  } = useThreadContext();
+    state: {
+      currentChannel,
+      parentMessage,
+      allThreadMessages,
+      emojiContainer,
+      onMoveToParentMessage,
+      onHeaderActionClick,
+      isMuted,
+      isChannelFrozen,
+      onBeforeDownloadFileMessage,
+      filterEmojiCategoryIds,
+    },
+    actions: {
+      toggleReaction,
+      updateMessage,
+      deleteMessage,
+    },
+  } = useThread();
   const { isMobile } = useMediaQueryContext();
 
   const isMenuMounted = useElementObserver(

src/modules/Thread/components/RemoveMessageModal.tsx

@@ -3,9 +3,9 @@ import React, { useContext } from 'react';
 import Modal from '../../../ui/Modal';
 import { ButtonTypes } from '../../../ui/Button';
 import { LocalizationContext } from '../../../lib/LocalizationContext';
-import { useThreadContext } from '../context/ThreadProvider';
 import { SendableMessageType } from '../../../utils';
 import { getModalDeleteMessageTitle } from '../../../ui/Label/stringFormatterUtils';
+import useThread from '../context/useThread';
 
 export interface RemoveMessageProps {
   onCancel: () => void; // rename to onClose
@@ -21,8 +21,10 @@ const RemoveMessage: React.FC<RemoveMessageProps> = (props: RemoveMessageProps)
   } = props;
   const { stringSet } = useContext(LocalizationContext);
   const {
-    deleteMessage,
-  } = useThreadContext();
+    actions: {
+      deleteMessage,
+    },
+  } = useThread();
   return (
     <Modal
       type={ButtonTypes.DANGER}

src/modules/Thread/components/SuggestedMentionList.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import type { SuggestedMentionListViewProps } from '../../GroupChannel/components/SuggestedMentionList/SuggestedMentionListView';
 import SuggestedMentionListView from '../../GroupChannel/components/SuggestedMentionList/SuggestedMentionListView';
-import { useThreadContext } from '../context/ThreadProvider';
+import useThread from '../context/useThread';
 
 export type SuggestedMentionListProps = Omit<SuggestedMentionListViewProps, 'currentChannel'>;
 
 export const SuggestedMentionList = (props: SuggestedMentionListProps) => {
-  const { currentChannel } = useThreadContext();
+  const {
+    state: {
+      currentChannel,
+    },
+  } = useThread();
   return (
     <SuggestedMentionListView
       {...props}

src/modules/Thread/components/ThreadList/ThreadListItem.tsx

@@ -7,7 +7,6 @@ import DateSeparator from '../../../../ui/DateSeparator';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import RemoveMessage from '../RemoveMessageModal';
 import FileViewer from '../../../../ui/FileViewer';
-import { useThreadContext } from '../../context/ThreadProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import SuggestedMentionList from '../SuggestedMentionList';
 import MessageInput from '../../../../ui/MessageInput';
@@ -22,6 +21,7 @@ import { User } from '@sendbird/chat';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
 import { classnames } from '../../../../utils/utils';
 import { MessageComponentRenderers } from '../../../../ui/MessageContent';
+import useThread from '../../context/useThread';
 
 export interface ThreadListItemProps extends MessageComponentRenderers {
   className?: string;
@@ -47,21 +47,24 @@ export default function ThreadListItem(props: ThreadListItemProps): React.ReactE
   const { isOnline, userMention, logger, groupChannel } = config;
   const userId = stores?.userStore?.user?.userId;
   const { dateLocale, stringSet } = useLocalization();
-  const threadContext = useThreadContext?.();
   const {
-    currentChannel,
-    nicknamesMap,
-    emojiContainer,
-    toggleReaction,
-    threadListState,
-    updateMessage,
-    resendMessage,
-    deleteMessage,
-    isMuted,
-    isChannelFrozen,
-    onBeforeDownloadFileMessage,
-  } = threadContext;
-  const openingMessage = threadContext?.message;
+    state: {
+      message: openingMessage,
+      currentChannel,
+      nicknamesMap,
+      emojiContainer,
+      threadListState,
+      isMuted,
+      isChannelFrozen,
+      onBeforeDownloadFileMessage,
+    },
+    actions: {
+      toggleReaction,
+      updateMessage,
+      resendMessage,
+      deleteMessage,
+    },
+  } = useThread();
 
   const [showEdit, setShowEdit] = useState(false);
   const [showRemove, setShowRemove] = useState(false);

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -27,7 +27,6 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { ThreadMessageKind } from '../../../../ui/MultipleFilesMessageItemBody';
 import { useThreadMessageKindKeySelector } from '../../../Channel/context/hooks/useThreadMessageKindKeySelector';
 import { useFileInfoListWithUploaded } from '../../../Channel/context/hooks/useFileInfoListWithUploaded';
-import { useThreadContext } from '../../context/ThreadProvider';
 import { classnames, deleteNullish } from '../../../../utils/utils';
 import { MessageMenu, MessageMenuProps } from '../../../../ui/MessageMenu';
 import useElementObserver from '../../../../hooks/useElementObserver';
@@ -36,6 +35,7 @@ import MessageProfile, { MessageProfileProps } from '../../../../ui/MessageConte
 import MessageBody, { CustomSubcomponentsProps, MessageBodyProps } from '../../../../ui/MessageContent/MessageBody';
 import { MessageHeaderProps, MessageHeader } from '../../../../ui/MessageContent/MessageHeader';
 import { MobileBottomSheetProps } from '../../../../ui/MobileMenu/types';
+import useThread from '../../context/useThread';
 
 export interface ThreadListItemContentProps extends MessageComponentRenderers {
   className?: string;
@@ -109,7 +109,15 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
       document.getElementById(EMOJI_MENU_ROOT_ID),
     ],
   );
-  const { deleteMessage, onBeforeDownloadFileMessage, filterEmojiCategoryIds } = useThreadContext();
+  const {
+    state: {
+      onBeforeDownloadFileMessage,
+      filterEmojiCategoryIds,
+    },
+    actions: {
+      deleteMessage,
+    },
+  } = useThread();
 
   const isByMe = (userId === (message as SendableMessageType)?.sender?.userId)
     || ((message as SendableMessageType)?.sendingStatus === 'pending')
@@ -120,7 +128,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
   );
   const supposedHoverClassName = isMenuMounted ? 'sendbird-mouse-hover' : '';
   const isReactionEnabledInChannel = isReactionEnabled && !channel?.isEphemeral;
-  const isOgMessageEnabledInGroupChannel = channel.isGroupChannel() && config.groupChannel.enableOgtag;
+  const isOgMessageEnabledInGroupChannel = channel?.isGroupChannel() && config.groupChannel.enableOgtag;
 
   // Mobile
   const mobileMenuRef = useRef(null);

src/modules/Thread/components/ThreadList/index.tsx

@@ -5,12 +5,12 @@ import './index.scss';
 
 import type { SendableMessageType } from '../../../../utils';
 import ThreadListItem, { ThreadListItemProps } from './ThreadListItem';
-import { useThreadContext } from '../../context/ThreadProvider';
 import { compareMessagesForGrouping } from '../../../../utils/messages';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { isSameDay } from 'date-fns';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
+import useThread from '../../context/useThread';
 
 export interface ThreadListProps {
   className?: string;
@@ -30,10 +30,12 @@ export default function ThreadList({
   const { config } = useSendbirdStateContext();
   const { userId } = config;
   const {
-    currentChannel,
-    allThreadMessages,
-    localThreadMessages,
-  } = useThreadContext();
+    state: {
+      currentChannel,
+      allThreadMessages,
+      localThreadMessages,
+    },
+  } = useThread();
 
   return (
     <div className={`sendbird-thread-list ${className}`}>

src/modules/Thread/components/ThreadMessageInput/index.tsx

@@ -5,7 +5,6 @@ import './index.scss';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
-import { useThreadContext } from '../../context/ThreadProvider';
 import { useLocalization } from '../../../../lib/LocalizationContext';
 
 import MessageInput from '../../../../ui/MessageInput';
@@ -19,6 +18,7 @@ import { useHandleUploadFiles } from '../../../Channel/context/hooks/useHandleUp
 import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';
 import { User } from '@sendbird/chat';
 import { classnames } from '../../../../utils/utils';
+import useThread from '../../context/useThread';
 
 export interface ThreadMessageInputProps {
   className?: string;
@@ -45,23 +45,27 @@ const ThreadMessageInput = (
   const { isMobile } = useMediaQueryContext();
   const { stringSet } = useLocalization();
   const { isOnline, userMention, logger, groupChannel } = config;
-  const threadContext = useThreadContext();
+  const threadContext = useThread();
   const {
-    currentChannel,
-    parentMessage,
-    sendMessage,
-    sendFileMessage,
-    sendVoiceMessage,
-    sendMultipleFilesMessage,
-    isMuted,
-    isChannelFrozen,
-    allThreadMessages,
+    state: {
+      currentChannel,
+      parentMessage,
+      isMuted,
+      isChannelFrozen,
+      allThreadMessages,
+    },
+    actions: {
+      sendMessage,
+      sendFileMessage,
+      sendVoiceMessage,
+      sendMultipleFilesMessage,
+    },
   } = threadContext;
   const messageInputRef = useRef();
 
   const isMentionEnabled = groupChannel.enableMention;
   const isVoiceMessageEnabled = groupChannel.enableVoiceMessage;
-  const isMultipleFilesMessageEnabled = threadContext.isMultipleFilesMessageEnabled ?? config.isMultipleFilesMessageEnabled;
+  const isMultipleFilesMessageEnabled = threadContext.state.isMultipleFilesMessageEnabled ?? config.isMultipleFilesMessageEnabled;
 
   const threadInputDisabled = props.disabled
     || !isOnline

src/modules/Thread/components/ThreadUI/index.tsx

@@ -5,7 +5,6 @@ import './index.scss';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import { getChannelTitle } from '../../../GroupChannel/components/GroupChannelHeader/utils';
-import { useThreadContext } from '../../context/ThreadProvider';
 import { ParentMessageStateTypes, ThreadListStateTypes } from '../../types';
 import ParentMessageInfo from '../ParentMessageInfo';
 import ThreadHeader from '../ThreadHeader';
@@ -19,6 +18,7 @@ import { isAboutSame } from '../../context/utils';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
 import { SendableMessageType, getHTMLTextDirection } from '../../../../utils';
 import { classnames } from '../../../../utils/utils';
+import useThread from '../../context/useThread';
 
 export interface ThreadUIProps {
   renderHeader?: () => React.ReactElement;
@@ -59,18 +59,22 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
     stringSet,
   } = useLocalization();
   const {
-    currentChannel,
-    allThreadMessages,
-    parentMessage,
-    parentMessageState,
-    threadListState,
-    hasMorePrev,
-    hasMoreNext,
-    fetchPrevThreads,
-    fetchNextThreads,
-    onHeaderActionClick,
-    onMoveToParentMessage,
-  } = useThreadContext();
+    state: {
+      currentChannel,
+      allThreadMessages,
+      parentMessage,
+      parentMessageState,
+      threadListState,
+      hasMorePrev,
+      hasMoreNext,
+      onHeaderActionClick,
+      onMoveToParentMessage,
+    },
+    actions: {
+      fetchPrevThreads,
+      fetchNextThreads,
+    },
+  } = useThread();
   const replyCount = allThreadMessages.length;
   const isByMe = currentUserId === parentMessage?.sender?.userId;