fix: exclude other data from poll messages and refresh poll composer state on poll creation (#1528)

When message with poll is created we have to exclude any other message
data that was typed / uploaded / mentioned etc. by the user previously.
This data is kept in the message composer state whereas the poll
composer state is reset upon poll message creation on the server-side.

Author: MartinCupela

src/messageComposer/messageComposer.ts

@@ -88,16 +88,18 @@ const initState = (
   const quotedMessage = composition.quoted_message;
   let message;
   let draftId = null;
+  let id = MessageComposer.generateId(); // do not use draft id for messsage id
   if (compositionIsDraftResponse(composition)) {
     message = composition.message;
     draftId = composition.message.id;
   } else {
     message = composition;
+    id = composition.id;
   }
 
   return {
     draftId,
-    id: message.id,
+    id,
     quotedMessage: quotedMessage
       ? formatMessage(quotedMessage as MessageResponseBase)
       : null,
@@ -318,6 +320,7 @@ export class MessageComposer {
     this.attachmentManager.initState({ message });
     this.linkPreviewsManager.initState({ message });
     this.textComposer.initState({ message });
+    this.pollComposer.initState();
     this.customDataManager.initState({ message });
     this.state.next(initState(composition));
     if (
@@ -543,11 +546,6 @@ export class MessageComposer {
   };
 
   clear = () => {
-    this.attachmentManager.initState();
-    this.linkPreviewsManager.initState();
-    this.textComposer.initState();
-    this.pollComposer.initState();
-    this.customDataManager.initState();
     this.initState();
   };
 
@@ -630,6 +628,7 @@ export class MessageComposer {
     try {
       const { poll } = await this.client.createPoll(composition.data);
       this.state.partialNext({ pollId: poll.id });
+      this.pollComposer.initState();
     } catch (error) {
       this.client.notifications.add({
         message: 'Failed to create the poll',

src/messageComposer/middleware/messageComposer/MessageComposerMiddlewareExecutor.ts

@@ -30,6 +30,7 @@ import {
   createCustomDataCompositionMiddleware,
   createDraftCustomDataCompositionMiddleware,
 } from './customData';
+import { createPollOnlyCompositionMiddleware } from './pollOnly';
 
 export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<
   MessageComposerMiddlewareState,
@@ -40,6 +41,7 @@ export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<
     // todo: document how to add custom data to a composed message using middleware
     //  or adding custom composer components (apart from AttachmentsManager, TextComposer etc.)
     this.use([
+      createPollOnlyCompositionMiddleware(composer),
       createTextComposerCompositionMiddleware(composer),
       createAttachmentsCompositionMiddleware(composer),
       createLinkPreviewsCompositionMiddleware(composer),

src/messageComposer/middleware/messageComposer/pollOnly.ts

@@ -0,0 +1,49 @@
+import type {
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+} from './types';
+import type { MessageComposer } from '../../messageComposer';
+import type { MiddlewareHandlerParams } from '../../../middleware';
+import type { LocalMessage } from '../../../types';
+
+const pollLocalMessageNullifiedFields: Pick<
+  LocalMessage,
+  'attachments' | 'mentioned_users' | 'parent_id' | 'quoted_message' | 'text'
+> = {
+  attachments: [],
+  mentioned_users: [],
+  parent_id: undefined,
+  quoted_message: undefined,
+  text: '',
+};
+
+export const createPollOnlyCompositionMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
+  id: 'stream-io/message-composer-middleware/poll-only',
+  handlers: {
+    compose: ({
+      state,
+      complete,
+      forward,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const pollId = composer.pollId;
+      const isEditingMessage = !!composer.editedMessage;
+      const isComposingThreadReply = !!composer.threadId;
+      if (!pollId || isComposingThreadReply || isEditingMessage) return forward();
+
+      return complete({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          ...pollLocalMessageNullifiedFields,
+          poll_id: pollId,
+        },
+        message: {
+          id: state.localMessage.id,
+          poll_id: pollId,
+        },
+      });
+    },
+  },
+});

test/unit/MessageComposer/messageComposer.test.ts

@@ -192,7 +192,8 @@ describe('MessageComposer', () => {
 
       const { messageComposer } = setup({ composition: draftMessage });
 
-      expect(messageComposer.draftId).toBe('test-draft-id');
+      expect(messageComposer.draftId).toBe(draftMessage.message.id);
+      expect(messageComposer.id).not.toBe(draftMessage.message.id);
     });
   });
 
@@ -718,6 +719,7 @@ describe('MessageComposer', () => {
 
       expect(spyCompose).toHaveBeenCalled();
       expect(spyCreatePoll).toHaveBeenCalledWith(mockPoll);
+      expect(messageComposer.pollComposer.initState).toHaveBeenCalled();
       expect(messageComposer.state.getLatestValue().pollId).toBe('test-poll-id');
     });
 

test/unit/MessageComposer/middleware/messageComposer/attachments.test.ts

@@ -38,7 +38,7 @@ const setupDraft = (initialState: MessageDraftComposerMiddlewareValueState) => {
   };
 };
 
-describe('AttachmentsMiddleware', () => {
+describe('stream-io/message-composer-middleware/attachments', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;
@@ -377,7 +377,7 @@ describe('AttachmentsMiddleware', () => {
   });
 });
 
-describe('DraftAttachmentsMiddleware', () => {
+describe('stream-io/message-composer-middleware/draft-attachments', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;

test/unit/MessageComposer/middleware/messageComposer/compositionValidation.test.ts

@@ -40,7 +40,7 @@ const setupDraft = (initialState: MessageDraftComposerMiddlewareValueState) => {
   };
 };
 
-describe('MessageComposerValidationMiddleware', () => {
+describe('stream-io/message-composer-middleware/data-validation', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;
@@ -348,7 +348,7 @@ describe('MessageComposerValidationMiddleware', () => {
   });
 });
 
-describe('DraftCompositionValidationMiddleware', () => {
+describe('stream-io/message-composer-middleware/draft-data-validation', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;

test/unit/MessageComposer/middleware/messageComposer/customData.test.ts

@@ -10,6 +10,7 @@ import type {
   MessageComposerMiddlewareState,
   MessageDraftComposerMiddlewareValueState,
 } from '../../../../../src/messageComposer/middleware/messageComposer/types';
+import { MiddlewareStatus } from '../../../../../src';
 
 const setup = (initialState: MessageComposerMiddlewareState) => {
   return {
@@ -52,7 +53,7 @@ describe('Custom Data Middleware', () => {
     });
   });
 
-  describe('createCustomDataCompositionMiddleware', () => {
+  describe('stream-io/message-composer-middleware/custom-data', () => {
     it('should initialize with custom data', async () => {
       const data = { key: 'value' };
       composer.customDataManager.setMessageData(data);
@@ -108,7 +109,7 @@ describe('Custom Data Middleware', () => {
     });
   });
 
-  describe('createDraftCustomDataCompositionMiddleware', () => {
+  describe('stream-io/message-composer-middleware/draft-custom-data', () => {
     it('should initialize with custom data', async () => {
       const data = { key: 'value' };
       composer.customDataManager.setMessageData(data);

test/unit/MessageComposer/middleware/messageComposer/linkPreviews.test.ts

@@ -90,7 +90,7 @@ const setup = ({
   return { linkPreviewsMiddleware, messageComposer };
 };
 
-describe('LinkPreviewsMiddleware', () => {
+describe('stream-io/message-composer-middleware/link-previews', () => {
   it('should keep message attachments empty if not link previews are available', async () => {
     const { linkPreviewsMiddleware } = setup();
     const result = await linkPreviewsMiddleware.handlers.compose(
@@ -603,7 +603,7 @@ const setupForDraft = ({
 
   return { linkPreviewsMiddleware, mockClient, mockChannel, messageComposer };
 };
-describe('DraftLinkPreviewsMiddleware', () => {
+describe('stream-io/message-composer-middleware/draft-link-previews', () => {
   it('should handle draft without link previews', async () => {
     const { linkPreviewsMiddleware } = setupForDraft();
     const result = await linkPreviewsMiddleware.handlers.compose(

test/unit/MessageComposer/middleware/messageComposer/messageComposerState.test.ts

@@ -37,7 +37,7 @@ const setupHandlerParamsDraft = (
   };
 };
 
-describe('MessageComposerStateMiddleware', () => {
+describe('stream-io/message-composer-middleware/own-state', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;
@@ -307,7 +307,7 @@ describe('MessageComposerStateMiddleware', () => {
   });
 });
 
-describe('DraftMessageComposerStateMiddleware', () => {
+describe('stream-io/message-composer-middleware/draft-own-state', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;

test/unit/MessageComposer/middleware/messageComposer/pollOnly.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from 'vitest';
+import { MessageComposerMiddlewareState } from '../../../../../src';
+import { createPollOnlyCompositionMiddleware } from '../../../../../src/messageComposer/middleware/messageComposer/pollOnly';
+
+const setupMiddlewareApi = (initialState: MessageComposerMiddlewareState) => {
+  return {
+    state: initialState,
+    next: vi.fn().mockReturnValue(null),
+    complete: vi.fn().mockReturnValue(null),
+    discard: vi.fn().mockReturnValue(null),
+    forward: vi.fn().mockReturnValue(null),
+  };
+};
+
+const stateSeed: MessageComposerMiddlewareState = {
+  message: {
+    id: 'test-id',
+    parent_id: undefined,
+    type: 'regular',
+  },
+  localMessage: {
+    attachments: [],
+    created_at: new Date(),
+    deleted_at: null,
+    error: undefined,
+    id: 'test-id',
+    mentioned_users: [],
+    parent_id: undefined,
+    pinned_at: null,
+    reaction_groups: null,
+    status: 'sending',
+    text: '',
+    type: 'regular',
+    updated_at: new Date(),
+  },
+  sendOptions: {},
+};
+
+describe('stream-io/message-composer-middleware/poll-only', () => {
+  it('should complete if poll id available and not editing a message or composing a thread reply', async () => {
+    const messageComposer = {
+      pollId: 'poll-id',
+      editedMessage: false,
+      threadId: false,
+    } as any;
+
+    const middleware = createPollOnlyCompositionMiddleware(messageComposer);
+    const middlewareApi = setupMiddlewareApi(stateSeed);
+    await middleware.handlers.compose(middlewareApi);
+
+    expect(middlewareApi.complete).toHaveBeenCalledWith({
+      localMessage: {
+        ...stateSeed.localMessage,
+        poll_id: messageComposer.pollId,
+      },
+      message: {
+        id: stateSeed.localMessage.id,
+        poll_id: messageComposer.pollId,
+      },
+      sendOptions: {},
+    });
+  });
+  it('should forward if poll id is undefined', async () => {
+    const messageComposer = {
+      pollId: false,
+      editedMessage: false,
+      threadId: false,
+    } as any;
+
+    const middleware = createPollOnlyCompositionMiddleware(messageComposer);
+    const middlewareApi = setupMiddlewareApi(stateSeed);
+    await middleware.handlers.compose(middlewareApi);
+
+    expect(middlewareApi.forward).toHaveBeenCalled();
+  });
+  it('should forward if editing a message', async () => {
+    const messageComposer = {
+      pollId: true,
+      editedMessage: true,
+      threadId: false,
+    } as any;
+
+    const middleware = createPollOnlyCompositionMiddleware(messageComposer);
+    const middlewareApi = setupMiddlewareApi(stateSeed);
+    await middleware.handlers.compose(middlewareApi);
+
+    expect(middlewareApi.forward).toHaveBeenCalled();
+  });
+  it('should forward if composing a thread reply', async () => {
+    const messageComposer = {
+      pollId: true,
+      editedMessage: false,
+      threadId: true,
+    } as any;
+
+    const middleware = createPollOnlyCompositionMiddleware(messageComposer);
+    const middlewareApi = setupMiddlewareApi(stateSeed);
+    await middleware.handlers.compose(middlewareApi);
+
+    expect(middlewareApi.forward).toHaveBeenCalled();
+  });
+});

test/unit/MessageComposer/middleware/messageComposer/textComposer.test.ts

@@ -36,7 +36,7 @@ const setupDraft = (initialState: MessageDraftComposerMiddlewareValueState) => {
   };
 };
 
-describe('TextComposerMiddleware', () => {
+describe('stream-io/message-composer-middleware/text-composition', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;
@@ -350,7 +350,7 @@ describe('TextComposerMiddleware', () => {
   });
 });
 
-describe('DraftTextComposerMiddleware', () => {
+describe('stream-io/message-composer-middleware/draft-text-composition', () => {
   let channel: Channel;
   let client: StreamChat;
   let messageComposer: MessageComposer;