perf: remove editing state from channel ctx and add composer ctx

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -46,6 +46,7 @@ import { ChannelContextValue, ChannelProvider } from '../../contexts/channelCont
 import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
 import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { MessageComposerProvider } from '../../contexts/messageComposerContext/MessageComposerContext';
 import {
   InputMessageInputContextValue,
   MessageInputProvider,
@@ -1597,7 +1598,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     channel,
     channelUnreadState,
     disabled: !!channel?.data?.frozen,
-    editing,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
     enforceUniqueReaction,
@@ -1838,6 +1838,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     typing: channelState.typing ?? {},
   });
 
+  const messageComposerContext = useMemo(
+    () => ({ channel, editing, thread, threadInstance }),
+    [channel, editing, thread, threadInstance],
+  );
+
   // TODO: replace the null view with appropriate message. Currently this is waiting a design decision.
   if (deleted) {
     return null;
@@ -1868,9 +1873,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
             <PaginatedMessageListProvider value={messageListContext}>
               <MessagesProvider value={messagesContext}>
                 <ThreadProvider value={threadContext}>
-                  <MessageInputProvider value={inputMessageInputContext}>
-                    <View style={{ height: '100%' }}>{children}</View>
-                  </MessageInputProvider>
+                  <MessageComposerProvider value={messageComposerContext}>
+                    <MessageInputProvider value={inputMessageInputContext}>
+                      <View style={{ height: '100%' }}>{children}</View>
+                    </MessageInputProvider>
+                  </MessageComposerProvider>
                 </ThreadProvider>
               </MessagesProvider>
             </PaginatedMessageListProvider>

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -6,7 +6,6 @@ export const useCreateChannelContext = ({
   channel,
   channelUnreadState,
   disabled,
-  editing,
   EmptyStateIndicator,
   enableMessageGroupingByUser,
   enforceUniqueReaction,
@@ -46,14 +45,12 @@ export const useCreateChannelContext = ({
   const readUsersLength = readUsers.length;
   const readUsersLastReads = readUsers.map(({ last_read }) => last_read.toISOString()).join();
   const stringifiedChannelUnreadState = JSON.stringify(channelUnreadState);
-  const editingDep = editing ? editing.id : '';
 
   const channelContext: ChannelContextValue = useMemo(
     () => ({
       channel,
       channelUnreadState,
       disabled,
-      editing,
       EmptyStateIndicator,
       enableMessageGroupingByUser,
       enforceUniqueReaction,
@@ -89,7 +86,6 @@ export const useCreateChannelContext = ({
     [
       channelId,
       disabled,
-      editingDep,
       error,
       isChannelActive,
       highlightedMessageId,

package/src/components/MessageInput/MessageInput.tsx

@@ -36,6 +36,10 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+import {
+  MessageComposerContextValue,
+  useMessageComposerContext,
+} from '../../contexts/messageComposerContext/MessageComposerContext';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useMessageComposerHasSendableData } from '../../contexts/messageInputContext/hooks/useMessageComposerHasSendableData';
@@ -107,7 +111,7 @@ type MessageInputPropsWithContext = Pick<
   'AttachmentPickerSelectionBar'
 > &
   Pick<ChatContextValue, 'isOnline'> &
-  Pick<ChannelContextValue, 'channel' | 'editing' | 'members' | 'threadList' | 'watchers'> &
+  Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
   Pick<
     MessageInputContextValue,
     | 'additionalTextInputProps'
@@ -149,7 +153,8 @@ type MessageInputPropsWithContext = Pick<
     | 'StopMessageStreamingButton'
   > &
   Pick<MessagesContextValue, 'Reply'> &
-  Pick<TranslationContextValue, 't'>;
+  Pick<TranslationContextValue, 't'> &
+  Pick<MessageComposerContextValue, 'editing'>;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
   command: state.command,
@@ -937,7 +942,8 @@ export const MessageInput = (props: MessageInputProps) => {
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { channel, editing, members, threadList, watchers } = useChannelContext();
+  const { channel, members, threadList, watchers } = useChannelContext();
+  const { editing } = useMessageComposerContext();
 
   const {
     additionalTextInputProps,

package/src/components/MessageInput/__tests__/AttachButton.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { act, render, renderHook, screen, userEvent, waitFor } from '@testing-library/react-native';
+import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
-import { OverlayProvider, useMessageInputContext } from '../../../contexts';
+import { OverlayProvider } from '../../../contexts';
 
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
 import * as NativeHandler from '../../../native';

package/src/contexts/channelContext/ChannelContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { Channel, ChannelState, LocalMessage } from 'stream-chat';
+import type { Channel, ChannelState } from 'stream-chat';
 
 import { MarkReadFunctionOptions } from '../../components/Channel/Channel';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
@@ -35,7 +35,6 @@ export type ChannelContextValue = {
    * @overrideType Channel
    */
   channel: Channel;
-  editing?: LocalMessage;
   /**
    * Custom UI component to display empty state when channel has no messages.
    *

package/src/contexts/messageComposerContext/MessageComposerContext.tsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+
+import { LocalMessage } from 'stream-chat';
+
+import { ChannelProps } from '../../components';
+import { ThreadContextValue } from '../threadContext/ThreadContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type MessageComposerContextValue = {
+  channel: ChannelProps['channel'];
+  thread: ThreadContextValue['thread'];
+  threadInstance: ThreadContextValue['threadInstance'];
+  editing?: LocalMessage;
+};
+
+export const MessageComposerContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessageComposerContextValue,
+);
+
+type Props = React.PropsWithChildren<{
+  value: MessageComposerContextValue;
+}>;
+
+export const MessageComposerProvider = ({ children, value }: Props) => (
+  <MessageComposerContext.Provider value={value}>{children}</MessageComposerContext.Provider>
+);
+
+export const useMessageComposerContext = () => {
+  const contextValue = useContext(MessageComposerContext) as unknown as MessageComposerContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useMessageComposerContext hook was called outside of the MessageComposerContext provider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/messageInputContext/hooks/useMessageComposer.ts

@@ -2,18 +2,21 @@ import { useEffect, useMemo } from 'react';
 
 import { FixedSizeQueueCache, MessageComposer } from 'stream-chat';
 
-import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
+import { useMessageComposerContext } from '../../messageComposerContext/MessageComposerContext';
 
 const queueCache = new FixedSizeQueueCache<string, MessageComposer>(64);
 
 export const useMessageComposer = () => {
   const { client } = useChatContext();
-  const { channel, editing: editedMessage } = useChannelContext();
+  const {
+    channel,
+    editing: editedMessage,
+    thread: parentMessage,
+    threadInstance,
+  } = useMessageComposerContext();
 
   // legacy thread will receive new composer
-  const { thread: parentMessage, threadInstance } = useThreadContext();
 
   const cachedEditedMessage = useMemo(() => {
     if (!editedMessage) return undefined;