chore: Fix onFileUploaded UI update in thread. (#813)

Author: chohongm

src/modules/Channel/context/hooks/useSendMultipleFilesMessage.ts

@@ -6,9 +6,10 @@ import { MultipleFilesMessage } from '@sendbird/chat/message';
 import type { Logger } from '../../../../lib/SendbirdState';
 import type { Nullable } from '../../../../types';
 import PUBSUB_TOPICS from '../../../../lib/pubSub/topics';
-import { scrollIntoLast } from '../utils';
+import { scrollIntoLast as scrollIntoLastForChannel } from '../utils';
 import { SendableMessageType } from '../../../../utils';
 import { PublishingModuleType } from '../../../internalInterfaces';
+import { scrollIntoLast as scrollIntoLastForThread } from '../../../Thread/context/utils';
 
 export type OnBeforeSendMFMType = (
   files: Array<File>,
@@ -107,10 +108,15 @@ export const useSendMultipleFilesMessage = ({
               channel: currentChannel,
               publishingModules,
             });
-            if (scrollRef) {
-              // We need this delay because rendering MFM takes time due to large image files.
-              setTimeout(() => scrollIntoLast(0, scrollRef), 100);
-            }
+            // We need this delay because rendering MFM takes time due to large image files.
+            setTimeout(() => {
+              if (scrollRef && publishingModules.includes(PublishingModuleType.CHANNEL)) {
+                scrollIntoLastForChannel(0, scrollRef);
+              }
+              if (publishingModules.includes(PublishingModuleType.THREAD)) {
+                scrollIntoLastForThread(0);
+              }
+            }, 100);
           })
           .onFailed((error, failedMessage: MultipleFilesMessage) => {
             logger.error('Channel: Sending MFM failed.', { error, failedMessage });
@@ -128,10 +134,15 @@ export const useSendMultipleFilesMessage = ({
               message: succeededMessage,
               publishingModules,
             });
-            if (scrollRef) {
-              // We need this delay because rendering MFM takes time due to large image files.
-              setTimeout(() => scrollIntoLast(0, scrollRef), 100);
-            }
+            // We need this delay because rendering MFM takes time due to large image files.
+            setTimeout(() => {
+              if (scrollRef && publishingModules.includes(PublishingModuleType.CHANNEL)) {
+                scrollIntoLastForChannel(0, scrollRef);
+              }
+              if (publishingModules.includes(PublishingModuleType.THREAD)) {
+                scrollIntoLastForThread(0);
+              }
+            }, 100);
             resolve(succeededMessage);
           });
       } catch (error) {

src/modules/Thread/context/dux/actionTypes.ts

@@ -32,6 +32,7 @@ export enum ThreadContextActionTypes {
   ON_MESSAGE_UPDATED = 'ON_MESSAGE_UPDATED',
   ON_MESSAGE_DELETED = 'ON_MESSAGE_DELETED',
   ON_REACTION_UPDATED = 'ON_REACTION_UPDATED',
+  ON_FILE_INFO_UPLOADED = 'ON_FILE_INFO_UPLOADED',
   // event handlers - user status change
   ON_USER_MUTED = 'ON_USER_MUTED',
   ON_USER_UNMUTED = 'ON_USER_UNMUTED',

src/modules/Thread/context/dux/reducer.ts

@@ -1,5 +1,5 @@
 import { GroupChannel } from '@sendbird/chat/groupChannel';
-import { ReactionEvent, UserMessage } from '@sendbird/chat/message';
+import { MultipleFilesMessage, ReactionEvent, UserMessage } from '@sendbird/chat/message';
 import { NEXT_THREADS_FETCH_SIZE, PREV_THREADS_FETCH_SIZE } from '../../consts';
 import { ChannelStateTypes, ParentMessageStateTypes, ThreadListStateTypes } from '../../types';
 import { compareIds } from '../utils';
@@ -351,8 +351,37 @@ export default function reducer(
         ...state,
       };
     }
+    case actionTypes.ON_FILE_INFO_UPLOADED: {
+      const { channelUrl, requestId, index, uploadableFileInfo, error } = action.payload;
+      if (!compareIds(channelUrl, state.currentChannel?.url)) {
+        return state;
+      }
+      /**
+       * We don't have to do anything here because
+       * onFailed() will be called so handle error there instead.
+       */
+      if (error) return state;
+      const { localThreadMessages } = state;
+      const messageToUpdate = localThreadMessages.find((message) => compareIds(hasReqId(message) && message.reqId, requestId),
+      );
+      const fileInfoList = (messageToUpdate as MultipleFilesMessage)
+        .messageParams?.fileInfoList;
+      if (Array.isArray(fileInfoList)) {
+        fileInfoList[index] = uploadableFileInfo;
+      }
+      return {
+        ...state,
+        localThreadMessages,
+      };
+    }
     default: {
       return state;
     }
   }
 }
+
+function hasReqId<T extends object>(
+  message: T,
+): message is T & { reqId: string } {
+  return 'reqId' in message;
+}

src/modules/Thread/context/hooks/useHandleThreadPubsubEvents.ts

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { CustomUseReducerDispatcher, Logger } from '../../../../lib/SendbirdState';
-import topics from '../../../../lib/pubSub/topics';
+import topics, { PUBSUB_TOPICS } from '../../../../lib/pubSub/topics';
 import { scrollIntoLast } from '../utils';
 import { ThreadContextActionTypes } from '../dux/actionTypes';
 import { SendableMessageType } from '../../../../utils';
-import { PublishingModuleType } from './useSendMultipleFilesMessage';
+import { FileUploadedPayload, PublishingModuleType } from './useSendMultipleFilesMessage';
+import * as channelActions from '../../../Channel/context/dux/actionTypes';
 
 interface DynamicProps {
   sdkInit: boolean;
@@ -32,7 +33,6 @@ export default function useHandleThreadPubsubEvents({
       if (!pubSub || !pubSub.subscribe) {
         return subscriber;
       }
-      // TODO: subscribe ON_FILE_INFO_UPLOADED
       subscriber.set(topics.SEND_MESSAGE_START, pubSub.subscribe(topics.SEND_MESSAGE_START, (props) => {
         const {
           channel,
@@ -60,6 +60,21 @@ export default function useHandleThreadPubsubEvents({
         }
         scrollIntoLast?.();
       }));
+      subscriber.set(PUBSUB_TOPICS.ON_FILE_INFO_UPLOADED, pubSub.subscribe(PUBSUB_TOPICS.ON_FILE_INFO_UPLOADED, (props) => {
+        const {
+          response,
+          publishingModules,
+        } = props as { response: FileUploadedPayload, publishingModules: PublishingModuleType[] };
+        if (
+          currentChannel?.url === response.channelUrl
+          && publishingModules.includes(PublishingModuleType.THREAD)
+        ) {
+          threadDispatcher({
+            type: channelActions.ON_FILE_INFO_UPLOADED,
+            payload: response,
+          });
+        }
+      }));
       subscriber.set(topics.SEND_USER_MESSAGE, pubSub.subscribe(topics.SEND_USER_MESSAGE, (props) => {
         const {
           channel,