Use sentCounter in CompositionInput to drop old draft updates

ts/components/CompositionArea.stories.tsx

@@ -35,6 +35,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   addAttachment: action('addAttachment'),
   conversationId: '123',
   focusCounter: 0,
+  sendCounter: 0,
   i18n,
   isDisabled: false,
   messageCompositionId: '456',

ts/components/CompositionArea.tsx

@@ -162,14 +162,15 @@ export type OwnProps = Readonly<{
 
 export type Props = Pick<
   CompositionInputProps,
-  | 'sortedGroupMembers'
-  | 'onEditorStateChange'
-  | 'onTextTooLong'
+  | 'clearQuotedMessage'
   | 'draftText'
   | 'draftBodyRanges'
-  | 'clearQuotedMessage'
   | 'getPreferredBadge'
   | 'getQuotedMessage'
+  | 'onEditorStateChange'
+  | 'onTextTooLong'
+  | 'sendCounter'
+  | 'sortedGroupMembers'
 > &
   Pick<
     EmojiButtonProps,
@@ -231,13 +232,14 @@ export function CompositionArea({
   setMediaQualitySetting,
   shouldSendHighQualityAttachments,
   // CompositionInput
-  onEditorStateChange,
-  onTextTooLong,
+  clearQuotedMessage,
   draftText,
   draftBodyRanges,
-  clearQuotedMessage,
   getPreferredBadge,
   getQuotedMessage,
+  onEditorStateChange,
+  onTextTooLong,
+  sendCounter,
   sortedGroupMembers,
   // EmojiButton
   onPickEmoji,
@@ -805,6 +807,7 @@ export function CompositionArea({
             onPickEmoji={onPickEmoji}
             onSubmit={handleSubmit}
             onTextTooLong={onTextTooLong}
+            sendCounter={sendCounter}
             skinTone={skinTone}
             sortedGroupMembers={sortedGroupMembers}
             theme={theme}

ts/components/CompositionInput.stories.tsx

@@ -33,6 +33,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   getQuotedMessage: action('getQuotedMessage'),
   onPickEmoji: action('onPickEmoji'),
   large: boolean('large', overrideProps.large || false),
+  sendCounter: 0,
   sortedGroupMembers: overrideProps.sortedGroupMembers || [],
   skinTone: select(
     'skinTone',

ts/components/CompositionInput.tsx

@@ -79,6 +79,7 @@ export type Props = Readonly<{
   getPreferredBadge: PreferredBadgeSelectorType;
   large?: boolean;
   inputApi?: React.MutableRefObject<InputApi | undefined>;
+  sendCounter: number;
   skinTone?: EmojiPickDataType['skinTone'];
   draftText?: string;
   draftBodyRanges?: DraftBodyRangesType;
@@ -88,12 +89,13 @@ export type Props = Readonly<{
   sortedGroupMembers?: ReadonlyArray<ConversationType>;
   scrollerRef?: React.RefObject<HTMLDivElement>;
   onDirtyChange?(dirty: boolean): unknown;
-  onEditorStateChange?(
-    conversationId: string | undefined,
-    messageText: string,
-    bodyRanges: DraftBodyRangesType,
-    caretLocation?: number
-  ): unknown;
+  onEditorStateChange?(options: {
+    bodyRanges: DraftBodyRangesType;
+    caretLocation?: number;
+    conversationId: string | undefined;
+    messageText: string;
+    sendCounter: number;
+  }): unknown;
   onTextTooLong(): unknown;
   onPickEmoji(o: EmojiPickDataType): unknown;
   onSubmit(
@@ -134,6 +136,7 @@ export function CompositionInput(props: Props): React.ReactElement {
     onSubmit,
     placeholder,
     skinTone,
+    sendCounter,
     sortedGroupMembers,
     theme,
   } = props;
@@ -458,12 +461,13 @@ export function CompositionInput(props: Props): React.ReactElement {
         setTimeout(() => {
           const selection = quill.getSelection();
 
-          onEditorStateChange(
+          onEditorStateChange({
+            bodyRanges: mentions,
+            caretLocation: selection ? selection.index : undefined,
             conversationId,
-            text,
-            mentions,
-            selection ? selection.index : undefined
-          );
+            messageText: text,
+            sendCounter,
+          });
         }, 0);
       }
     }

ts/components/CompositionTextArea.tsx

@@ -86,12 +86,7 @@ export function CompositionTextArea({
   }, [inputApiRef]);
 
   const handleChange = React.useCallback(
-    (
-      _conversationId: string | undefined,
-      newValue: string,
-      bodyRanges: DraftBodyRangesType,
-      caretLocation?: number | undefined
-    ) => {
+    ({ bodyRanges, caretLocation, messageText: newValue }) => {
       const inputEl = inputApiRef.current;
       if (!inputEl) {
         return;
@@ -124,21 +119,22 @@ export function CompositionTextArea({
   return (
     <div className="CompositionTextArea">
       <CompositionInput
-        placeholder={placeholder}
         clearQuotedMessage={shouldNeverBeCalled}
-        scrollerRef={scrollerRef}
+        draftText={draftText}
         getPreferredBadge={getPreferredBadge}
         getQuotedMessage={noop}
         i18n={i18n}
         inputApi={inputApiRef}
         large
         moduleClassName="CompositionTextArea__input"
-        onScroll={onScroll}
         onEditorStateChange={handleChange}
         onPickEmoji={onPickEmoji}
+        onScroll={onScroll}
         onSubmit={onSubmit}
         onTextTooLong={onTextTooLong}
-        draftText={draftText}
+        placeholder={placeholder}
+        scrollerRef={scrollerRef}
+        sendCounter={0}
         theme={theme}
       />
       <div className="CompositionTextArea__emoji">

ts/components/StoryViewsNRepliesModal.tsx

@@ -225,7 +225,7 @@ export function StoryViewsNRepliesModal({
               i18n={i18n}
               inputApi={inputApiRef}
               moduleClassName="StoryViewsNRepliesModal__input"
-              onEditorStateChange={(_conversationId, messageText) => {
+              onEditorStateChange={({ messageText }) => {
                 setMessageBodyText(messageText);
               }}
               onPickEmoji={onUseEmoji}
@@ -242,6 +242,7 @@ export function StoryViewsNRepliesModal({
                       firstName: authorTitle,
                     })
               }
+              sendCounter={0}
               sortedGroupMembers={sortedGroupMembers}
               theme={ThemeType.dark}
             >