Merge pull request #800 from GetStream/mentions-optimistic-UI-fix

Mentions optimistic UI fix

Author: DanC5

src/components/Channel/Channel.tsx

@@ -25,6 +25,7 @@ import {
   Channel as StreamChannel,
   StreamChat,
   UpdatedMessage,
+  UserResponse,
 } from 'stream-chat';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -451,7 +452,11 @@ const ChannelInner = <
   );
 
   const updateMessage = useCallback(
-    (updatedMessage: StreamMessage<At, Ch, Co, Ev, Me, Re, Us>) => {
+    (
+      updatedMessage:
+        | MessageToSend<At, Ch, Co, Me, Re, Us>
+        | StreamMessage<At, Ch, Co, Ev, Me, Re, Us>,
+    ) => {
       if (!channel) return;
       // adds the message to the local channel state..
       // this adds to both the main channel state as well as any reply threads
@@ -469,15 +474,36 @@ const ChannelInner = <
     [channel, state.thread],
   );
 
+  const isUserResponseArray = (
+    output: string[] | UserResponse<Us>[],
+  ): output is UserResponse<Us>[] =>
+    (output as UserResponse<Us>[])[0]?.id != null;
+
   const doSendMessage = useCallback(
-    async (message: StreamMessage<At, Ch, Co, Ev, Me, Re, Us>) => {
+    async (
+      message:
+        | MessageToSend<At, Ch, Co, Me, Re, Us>
+        | StreamMessage<At, Ch, Co, Ev, Me, Re, Us>,
+    ) => {
       if (!channel) return;
-      const { attachments, id, mentioned_users, parent_id, text } = message;
+
+      const {
+        attachments,
+        id,
+        mentioned_users = [],
+        parent_id,
+        text,
+      } = message;
+
+      // channel.sendMessage expects an array of user id strings
+      const mentions = isUserResponseArray(mentioned_users)
+        ? mentioned_users.map(({ id }) => id)
+        : mentioned_users;
 
       const messageData = {
         attachments,
         id,
-        mentioned_users,
+        mentioned_users: mentions,
         parent_id,
         text,
       } as Message<At, Me, Us>;
@@ -524,10 +550,11 @@ const ChannelInner = <
       text: string,
       attachments: MessageAttachments<At>,
       parent: MessageResponse<At, Ch, Co, Me, Re, Us> | undefined,
-      mentioned_users: string[],
+      mentioned_users: UserResponse<Us>[],
     ) => {
       // create a preview of the message
       const clientSideID = `${client.userID}-${uuidv4()}`;
+
       return ({
         __html: text,
         attachments,

src/components/MessageInput/MessageInput.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 
 import { MessageInputLarge } from './MessageInputLarge';
 
-import type { Attachment, Channel, SendFileAPIResponse } from 'stream-chat';
+import type {
+  Attachment,
+  Channel,
+  SendFileAPIResponse,
+  UserResponse,
+} from 'stream-chat';
 
 import type { FileUpload, ImageUpload } from './hooks/messageInput';
 import type { SendButtonProps } from './icons';
@@ -101,7 +106,7 @@ export type MessageInputProps<
   overrideSubmitHandler?: (
     message: {
       attachments: Attachment<At>[];
-      mentioned_users: string[];
+      mentioned_users: UserResponse<Us>[];
       text: string;
       parent?: StreamMessage<At, Ch, Co, Ev, Me, Re, Us>;
     },

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

@@ -700,7 +700,7 @@ const ActiveChannelSetter = ({ activeChannel }) => {
             expect.objectContaining(image),
             expect.objectContaining(file),
           ]),
-          mentioned_users: [userId],
+          mentioned_users: [{ id: userId, name: username }],
           text: message.text,
         }),
       );

src/components/MessageInput/hooks/messageInput.ts

@@ -679,12 +679,10 @@ export const useMessageInput = <
     // and allows users to easily undo any accidental deletion
     const actualMentionedUsers = Array.from(
       new Set(
-        mentioned_users
-          .filter(
-            ({ id, name }) =>
-              text.includes(`@${id}`) || text.includes(`@${name}`),
-          )
-          .map(({ id }) => id),
+        mentioned_users.filter(
+          ({ id, name }) =>
+            text.includes(`@${id}`) || text.includes(`@${name}`),
+        ),
       ),
     );
 

src/context/ChannelContext.tsx

@@ -80,8 +80,10 @@ export type MessageToSend<
 > = {
   attachments?: MessageAttachments<At>;
   id?: string;
-  mentioned_users?: string[];
+  mentioned_users?: UserResponse<Us>[];
   parent?: MessageResponse<At, Ch, Co, Me, Re, Us>;
+  parent_id?: string;
+  status?: string;
   text?: string;
 };