perf: separate composer ctxs and optimize usage (#3112)

* perf: abstract away composer api and usage

* fix: remove props inport and remove comments

---------

Co-authored-by: Khushal Agarwal <[email protected]>

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -721,7 +721,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     },
   } = useTheme();
   const [deleted, setDeleted] = useState<boolean>(false);
-  const [editing, setEditing] = useState<LocalMessage | undefined>(undefined);
   const [error, setError] = useState<Error | boolean>(false);
   const [lastRead, setLastRead] = useState<Date | undefined>();
   const [thread, setThread] = useState<LocalMessage | null>(threadProps || null);
@@ -1456,14 +1455,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
         : client.updateMessage(localMessage, undefined, options),
   );
 
-  const setEditingState: MessagesContextValue['setEditingState'] = useStableCallback((message) => {
-    setEditing(message);
-  });
-
-  const clearEditingState: InputMessageInputContextValue['clearEditingState'] = useStableCallback(
-    () => setEditing(undefined),
-  );
-
   /**
    * Removes the message from local state
    */
@@ -1766,15 +1757,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     AutoCompleteSuggestionList,
     CameraSelectorIcon,
     channelId,
-    clearEditingState,
     CommandInput,
     CommandsButton,
     compressImageQuality,
     CooldownTimer,
     CreatePollContent,
     CreatePollIcon,
     doFileUploadRequest,
-    editing,
     editMessage,
     FileAttachmentUploadPreview,
     FileSelectorIcon,
@@ -1915,7 +1904,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     ScrollToBottomButton,
     selectReaction,
     sendReaction,
-    setEditingState,
     shouldShowUnreadUnderlay,
     StreamingMessageView,
     supportedReactions,
@@ -1947,8 +1935,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   });
 
   const messageComposerContext = useMemo(
-    () => ({ channel, editing, thread, threadInstance }),
-    [channel, editing, thread, threadInstance],
+    () => ({ channel, thread, threadInstance }),
+    [channel, thread, threadInstance],
   );
 
   // TODO: replace the null view with appropriate message. Currently this is waiting a design decision.

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

@@ -26,7 +26,6 @@ export const useCreateInputMessageInputContext = ({
   AutoCompleteSuggestionItem,
   AutoCompleteSuggestionList,
   channelId,
-  clearEditingState,
   CameraSelectorIcon,
   CommandInput,
   CommandsButton,
@@ -35,7 +34,6 @@ export const useCreateInputMessageInputContext = ({
   CreatePollContent,
   CreatePollIcon,
   doFileUploadRequest,
-  editing,
   editMessage,
   FileAttachmentUploadPreview,
   FileSelectorIcon,
@@ -72,8 +70,6 @@ export const useCreateInputMessageInputContext = ({
    */
   channelId?: string;
 }) => {
-  const editingDep = editing ? editing.id : '';
-
   const inputMessageInputContext: InputMessageInputContextValue = useMemo(
     () => ({
       additionalTextInputProps,
@@ -99,15 +95,13 @@ export const useCreateInputMessageInputContext = ({
       AutoCompleteSuggestionItem,
       AutoCompleteSuggestionList,
       CameraSelectorIcon,
-      clearEditingState,
       CommandInput,
       CommandsButton,
       compressImageQuality,
       CooldownTimer,
       CreatePollContent,
       CreatePollIcon,
       doFileUploadRequest,
-      editing,
       editMessage,
       FileAttachmentUploadPreview,
       FileSelectorIcon,
@@ -140,7 +134,7 @@ export const useCreateInputMessageInputContext = ({
       VideoRecorderSelectorIcon,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [compressImageQuality, channelId, editingDep, CreatePollContent, showPollCreationDialog],
+    [compressImageQuality, channelId, CreatePollContent, showPollCreationDialog],
   );
 
   return inputMessageInputContext;

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

@@ -96,7 +96,6 @@ export const useCreateMessagesContext = ({
   ScrollToBottomButton,
   selectReaction,
   sendReaction,
-  setEditingState,
   shouldShowUnreadUnderlay,
   StreamingMessageView,
   supportedReactions,
@@ -212,7 +211,6 @@ export const useCreateMessagesContext = ({
       ScrollToBottomButton,
       selectReaction,
       sendReaction,
-      setEditingState,
       shouldShowUnreadUnderlay,
       StreamingMessageView,
       supportedReactions,

package/src/components/Message/Message.tsx

@@ -9,7 +9,6 @@ import { useMessageActions } from './hooks/useMessageActions';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
-import { useMessageComposer } from '../../contexts';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -19,6 +18,10 @@ import {
   KeyboardContextValue,
   useKeyboardContext,
 } from '../../contexts/keyboardContext/KeyboardContext';
+import {
+  MessageComposerAPIContextValue,
+  useMessageComposerAPIContext,
+} from '../../contexts/messageComposerContext/MessageComposerAPIContext';
 import { MessageContextValue, MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
   MessagesContextValue,
@@ -32,7 +35,6 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { useStableCallback } from '../../hooks';
 import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
 import { FileTypes } from '../../types/types';
 import {
@@ -143,10 +145,7 @@ export type MessagePropsWithContext = Pick<
       'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated' | 'readBy'
     >
   > &
-  Pick<
-    MessageContextValue,
-    'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy' | 'setQuotedMessage'
-  > &
+  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy'> &
   Pick<
     MessagesContextValue,
     | 'sendReaction'
@@ -178,7 +177,6 @@ export type MessagePropsWithContext = Pick<
     | 'deleteReaction'
     | 'retrySendMessage'
     | 'selectReaction'
-    | 'setEditingState'
     | 'supportedReactions'
     | 'updateMessage'
     | 'PollContent'
@@ -201,7 +199,7 @@ export type MessagePropsWithContext = Pick<
     onThreadSelect?: (message: LocalMessage) => void;
     showUnreadUnderlay?: boolean;
     style?: StyleProp<ViewStyle>;
-  };
+  } & Pick<MessageComposerAPIContextValue, 'setQuotedMessage' | 'setEditingState'>;
 
 /**
  * Since this component doesn't consume `messages` from `MessagesContext`,
@@ -944,10 +942,7 @@ export const Message = (props: MessageProps) => {
   const { openThread } = useThreadContext();
   const { t } = useTranslationContext();
   const readBy = useMemo(() => getReadState(message, read), [message, read]);
-  const messageComposer = useMessageComposer();
-  const setQuotedMessage = useStableCallback((message: LocalMessage | null) =>
-    messageComposer.setQuotedMessage(message),
-  );
+  const { setQuotedMessage, setEditingState } = useMessageComposerAPIContext();
 
   return (
     <MemoizedMessage
@@ -961,6 +956,7 @@ export const Message = (props: MessageProps) => {
         messagesContext,
         openThread,
         readBy,
+        setEditingState,
         setQuotedMessage,
         t,
       }}

package/src/components/Message/MessageSimple/MessageBounce.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Alert } from 'react-native';
 
+import {
+  MessageComposerAPIContextValue,
+  useMessageComposerAPIContext,
+} from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -13,11 +17,11 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 
 export type MessageBouncePropsWithContext = Pick<
   MessagesContextValue,
-  'setEditingState' | 'removeMessage' | 'retrySendMessage'
+  'removeMessage' | 'retrySendMessage'
 > &
   Pick<MessageContextValue, 'message'> & {
     setIsBounceDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  };
+  } & Pick<MessageComposerAPIContextValue, 'setEditingState'>;
 
 export const MessageBounceWithContext = (props: MessageBouncePropsWithContext) => {
   const { t } = useTranslationContext();
@@ -91,7 +95,8 @@ export type MessageBounceProps = Partial<MessageBouncePropsWithContext> & {
 
 export const MessageBounce = (props: MessageBounceProps) => {
   const { message } = useMessageContext();
-  const { removeMessage, retrySendMessage, setEditingState } = useMessagesContext();
+  const { removeMessage, retrySendMessage } = useMessagesContext();
+  const { setEditingState } = useMessageComposerAPIContext();
   return (
     <MemoizedMessageBounce
       {...{

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -2,6 +2,7 @@ import { Alert } from 'react-native';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
@@ -20,16 +21,12 @@ export const useMessageActionHandlers = ({
   setQuotedMessage,
 }: Pick<
   MessagesContextValue,
-  | 'sendReaction'
-  | 'deleteMessage'
-  | 'deleteReaction'
-  | 'retrySendMessage'
-  | 'setEditingState'
-  | 'supportedReactions'
+  'sendReaction' | 'deleteMessage' | 'deleteReaction' | 'retrySendMessage' | 'supportedReactions'
 > &
   Pick<ChannelContextValue, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue, 'client'> &
-  Pick<MessageContextValue, 'message' | 'setQuotedMessage'>) => {
+  Pick<MessageContextValue, 'message'> &
+  Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
   const handleResendMessage = () => retrySendMessage(message);
 

package/src/components/Message/hooks/useMessageActions.tsx

@@ -6,6 +6,7 @@ import { useMessageActionHandlers } from './useMessageActionHandlers';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -50,18 +51,17 @@ export type MessageActionsHookProps = Pick<
   | 'removeMessage'
   | 'deleteReaction'
   | 'retrySendMessage'
-  | 'setEditingState'
   | 'selectReaction'
   | 'supportedReactions'
   | 'updateMessage'
 > &
   Pick<ChannelContextValue, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue, 'client'> &
   Pick<ThreadContextValue, 'openThread'> &
-  Pick<MessageContextValue, 'dismissOverlay' | 'message' | 'setQuotedMessage'> &
+  Pick<MessageContextValue, 'dismissOverlay' | 'message'> &
   Pick<TranslationContextValue, 't'> & {
     onThreadSelect?: (message: LocalMessage) => void;
-  };
+  } & Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>;
 
 export const useMessageActions = ({
   channel,

package/src/components/MessageInput/MessageInput.tsx

@@ -36,9 +36,9 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import {
-  MessageComposerContextValue,
-  useMessageComposerContext,
-} from '../../contexts/messageComposerContext/MessageComposerContext';
+  MessageComposerAPIContextValue,
+  useMessageComposerAPIContext,
+} from '../../contexts/messageComposerContext/MessageComposerAPIContext';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useMessageComposerHasSendableData } from '../../contexts/messageInputContext/hooks/useMessageComposerHasSendableData';
@@ -142,7 +142,6 @@ type MessageInputPropsWithContext = Partial<
     | 'AutoCompleteSuggestionList'
     | 'cooldownEndsAt'
     | 'CooldownTimer'
-    | 'clearEditingState'
     | 'closeAttachmentPicker'
     | 'compressImageQuality'
     | 'doFileUploadRequest'
@@ -173,7 +172,7 @@ type MessageInputPropsWithContext = Partial<
   > &
   Pick<MessagesContextValue, 'Reply'> &
   Pick<TranslationContextValue, 't'> &
-  Pick<MessageComposerContextValue, 'editing'>;
+  Pick<MessageComposerAPIContextValue, 'clearEditingState'> & { editing: boolean };
 
 const textComposerStateSelector = (state: TextComposerState) => ({
   command: state.command,
@@ -773,7 +772,6 @@ export const MessageInput = (props: MessageInputProps) => {
   const ownCapabilities = useOwnCapabilitiesContext();
 
   const { channel, members, threadList, watchers } = useChannelContext();
-  const { editing } = useMessageComposerContext();
 
   const {
     additionalTextInputProps,
@@ -794,7 +792,6 @@ export const MessageInput = (props: MessageInputProps) => {
     AudioRecordingWaveform,
     AutoCompleteSuggestionList,
     CameraSelectorIcon,
-    clearEditingState,
     closeAttachmentPicker,
     closePollCreationDialog,
     compressImageQuality,
@@ -826,6 +823,9 @@ export const MessageInput = (props: MessageInputProps) => {
     VideoRecorderSelectorIcon,
   } = useMessageInputContext();
   const { bottomInset, bottomSheetRef, selectedPicker } = useAttachmentPickerContext();
+  const messageComposer = useMessageComposer();
+  const editing = !!messageComposer.editedMessage;
+  const { clearEditingState } = useMessageComposerAPIContext();
 
   const { Reply } = useMessagesContext();
 

package/src/components/MessageInput/components/InputEditingStateHeader.tsx

@@ -1,26 +1,26 @@
 import React, { useCallback } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
-  MessageInputContextValue,
-  useMessageInputContext,
-} from '../../../contexts/messageInputContext/MessageInputContext';
+  MessageComposerAPIContextValue,
+  useMessageComposerAPIContext,
+} from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
+import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { CircleClose, Edit } from '../../../icons';
 
 export type InputEditingStateHeaderProps = Partial<
-  Pick<MessageInputContextValue, 'clearEditingState'>
+  Pick<MessageComposerAPIContextValue, 'clearEditingState'>
 >;
 
 export const InputEditingStateHeader = ({
   clearEditingState: propClearEditingState,
 }: InputEditingStateHeaderProps) => {
   const messageComposer = useMessageComposer();
   const { t } = useTranslationContext();
-  const { clearEditingState: contextClearEditingState } = useMessageInputContext();
+  const { clearEditingState: contextClearEditingState } = useMessageComposerAPIContext();
 
   const clearEditingState = propClearEditingState || contextClearEditingState;