fix: reduce prop surface area from auto complete input

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -11,6 +11,7 @@ import {
 
 import { CustomDataManagerState, TextComposerState } from 'stream-chat';
 
+import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
   MessageInputContextValue,
@@ -24,21 +25,16 @@ import {
 
 import { useStateStore } from '../../hooks/useStateStore';
 
-type AutoCompleteInputPropsWithContext = TextInputProps &
-  Pick<
-    MessageInputContextValue,
-    'maxMessageLength' | 'numberOfLines' | 'onChangeText' | 'setInputBoxRef'
-  > &
-  Pick<TranslationContextValue, 't'> & {
+type AutoCompleteInputProps = TextInputProps &
+  Partial<Pick<MessageInputContextValue, 'setInputBoxRef'>> &
+  Partial<Pick<TranslationContextValue, 't'>> & {
     /**
      * This is currently passed in from MessageInput to avoid rerenders
      * that would happen if we put this in the MessageInputContext
      */
     cooldownActive?: boolean;
   };
 
-export type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
-
 const textComposerStateSelector = (state: TextComposerState) => ({
   text: state.text,
 });
@@ -47,22 +43,34 @@ const customComposerDataSelector = (state: CustomDataManagerState) => ({
   command: state.custom.command,
 });
 
-const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
-  const {
-    cooldownActive = false,
-    maxMessageLength,
-    numberOfLines,
-    onChangeText,
-    setInputBoxRef,
-    t,
-    ...rest
-  } = props;
+const MAX_NUMBER_OF_LINES = 5;
+
+export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
+  const { cooldownActive = false, setInputBoxRef: propSetInputBoxRef, t: propT, ...rest } = props;
   const [localText, setLocalText] = useState('');
   const [textHeight, setTextHeight] = useState(0);
   const messageComposer = useMessageComposer();
   const { customDataManager, textComposer } = messageComposer;
   const { text } = useStateStore(textComposer.state, textComposerStateSelector);
   const { command } = useStateStore(customDataManager.state, customComposerDataSelector);
+  const { channel } = useChannelContext();
+  const { setInputBoxRef: contextSetInputBoxRef } = useMessageInputContext();
+  const { t: contextT } = useTranslationContext();
+
+  const setInputBoxRef = propSetInputBoxRef || contextSetInputBoxRef;
+  const t = propT || contextT;
+
+  const maxMessageLength = useMemo(() => {
+    return channel.getConfig()?.max_message_length;
+  }, [channel]);
+
+  const numberOfLines = useMemo(() => {
+    if (props.numberOfLines) {
+      return props.numberOfLines;
+    }
+
+    return MAX_NUMBER_OF_LINES;
+  }, [props.numberOfLines]);
 
   useEffect(() => {
     setLocalText(text);
@@ -76,13 +84,8 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
     [textComposer],
   );
 
-  const onTextChangeHandler = useCallback(
+  const onChangeTextHandler = useCallback(
     (newText: string) => {
-      if (onChangeText) {
-        onChangeText(newText);
-        return;
-      }
-
       setLocalText(newText);
 
       /**
@@ -96,7 +99,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
         });
       }, 0);
     },
-    [textComposer, onChangeText],
+    [textComposer],
   );
 
   const {
@@ -124,7 +127,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
       autoFocus={!!command}
       maxLength={maxMessageLength}
       multiline
-      onChangeText={onTextChangeHandler}
+      onChangeText={onChangeTextHandler}
       onContentSizeChange={handleContentSizeChange}
       onSelectionChange={handleSelectionChange}
       placeholder={placeholderText}
@@ -146,50 +149,6 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   );
 };
 
-const areEqual = (
-  prevProps: AutoCompleteInputPropsWithContext,
-  nextProps: AutoCompleteInputPropsWithContext,
-) => {
-  const { cooldownActive: prevCooldownActive, t: prevT } = prevProps;
-  const { cooldownActive: nextCooldownActive, t: nextT } = nextProps;
-
-  const tEqual = prevT === nextT;
-  if (!tEqual) {
-    return false;
-  }
-
-  const cooldownActiveEqual = prevCooldownActive === nextCooldownActive;
-  if (!cooldownActiveEqual) {
-    return false;
-  }
-
-  return true;
-};
-
-const MemoizedAutoCompleteInput = React.memo(
-  AutoCompleteInputWithContext,
-  areEqual,
-) as typeof AutoCompleteInputWithContext;
-
-export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
-  const { maxMessageLength, numberOfLines, onChangeText, setInputBoxRef } =
-    useMessageInputContext();
-  const { t } = useTranslationContext();
-
-  return (
-    <MemoizedAutoCompleteInput
-      {...{
-        maxMessageLength,
-        numberOfLines,
-        onChangeText,
-        setInputBoxRef,
-        t,
-      }}
-      {...props}
-    />
-  );
-};
-
 const styles = StyleSheet.create({
   inputBox: {
     flex: 1,

package/src/components/Channel/Channel.tsx

@@ -436,7 +436,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * Boolean flag to enable/disable marking the channel as read on mount
      */
     markReadOnMount?: boolean;
-    maxMessageLength?: number;
     /**
      * Load the channel at a specified message instead of the most recent message.
      */
@@ -567,7 +566,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     loadingMoreRecent: loadingMoreRecentProp,
     markdownRules,
     markReadOnMount = true,
-    maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
     mentionAllAppUsersEnabled = false,
@@ -616,8 +614,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     NetworkDownIndicator = NetworkDownIndicatorDefault,
     // TODO: Think about this one
     newMessageStateUpdateThrottleInterval = defaultThrottleInterval,
-    numberOfLines = 5,
-    onChangeText,
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
@@ -1789,13 +1785,10 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     InputButtons,
     InputEditingStateHeader,
     InputReplyStateHeader,
-    maxMessageLength: maxMessageLengthProp ?? clientChannelConfig?.max_message_length ?? undefined,
     maxNumberOfFiles,
     mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery,
     MoreOptionsButton,
-    numberOfLines,
-    onChangeText,
     openPollCreationDialog,
     SendButton,
     sendImageAsync,

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

@@ -43,13 +43,10 @@ export const useCreateInputMessageInputContext = ({
   InputButtons,
   InputEditingStateHeader,
   InputReplyStateHeader,
-  maxMessageLength,
   maxNumberOfFiles,
   mentionAllAppUsersEnabled,
   mentionAllAppUsersQuery,
   MoreOptionsButton,
-  numberOfLines,
-  onChangeText,
   openPollCreationDialog,
   SendButton,
   sendImageAsync,
@@ -110,13 +107,10 @@ export const useCreateInputMessageInputContext = ({
       InputButtons,
       InputEditingStateHeader,
       InputReplyStateHeader,
-      maxMessageLength,
       maxNumberOfFiles,
       mentionAllAppUsersEnabled,
       mentionAllAppUsersQuery,
       MoreOptionsButton,
-      numberOfLines,
-      onChangeText,
       openPollCreationDialog,
       SendButton,
       sendImageAsync,
@@ -135,7 +129,6 @@ export const useCreateInputMessageInputContext = ({
       channelId,
       editingDep,
       initialValue,
-      maxMessageLength,
       CreatePollContent,
       showPollCreationDialog,
     ],

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

@@ -106,7 +106,6 @@ export const useMessageActionHandlers = ({
 
   const handleEditMessage = () => {
     setEditingState(message);
-    messageComposer.setQuotedMessage(null);
   };
 
   const handleFlagMessage = () => {

package/src/components/MessageInput/MessageInput.tsx

@@ -145,8 +145,6 @@ type MessageInputPropsWithContext = Pick<
     | 'SendButton'
     | 'sending'
     | 'sendMessageAsync'
-    | 'setShowMoreOptions'
-    | 'showMoreOptions'
     | 'ShowThreadMessageInChannelButton'
     | 'StartAudioRecordingButton'
     | 'removeFile'
@@ -906,7 +904,6 @@ const areEqual = (
     isValidMessage: prevIsValidMessage,
     openPollCreationDialog: prevOpenPollCreationDialog,
     sending: prevSending,
-    showMoreOptions: prevShowMoreOptions,
     showPollCreationDialog: prevShowPollCreationDialog,
     t: prevT,
     thread: prevThread,
@@ -928,7 +925,6 @@ const areEqual = (
     isValidMessage: nextIsValidMessage,
     openPollCreationDialog: nextOpenPollCreationDialog,
     sending: nextSending,
-    showMoreOptions: nextShowMoreOptions,
     showPollCreationDialog: nextShowPollCreationDialog,
     t: nextT,
     thread: nextThread,
@@ -997,11 +993,6 @@ const areEqual = (
     return false;
   }
 
-  const showMoreOptionsEqual = prevShowMoreOptions === nextShowMoreOptions;
-  if (!showMoreOptionsEqual) {
-    return false;
-  }
-
   const isOnlineEqual = prevIsOnline === nextIsOnline;
   if (!isOnlineEqual) {
     return false;
@@ -1110,8 +1101,6 @@ export const MessageInput = (props: MessageInputProps) => {
     sendMessage,
     sendMessageAsync,
     SendMessageDisallowedIndicator,
-    setShowMoreOptions,
-    showMoreOptions,
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
@@ -1186,8 +1175,6 @@ export const MessageInput = (props: MessageInputProps) => {
         sendMessage,
         sendMessageAsync,
         SendMessageDisallowedIndicator,
-        setShowMoreOptions,
-        showMoreOptions,
         showPollCreationDialog,
         ShowThreadMessageInChannelButton,
         StartAudioRecordingButton,

package/src/components/MessageInput/components/CommandInput.tsx

@@ -17,10 +17,7 @@ import { AutoCompleteInput } from '../../AutoCompleteInput/AutoCompleteInput';
 import { useCountdown } from '../hooks/useCountdown';
 
 export type CommandInputProps = Partial<
-  Pick<
-    MessageInputContextValue,
-    'additionalTextInputProps' | 'cooldownEndsAt' | 'setShowMoreOptions'
-  >
+  Pick<MessageInputContextValue, 'additionalTextInputProps' | 'cooldownEndsAt'>
 > & {
   disabled: boolean;
 };
@@ -32,16 +29,13 @@ const customComposerDataSelector = (state: CustomDataManagerState) => ({
 export const CommandInput = ({
   cooldownEndsAt: propCooldownEndsAt,
   disabled,
-  setShowMoreOptions: propSetShowMoreOptions,
 }: CommandInputProps) => {
-  const { cooldownEndsAt: contextCooldownEndsAt, setShowMoreOptions: contextSetShowMoreOptions } =
-    useMessageInputContext();
+  const { cooldownEndsAt: contextCooldownEndsAt } = useMessageInputContext();
   const messageComposer = useMessageComposer();
   const { customDataManager } = messageComposer;
   const { command } = useStateStore(customDataManager.state, customComposerDataSelector);
 
   const cooldownEndsAt = propCooldownEndsAt || contextCooldownEndsAt;
-  const setShowMoreOptions = propSetShowMoreOptions || contextSetShowMoreOptions;
 
   const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
 
@@ -57,8 +51,6 @@ export const CommandInput = ({
 
   const onCloseHandler = () => {
     customDataManager.setCustomData({ command: null });
-    // TODO: Rethink setShowMoreOptions
-    setShowMoreOptions(true);
   };
 
   if (!command) {

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -208,8 +208,6 @@ export type LocalMessageInputContext = {
   setInputBoxRef: LegacyRef<TextInput> | undefined;
   setNumberOfUploads: React.Dispatch<React.SetStateAction<number>>;
   setSendThreadMessageInChannel: React.Dispatch<React.SetStateAction<boolean>>;
-  setShowMoreOptions: React.Dispatch<React.SetStateAction<boolean>>;
-  showMoreOptions: boolean;
   /**
    * Function for taking a photo and uploading it
    */
@@ -340,8 +338,6 @@ export type InputMessageInputContextValue = {
    */
   MoreOptionsButton: React.ComponentType<MoreOptionsButtonProps>;
 
-  /** Limit on the number of lines in the text input before scrolling */
-  numberOfLines: number;
   /**
    * Custom UI component for send button.
    *
@@ -457,14 +453,9 @@ export type InputMessageInputContextValue = {
    * - toggleAttachmentPicker
    */
   InputButtons?: React.ComponentType<InputButtonsProps>;
-  maxMessageLength?: number;
   /** Object containing filters/sort/options overrides for an @mention user query */
   mentionAllAppUsersEnabled?: boolean;
   mentionAllAppUsersQuery?: MentionAllAppUsersQuery;
-  /**
-   * Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-   */
-  onChangeText?: (newText: string) => void;
   openPollCreationDialog?: ({ sendMessage }: Pick<LocalMessageInputContext, 'sendMessage'>) => void;
   SendMessageDisallowedIndicator?: React.ComponentType;
   /**
@@ -562,8 +553,6 @@ export const MessageInputProvider = ({
     setFileUploads,
     setImageUploads,
     setNumberOfUploads,
-    setShowMoreOptions,
-    showMoreOptions,
   } = useMessageDetailsForState(editing, initialValue);
   const { endsAt: cooldownEndsAt, start: startCooldown } = useCooldown();
 
@@ -1409,8 +1398,6 @@ export const MessageInputProvider = ({
     setInputBoxRef,
     setNumberOfUploads,
     setSendThreadMessageInChannel,
-    setShowMoreOptions,
-    showMoreOptions,
     takeAndUploadImage,
     thread,
     toggleAttachmentPicker,