fix: clean up the interface of thread module (#459)

### Description Of Changes

Issue
* Had to cover parent message with brackets before putting it to the
Thread. So it caused confusing work around

Fix
* Check if the message is parent message or thread message inside of the
Thread
  * Use case (Before)
  ```javascript
  <Thread
    message={message}
    // or
    message={{ parentMessage }}
  />
  ```
  * Use case (After)
  ```javascript
  <Thread
    message={message}
    // or
    message={parentMessage}
  />
  ```
* Remove props on the interface: `includePollDetails`
* Add util functions `isParentMessage` and `isThreadMessage`

[UIKIT-3325](https://sendbird.atlassian.net/browse/UIKIT-3325)

Author: HoonBaek

scripts/index_d_ts

@@ -664,7 +664,6 @@ declare module "SendbirdUIKitGlobal" {
       // includeReactions?: boolean,
       // UIKit doesn't support message threading in OpenChannel
       // includeThreadInfo?: boolean,
-      includePollDetails?: boolean,
       includeParentMessageInfo?: boolean,
       showSubchannelMessagesOnly?: boolean,
       customTypes?: Array<string>,

src/index.d.ts

@@ -956,7 +956,6 @@ type OpenChannelQueries = {
     // includeReactions?: boolean,
     // UIKit doesn't support message threading in OpenChannel
     // includeThreadInfo?: boolean,
-    includePollDetails?: boolean,
     includeParentMessageInfo?: boolean,
     showSubchannelMessagesOnly?: boolean,
     customTypes?: Array<string>,

src/smart-components/App/DesktopLayout.tsx

@@ -7,7 +7,6 @@ import Channel from '../Channel';
 import ChannelSettings from '../ChannelSettings';
 import MessageSearchPannel from '../MessageSearch';
 import Thread from '../Thread';
-import { BaseMessage, UserMessage } from '@sendbird/chat/message';
 
 export const DesktopLayout: React.FC<DesktopLayoutProps> = (
   props: DesktopLayoutProps,
@@ -77,10 +76,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (
             setShowSettings(false);
             setShowSearch(false);
             if (replyType === 'THREAD') {
-              setThreadTargetMessage({
-                parentMessage: message as BaseMessage,
-                parentMessageId: message?.messageId,
-              } as UserMessage);
+              setThreadTargetMessage(message);
               setShowThread(true);
             }
           }}

src/smart-components/Channel/context/ChannelProvider.tsx

@@ -55,7 +55,6 @@ export type MessageListParams = {
   includeMetaArray?: boolean,
   includeReactions?: boolean,
   includeThreadInfo?: boolean,
-  includePollDetails?: boolean,
   includeParentMessageInfo?: boolean,
   showSubchannelMessagesOnly?: boolean,
   customTypes?: Array<string>,

src/smart-components/OpenChannel/context/OpenChannelProvider.tsx

@@ -46,7 +46,6 @@ type OpenChannelQueries = {
     // includeReactions?: boolean,
     // UIKit doesn't support message threading in OpenChannel
     // includeThreadInfo?: boolean,
-    includePollDetails?: boolean,
     includeParentMessageInfo?: boolean,
     showSubchannelMessagesOnly?: boolean,
     customTypes?: Array<string>,

src/smart-components/Thread/context/ThreadProvider.tsx

@@ -3,7 +3,7 @@ import { User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { BaseMessage, FileMessage, FileMessageCreateParams, UserMessage } from '@sendbird/chat/message';
 
-import { getNicknamesMapFromMembers } from './utils';
+import { getNicknamesMapFromMembers, getParentMessageFrom } from './utils';
 import { UserProfileProvider } from '../../../lib/UserProfileContext';
 import { CustomUseReducerDispatcher } from '../../../lib/SendbirdState';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
@@ -64,7 +64,6 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
   const {
     children,
     channelUrl,
-    message,
     onHeaderActionClick,
     onMoveToParentMessage,
     onBeforeSendVoiceMessage,
@@ -73,6 +72,8 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
     renderUserProfile,
     onUserProfileMessage,
   } = props;
+  const propsMessage = props?.message;
+  const propsParentMessage = getParentMessageFrom(propsMessage);
   // Context from SendbirdProvider
   const globalStore = useSendbirdStateContext();
   const { stores, config } = globalStore;
@@ -120,19 +121,19 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
   useGetChannel({
     channelUrl,
     sdkInit,
-    message,
+    message: propsMessage,
   }, { sdk, logger, threadDispatcher });
   useGetParentMessage({
     channelUrl,
     sdkInit,
-    parentMessageId: message?.parentMessageId,
-    parentMessage: message?.parentMessage,
+    parentMessage: propsParentMessage,
   }, { sdk, logger, threadDispatcher });
   useGetThreadList({
     sdkInit,
     parentMessage,
     isReactionEnabled,
-    anchorMessage: message?.messageId ? message : null,
+    anchorMessage: propsMessage?.messageId !== propsParentMessage?.messageId ? propsMessage : null,
+    // anchorMessage should be null when parentMessage doesn't exist
   }, { logger, threadDispatcher });
   useGetAllEmoji({ sdk }, { logger, threadDispatcher });
   // Handle channel events
@@ -193,7 +194,7 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
       value={{
         // ThreadProviderProps
         channelUrl,
-        message,
+        message: propsMessage,
         onHeaderActionClick,
         onMoveToParentMessage,
         // ThreadContextInitialState

src/smart-components/Thread/context/__test__/utils.spec.ts

@@ -0,0 +1,47 @@
+import { UserMessage } from "@sendbird/chat/message";
+import { getParentMessageFrom, isParentMessage, isThreadMessage } from "../utils";
+
+const mockParentMessage = {
+  messageId: 1,
+  parentMessage: null,
+  parentMessageId: null,
+  threadInfo: {
+    lastRepliedAt: 100000,
+    replyCount: 1,
+    mostRepliedUsers: [],
+    updatedAt: 100000,
+  },
+};
+const mockThreadMessage = {
+  messageId: 2,
+  parentMessage: mockParentMessage,
+  parentMessageId: 1,
+  threadInfo: null,
+};
+
+describe('Thread/utils - isParentMessage', () => {
+  it('should comfirm if the message is a parent message', () => {
+    expect(isParentMessage(mockParentMessage as UserMessage)).toBe(true);
+  });
+  it('should confirm if the message is not a parent message', () => {
+    expect(isParentMessage(mockThreadMessage as UserMessage)).toBe(false);
+  });
+});
+
+describe('Thread/utils - isThreadMessage', () => {
+  it('should comfirm if the message is a thread message', () => {
+    expect(isThreadMessage(mockThreadMessage as UserMessage)).toBe(true);
+  });
+  it('should comfirm if the message is not a thread message', () => {
+    expect(isThreadMessage(mockParentMessage as UserMessage)).toBe(false);
+  });
+});
+
+describe('Thread/utils - getParentMessageFrom', () => {
+  it('should return parent message if it has a parent message', () => {
+    expect(getParentMessageFrom(mockThreadMessage as UserMessage)).toBe(mockParentMessage);
+  });
+  it('should return itself if it is a parent message', () => {
+    expect(getParentMessageFrom(mockParentMessage as UserMessage)).toBe(mockParentMessage);
+  });
+});

src/smart-components/Thread/context/hooks/useGetParentMessage.ts

@@ -8,7 +8,6 @@ import { ChannelType } from '@sendbird/chat';
 
 interface DynamicProps {
   channelUrl: string;
-  parentMessageId: number;
   sdkInit: boolean;
   parentMessage?: BaseMessage;
 }
@@ -21,7 +20,6 @@ interface StaticProps {
 
 export default function useGetParentMessage({
   channelUrl,
-  parentMessageId,
   sdkInit,
   parentMessage,
 }: DynamicProps, {
@@ -39,11 +37,10 @@ export default function useGetParentMessage({
       const params: MessageRetrievalParams = {
         channelUrl,
         channelType: ChannelType.GROUP,
-        messageId: parentMessageId,
+        messageId: parentMessage?.messageId,
         includeMetaArray: true,
         includeReactions: true,
         includeThreadInfo: true,
-        includePollDetails: true,
         includeParentMessageInfo: true,
       };
       logger.info('Thread | useGetParentMessage: Get parent message start.', params);
@@ -54,7 +51,7 @@ export default function useGetParentMessage({
       fetchParentMessage()
         .then((parentMsg) => {
           logger.info('Thread | useGetParentMessage: Get parent message succeeded.', parentMessage);
-          parentMsg.ogMetaData = parentMessage.ogMetaData;// ogMetaData is not included for now
+          parentMsg.ogMetaData = parentMessage?.ogMetaData || null;// ogMetaData is not included for now
           threadDispatcher({
             type: ThreadContextActionTypes.GET_PARENT_MESSAGE_SUCCESS,
             payload: { parentMessage: parentMsg },
@@ -68,7 +65,7 @@ export default function useGetParentMessage({
           });
         });
     }
-  }, [sdkInit, parentMessageId]);
+  }, [sdkInit, parentMessage?.messageId]);
   /**
    * We don't use channelUrl here,
    * because Thread must operate independently of the channel.

src/smart-components/Thread/context/utils.ts

@@ -1,6 +1,6 @@
 import format from 'date-fns/format';
 import { GroupChannel } from "@sendbird/chat/groupChannel";
-import { FileMessage, UserMessage } from "@sendbird/chat/message";
+import { BaseMessage, FileMessage, UserMessage } from "@sendbird/chat/message";
 import { getOutgoingMessageState, OutgoingMessageStates } from "../../../utils/exports/getOutgoingMessageState";
 
 export const getNicknamesMapFromMembers = (members = []): Map<string, string> => {
@@ -12,6 +12,32 @@ export const getNicknamesMapFromMembers = (members = []): Map<string, string> =>
   return nicknamesMap;
 };
 
+export const getParentMessageFrom = (message: UserMessage | FileMessage): UserMessage | FileMessage | BaseMessage => {
+  if (isParentMessage(message)) {
+    return message;
+  }
+  if (isThreadMessage(message)) {
+    return message?.parentMessage;
+  }
+  return null;
+};
+
+export const isParentMessage = (message: UserMessage | FileMessage): boolean => {
+  return (
+    message?.parentMessage === null
+    && message?.parentMessageId === null
+    && message?.threadInfo !== null
+  );
+};
+
+export const isThreadMessage = (message: UserMessage | FileMessage): boolean => {
+  return (
+    message?.parentMessage !== null
+    && message?.parentMessageId !== null
+    && message?.threadInfo === null
+  );
+};
+
 export const isAboutSame = (a: number, b: number, px: number): boolean => (Math.abs(a - b) <= px);
 
 export const isEmpty = (val: unknown): boolean => (val === null || val === undefined);