Merge messageActions into groupchannel actions

AhyoungRyu · AhyoungRyu · commit d1191738b284 · 2024-11-07T16:32:16.000+09:00
diff --git a/src/modules/GroupChannel/components/Message/index.tsx b/src/modules/GroupChannel/components/Message/index.tsx
@@ -27,17 +27,17 @@ export const Message = (props: MessageProps): React.ReactElement => {
       onReplyInThreadClick,
       onMessageAnimated,
       onBeforeDownloadFileMessage,
-      updateUserMessage,
-      sendUserMessage,
       resendMessage,
+      deleteMessage,
       messages,
     },
     actions: {
       toggleReaction,
       setQuoteMessage,
       setAnimatedMessageId,
       scrollToMessage,
-      deleteMessage,
+      updateUserMessage,
+      sendUserMessage,
     },
   } = useGroupChannel();
 
diff --git a/src/modules/GroupChannel/context/GroupChannelProvider.tsx b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
@@ -14,7 +14,6 @@ import {
 import { UserProfileProvider } from '../../../lib/UserProfileContext';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import { useMessageListScroll } from './hooks/useMessageListScroll';
-import { useMessageActions } from './hooks/useMessageActions';
 import { getIsReactionEnabled } from '../../../utils/getIsReactionEnabled';
 import {
   getCaseResolvedReplyType,
@@ -161,15 +160,6 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     logger: logger as any,
   });
 
-  // Message actions initialization
-  const messageActions = useMessageActions({
-    ...props,
-    ...messageDataSource,
-    scrollToBottom: actions.scrollToBottom,
-    quoteMessage: state.quoteMessage,
-    replyType: resolvedReplyType,
-  });
-
   // Channel initialization
   useAsyncEffect(async () => {
     if (sdkStore.initialized && channelUrl) {
@@ -300,12 +290,13 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
 
       // Message data source & actions
       ...messageDataSource,
-      ...messageActions,
     });
   }, [
     channelUrl,
-    state.currentChannel?.url,
-    messageDataSource.messages?.map((it) => it?.messageId).join(),
+    state.currentChannel,
+    messageDataSource.initialized,
+    messageDataSource.loading,
+    messageDataSource.messages,
     configurations,
     scrollState,
     eventHandlers,
diff --git a/src/modules/GroupChannel/context/hooks/useGroupChannel.ts b/src/modules/GroupChannel/context/hooks/useGroupChannel.ts
@@ -3,26 +3,39 @@ import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { SendbirdError } from '@sendbird/chat';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
+import type {
+  FileMessage,
+  FileMessageCreateParams,
+  MultipleFilesMessage,
+  MultipleFilesMessageCreateParams,
+  UserMessage,
+  UserMessageCreateParams,
+  UserMessageUpdateParams,
+} from '@sendbird/chat/message';
+
 import { SendableMessageType } from '../../../../utils';
 import { getMessageTopOffset } from '../utils';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelContext } from '../GroupChannelProvider';
-import type { GroupChannelState } from '../types';
+import type { GroupChannelState, MessageActions } from '../types';
+import { useMessageActions } from './useMessageActions';
 
-export interface GroupChannelActions {
+export interface GroupChannelActions extends MessageActions {
   // Channel actions
   setCurrentChannel: (channel: GroupChannel) => void;
   handleChannelError: (error: SendbirdError) => void;
 
+  // Message actions
+  sendUserMessage: (params: UserMessageCreateParams) => Promise<UserMessage>;
+  sendFileMessage: (params: FileMessageCreateParams) => Promise<FileMessage>;
+  sendMultipleFilesMessage: (params: MultipleFilesMessageCreateParams) => Promise<MultipleFilesMessage>;
+  updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => Promise<UserMessage>;
+
   // UI actions
   setQuoteMessage: (message: SendableMessageType | null) => void;
   setAnimatedMessageId: (messageId: number | null) => void;
   setIsScrollBottomReached: (isReached: boolean) => void;
 
-  // Message actions
-  updateMessage: (message: SendableMessageType, updatedMessage: SendableMessageType) => Promise<void>;
-  deleteMessage: (message: SendableMessageType) => Promise<void>;
-
   // Scroll actions
   scrollToBottom: (animated?: boolean) => Promise<void>;
   scrollToMessage: (
@@ -44,6 +57,41 @@ export const useGroupChannel = () => {
   const { markAsReadScheduler } = config;
   const state: GroupChannelState = useSyncExternalStore(store.subscribe, store.getState);
 
+  const flagActions = {
+    setAnimatedMessageId: (messageId: number | null) => {
+      store.setState(state => ({ ...state, animatedMessageId: messageId }));
+    },
+
+    setIsScrollBottomReached: (isReached: boolean) => {
+      store.setState(state => ({ ...state, isScrollBottomReached: isReached }));
+    },
+  };
+
+  const scrollToBottom = async (animated?: boolean) => {
+    if (!state.scrollRef.current) return;
+
+    flagActions.setAnimatedMessageId(null);
+    flagActions.setIsScrollBottomReached(true);
+
+    if (config.isOnline && state.hasNext()) {
+      await state.resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
+      state.scrollPubSub.publish('scrollToBottom', { animated });
+    } else {
+      state.scrollPubSub.publish('scrollToBottom', { animated });
+    }
+
+    if (state.currentChannel && !state.hasNext()) {
+      state.resetNewMessages();
+      if (!state.disableMarkAsRead) {
+        markAsReadScheduler.push(state.currentChannel);
+      }
+    }
+  };
+  const messageActions = useMessageActions({
+    ...state,
+    scrollToBottom,
+  });
+
   const actions: GroupChannelActions = useMemo(() => ({
     setCurrentChannel: (channel: GroupChannel) => {
       store.setState(state => ({
@@ -68,54 +116,11 @@ export const useGroupChannel = () => {
       }));
     },
 
-    updateMessage: async (message: SendableMessageType, updatedMessage: SendableMessageType) => {
-      store.setState(state => ({
-        ...state,
-        messages: state.messages.map(msg => msg.messageId === message.messageId ? updatedMessage : msg,
-        ),
-      }));
-    },
-
-    deleteMessage: async (message: SendableMessageType) => {
-      store.setState(state => ({
-        ...state,
-        messages: state.messages.filter(msg => msg.messageId !== message.messageId),
-      }));
-    },
-
     setQuoteMessage: (message: SendableMessageType | null) => {
       store.setState(state => ({ ...state, quoteMessage: message }));
     },
 
-    setAnimatedMessageId: (messageId: number | null) => {
-      store.setState(state => ({ ...state, animatedMessageId: messageId }));
-    },
-
-    setIsScrollBottomReached: (isReached: boolean) => {
-      store.setState(state => ({ ...state, isScrollBottomReached: isReached }));
-    },
-
-    scrollToBottom: async (animated?: boolean) => {
-      if (!state.scrollRef.current) return;
-
-      actions.setAnimatedMessageId(null);
-      actions.setIsScrollBottomReached(true);
-
-      if (config.isOnline && state.hasNext()) {
-        await state.resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
-        state.scrollPubSub.publish('scrollToBottom', { animated });
-      } else {
-        state.scrollPubSub.publish('scrollToBottom', { animated });
-      }
-
-      if (state.currentChannel && !state.hasNext()) {
-        state.resetNewMessages();
-        if (!state.disableMarkAsRead) {
-          markAsReadScheduler.push(state.currentChannel);
-        }
-      }
-    },
-
+    scrollToBottom,
     scrollToMessage: async (
       createdAt: number,
       messageId: number,
@@ -139,15 +144,15 @@ export const useGroupChannel = () => {
 
       clickHandler.deactivate();
 
-      actions.setAnimatedMessageId(null);
+      flagActions.setAnimatedMessageId(null);
       const message = state.messages.find(
         (it) => it.messageId === messageId || it.createdAt === createdAt,
       );
 
       if (message) {
         const topOffset = getMessageTopOffset(message.createdAt);
         if (topOffset) state.scrollPubSub.publish('scroll', { top: topOffset, animated: scrollAnimated });
-        if (messageFocusAnimated ?? true) actions.setAnimatedMessageId(messageId);
+        if (messageFocusAnimated ?? true) flagActions.setAnimatedMessageId(messageId);
       } else {
         await state.resetWithStartingPoint(createdAt);
         setTimeout(() => {
@@ -159,7 +164,7 @@ export const useGroupChannel = () => {
               animated: scrollAnimated,
             });
           }
-          if (messageFocusAnimated ?? true) actions.setAnimatedMessageId(messageId);
+          if (messageFocusAnimated ?? true) flagActions.setAnimatedMessageId(messageId);
         });
       }
 
@@ -181,6 +186,8 @@ export const useGroupChannel = () => {
           });
       }
     },
+    ...flagActions,
+    ...messageActions,
   }), [store, state, config.isOnline, markAsReadScheduler]);
 
   return { state, actions };
diff --git a/src/modules/GroupChannel/context/hooks/useMessageActions.ts b/src/modules/GroupChannel/context/hooks/useMessageActions.ts
@@ -19,9 +19,7 @@ import {
   VOICE_MESSAGE_FILE_NAME,
   VOICE_MESSAGE_MIME_TYPE,
 } from '../../../../utils/consts';
-import type { SendableMessageType } from '../../../../utils';
-import type { ReplyType } from '../../../../types';
-import type { GroupChannelProviderProps } from '../types';
+import type { GroupChannelState } from '../types';
 
 type MessageListDataSource = ReturnType<typeof useGroupChannelMessages>;
 type MessageActions = {
@@ -30,12 +28,10 @@ type MessageActions = {
   sendVoiceMessage: (params: FileMessageCreateParams, duration: number) => Promise<FileMessage>;
   sendMultipleFilesMessage: (params: MultipleFilesMessageCreateParams) => Promise<MultipleFilesMessage>;
   updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => Promise<UserMessage>;
-};
+} & Partial<MessageListDataSource>;
 
-interface Params extends GroupChannelProviderProps, MessageListDataSource {
+interface Params extends GroupChannelState {
   scrollToBottom(animated?: boolean): Promise<void>;
-  quoteMessage?: SendableMessageType | null;
-  replyType: ReplyType;
 }
 
 const pass = <T>(value: T) => value;
@@ -55,6 +51,10 @@ export function useMessageActions(params: Params): MessageActions {
     sendMultipleFilesMessage,
     sendUserMessage,
     updateUserMessage,
+    updateFileMessage,
+    resendMessage,
+    deleteMessage,
+    resetNewMessages,
 
     scrollToBottom,
     quoteMessage,
@@ -144,5 +144,9 @@ export function useMessageActions(params: Params): MessageActions {
       },
       [buildInternalMessageParams, updateUserMessage],
     ),
+    updateFileMessage,
+    resendMessage,
+    deleteMessage,
+    resetNewMessages,
   };
 }
diff --git a/src/modules/GroupChannel/context/types.ts b/src/modules/GroupChannel/context/types.ts
@@ -19,9 +19,7 @@ import { ThreadReplySelectType } from './const';
 
 // Message data source types
 type MessageDataSource = ReturnType<typeof useGroupChannelMessages>;
-type MessageActions = ReturnType<typeof useMessageActions>;
-type MessageListDataSourceWithoutActions =
-  Omit<MessageDataSource, keyof MessageActions | `_dangerous_${string}`>;
+export type MessageActions = ReturnType<typeof useMessageActions>;
 export type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
 
 // Handler types
@@ -36,8 +34,7 @@ export interface GroupChannelState extends GroupChannelProviderProps,
   Omit<InternalGroupChannelState, keyof GroupChannelProviderProps> {
 }
 // Only include the states
-interface InternalGroupChannelState extends
-  MessageListDataSourceWithoutActions, MessageActions {
+interface InternalGroupChannelState extends MessageDataSource {
   // Channel state
   currentChannel: GroupChannel | null;
   channelUrl: string;
