fix: poll creation and optimistic updates (#3117)

* fix: poll creation and optimistic updates

* fix: multi poll sending edge case

Author: isekovanic

package/src/components/MessageInput/SendButton.tsx

@@ -22,6 +22,7 @@ export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessag
 
 // TODO: Comment out once the commands PR has been merged on the LLC
 // @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const textComposerStateSelector = (state: TextComposerState) => ({
   // TODO: Comment out once the commands PR has been merged on the LLC
   // command: state.command,

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

@@ -4,11 +4,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-
 
 import { OverlayProvider } from '../../../contexts';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
-import {
-  generateAudioAttachment,
-  generateFileAttachment,
-  generateVideoAttachment,
-} from '../../../mock-builders/attachments';
+import { generateAudioAttachment } from '../../../mock-builders/attachments';
 
 import { FileState } from '../../../utils/utils';
 import { Channel } from '../../Channel/Channel';

package/src/components/Poll/CreatePollContent.tsx

@@ -158,13 +158,13 @@ export const CreatePoll = ({
 
   const createAndSendPoll = useCallback(async () => {
     try {
-      /**
-       * The poll is emptied inside the createPoll method(using initState) which is why we close the dialog
-       * first so that it doesn't look weird.
-       */
-      closePollCreationDialog?.();
       await messageComposer.createPoll();
       await sendMessage();
+      closePollCreationDialog?.();
+      // it's important that the reset of the pollComposer state happens
+      // after we've already closed the modal; as otherwise we'd get weird
+      // UI behaviour.
+      messageComposer.pollComposer.initState();
     } catch (error) {
       console.log('Error creating a poll and sending a message:', error);
     }

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -16,10 +16,11 @@ import {
   // createDraftCommandInjectionMiddleware,
   LocalMessage,
   Message,
+  MessageComposer,
   SendMessageOptions,
   StreamChat,
-  Message as StreamMessage,
   // TextComposerMiddleware,
+  Message as StreamMessage,
   UpdateMessageOptions,
   UploadRequestFn,
   UserResponse,
@@ -624,7 +625,18 @@ export const MessageInputProvider = ({
       }
     } else {
       try {
-        messageComposer.clear();
+        // Since the message id does not get cleared, we have to handle this manually
+        // and let the poll creation dialog handle clearing the rest of the state. Once
+        // sending a message has been moved to the composer as an API, this will be
+        // redundant and can be removed.
+        if (localMessage.poll_id) {
+          messageComposer.state.partialNext({
+            id: MessageComposer.generateId(),
+            pollId: null,
+          });
+        } else {
+          messageComposer.clear();
+        }
         await value.sendMessage({
           localMessage: {
             ...localMessage,

package/src/utils/setupCommandUIMiddleware.ts

@@ -8,6 +8,7 @@ import {
 
 // TODO: Comment out once the commands PR has been merged on the LLC
 // @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const setupCommandUIMiddleware = (messageComposer: MessageComposer) => {
   // TODO: Comment out once the commands PR has been merged on the LLC
   // messageComposer.compositionMiddlewareExecutor.insert({