@@ -10,6 +10,7 @@ import {
1010 BaseMessage ,
1111 MultipleFilesMessage ,
1212 ReactionEvent ,
13+ SendingStatus ,
1314 UserMessage ,
1415} from '@sendbird/chat/message' ;
1516import { NEXT_THREADS_FETCH_SIZE , PREV_THREADS_FETCH_SIZE } from '../consts' ;
@@ -26,6 +27,8 @@ import useUpdateMessageCallback from './hooks/useUpdateMessageCallback';
2627import useDeleteMessageCallback from './hooks/useDeleteMessageCallback' ;
2728import { useThreadFetchers } from './hooks/useThreadFetchers' ;
2829
30+ import { cloneDeep } from 'lodash' ;
31+
2932function hasReqId < T extends object > (
3033 message : T ,
3134) : message is T & { reqId : string } {
@@ -56,6 +59,10 @@ const useThread = () => {
5659
5760 const sendMessageStatusActions = {
5861 sendMessageStart : useCallback ( ( message : SendableMessageType ) => store . setState ( state => {
62+ if ( 'sendingStatus' in message ) {
63+ ( message as SendableMessageType ) . sendingStatus = SendingStatus . PENDING ;
64+ }
65+
5966 return {
6067 ...state ,
6168 localThreadMessages : [
@@ -66,6 +73,10 @@ const useThread = () => {
6673 } ) , [ store ] ) ,
6774
6875 sendMessageSuccess : useCallback ( ( message : SendableMessageType ) => store . setState ( state => {
76+ if ( 'sendingStatus' in message ) {
77+ ( message as SendableMessageType ) . sendingStatus = SendingStatus . SUCCEEDED ;
78+ }
79+
6980 return {
7081 ...state ,
7182 allThreadMessages : [
@@ -81,6 +92,10 @@ const useThread = () => {
8192 } ) , [ store ] ) ,
8293
8394 sendMessageFailure : useCallback ( ( message : SendableMessageType ) => store . setState ( state => {
95+ if ( 'sendingStatus' in message ) {
96+ ( message as SendableMessageType ) . sendingStatus = SendingStatus . FAILED ;
97+ }
98+
8499 return {
85100 ...state ,
86101 localThreadMessages : state . localThreadMessages . map ( ( m ) => (
@@ -92,6 +107,10 @@ const useThread = () => {
92107 } ) , [ store ] ) ,
93108
94109 resendMessageStart : useCallback ( ( message : SendableMessageType ) => store . setState ( state => {
110+ if ( 'sendingStatus' in message ) {
111+ ( message as SendableMessageType ) . sendingStatus = SendingStatus . PENDING ;
112+ }
113+
95114 return {
96115 ...state ,
97116 localThreadMessages : state . localThreadMessages . map ( ( m ) => (
@@ -235,16 +254,16 @@ const useThread = () => {
235254
236255 initializeThreadListSuccess : useCallback ( ( parentMessage : BaseMessage , anchorMessage : SendableMessageType , threadedMessages : BaseMessage [ ] ) => store . setState ( state => {
237256 const anchorMessageCreatedAt = ( ! anchorMessage ?. messageId ) ? parentMessage ?. createdAt : anchorMessage ?. createdAt ;
238- const anchorIndex = threadedMessages . findIndex ( ( message ) => message ?. createdAt > anchorMessageCreatedAt ) ;
257+ const anchorIndex = threadedMessages . findIndex ( ( message ) => message ?. createdAt === anchorMessageCreatedAt ) ;
239258 const prevThreadMessages = anchorIndex > - 1 ? threadedMessages . slice ( 0 , anchorIndex ) : threadedMessages ;
240- const anchorThreadMessage = anchorMessage ?. messageId ? [ anchorMessage ] : [ ] ;
241259 const nextThreadMessages = anchorIndex > - 1 ? threadedMessages . slice ( anchorIndex ) : [ ] ;
260+
242261 return {
243262 ...state ,
244263 threadListState : ThreadListStateTypes . INITIALIZED ,
245264 hasMorePrev : anchorIndex === - 1 || anchorIndex === PREV_THREADS_FETCH_SIZE ,
246265 hasMoreNext : threadedMessages . length - anchorIndex === NEXT_THREADS_FETCH_SIZE ,
247- allThreadMessages : [ prevThreadMessages , anchorThreadMessage , nextThreadMessages ] . flat ( ) as CoreMessageType [ ] ,
266+ allThreadMessages : [ ... prevThreadMessages , ... nextThreadMessages ] as CoreMessageType [ ] ,
248267 } ;
249268 } ) , [ store ] ) ,
250269
@@ -397,18 +416,25 @@ const useThread = () => {
397416 } ) , [ store ] ) ,
398417
399418 onReactionUpdated : useCallback ( ( reactionEvent : ReactionEvent ) => store . setState ( state => {
400- if ( state ?. parentMessage ?. messageId === reactionEvent ?. messageId ) {
401- state . parentMessage ?. applyReactionEvent ?.( reactionEvent ) ;
419+ let updatedParentMessage = state . parentMessage ;
420+ if ( state . parentMessage ?. messageId === reactionEvent ?. messageId ) {
421+ updatedParentMessage = cloneDeep ( state . parentMessage as SendableMessageType ) ;
422+ updatedParentMessage . applyReactionEvent ( reactionEvent ) ;
402423 }
424+
425+ const updatedMessages = state . allThreadMessages . map ( ( m ) => {
426+ if ( reactionEvent ?. messageId === m ?. messageId ) {
427+ const updatedMessage = cloneDeep ( m as CoreMessageType ) ;
428+ updatedMessage . applyReactionEvent ( reactionEvent ) ;
429+ return updatedMessage ;
430+ }
431+ return m ;
432+ } ) ;
433+
403434 return {
404435 ...state ,
405- allThreadMessages : state . allThreadMessages . map ( ( m ) => {
406- if ( reactionEvent ?. messageId === m ?. messageId ) {
407- m ?. applyReactionEvent ?.( reactionEvent ) ;
408- return m ;
409- }
410- return m ;
411- } ) ,
436+ parentMessage : updatedParentMessage ,
437+ allThreadMessages : [ ...updatedMessages ] , // Create new array reference to trigger re-render
412438 } ;
413439 } ) , [ store ] ) ,
414440
0 commit comments