[v3.3.1] (Nov 23 2022)

Fixes:
* Rename properties of `useThreadContext`
  * `channelStatus` to `channelState`
  * `parentMessageInfoStatus` to `parentMessageState`
  * `threadListStatus` to `threadListState`
* Change the state types to enum

Author: HoonBaek

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog - v3
 
+## [v3.3.1] (Nov 23 2022)
+Fixes:
+* Rename properties of `useThreadContext`
+  * `channelStatus` to `channelState`
+  * `parentMessageInfoStatus` to `parentMessageState`
+  * `threadListStatus` to `threadListState`
+* Change the state types to enum
+  ```typescript
+  enum ChannelStateTypes {
+    NIL = 'NIL',
+    LOADING = 'LOADING',
+    INVALID = 'INVALID',
+    INITIALIZED = 'INITIALIZED',
+  }
+  enum ParentMessageStateTypes {
+    NIL = 'NIL',
+    LOADING = 'LOADING',
+    INVALID = 'INVALID',
+    INITIALIZED = 'INITIALIZED',
+  }
+  enum ThreadListStateTypes {
+    NIL = 'NIL',
+    LOADING = 'LOADING',
+    INVALID = 'INVALID',
+    INITIALIZED = 'INITIALIZED',
+  }
+  ```
+
 ## [v3.3.0] (Nov 23 2022)
 Features:
 * Provide new module `Thread`. See the specific informations of this module on the [Docs page](https://sendbird.com/docs/uikit)

scripts/index_d_ts

@@ -893,7 +893,7 @@ declare module "SendbirdUIKitGlobal" {
     INVALID = 'INVALID',
     INITIALIZED = 'INITIALIZED',
   }
-  export enum ParentMessageInfoStateTypes {
+  export enum ParentMessageStateTypes {
     NIL = 'NIL',
     LOADING = 'LOADING',
     INVALID = 'INVALID',
@@ -942,9 +942,9 @@ declare module "SendbirdUIKitGlobal" {
     currentChannel: GroupChannel;
     allThreadMessages: Array<BaseMessage>;
     parentMessage: UserMessage | FileMessage;
-    channelStatus: ChannelStateTypes;
-    parentMessageInfoStatus: ParentMessageInfoStateTypes;
-    threadListStatus: ThreadListStateTypes;
+    channelState: ChannelStateTypes;
+    parentMessageState: ParentMessageStateTypes;
+    threadListState: ThreadListStateTypes;
     hasMorePrev: boolean;
     hasMoreNext: boolean;
     emojiContainer: EmojiContainer;
@@ -959,7 +959,7 @@ declare module "SendbirdUIKitGlobal" {
     renderMessage?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;
     renderMessageInput?: () => React.ReactElement;
     renderCustomSeparator?: () => React.ReactElement;
-    renderParentMessageInfoPlaceholder?: (type: ParentMessageInfoStateTypes) => React.ReactElement;
+    renderParentMessageInfoPlaceholder?: (type: ParentMessageStateTypes) => React.ReactElement;
     renderThreadListPlaceHolder?: (type: ThreadListStateTypes) => React.ReactElement;
   }
 
@@ -1501,10 +1501,24 @@ declare module '@sendbird/uikit-react/Thread/context' {
 }
 
 declare module '@sendbird/uikit-react/Thread/context/types' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  export const ChannelStateTypes: SendbirdUIKitGlobal.ChannelStateTypes;
-  export const ParentMessageInfoStateTypes: SendbirdUIKitGlobal.ParentMessageInfoStateTypes;
-  export const ThreadListStateTypes: SendbirdUIKitGlobal.ThreadListStateTypes;
+  export enum ChannelStateTypes {
+    NIL = 'NIL',
+    LOADING = 'LOADING',
+    INVALID = 'INVALID',
+    INITIALIZED = 'INITIALIZED',
+  }
+  export enum ParentMessageStateTypes {
+    NIL = 'NIL',
+    LOADING = 'LOADING',
+    INVALID = 'INVALID',
+    INITIALIZED = 'INITIALIZED',
+  }
+  export enum ThreadListStateTypes {
+    NIL = 'NIL',
+    LOADING = 'LOADING',
+    INVALID = 'INVALID',
+    INITIALIZED = 'INITIALIZED',
+  }
 }
 
 declare module '@sendbird/uikit-react/Thread/components/ThreadUI' {

src/smart-components/ChannelSettings/components/ModerationPanel/MembersModal.tsx

@@ -72,7 +72,7 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
               <UserListItem
                 user={member}
                 key={member.userId}
-                currentUserId={currentUser}
+                currentUser={currentUser}
                 action={({ parentRef, actionRef }) => (
                   <>
                     {channel?.myRole === 'operator' && (

src/smart-components/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx

@@ -70,7 +70,7 @@ export default function MutedMembersModal({
         >
           { members.map((member) => (
             <UserListItem
-              currentUserId={currentUser}
+              currentUser={currentUser}
               user={member}
               key={member.userId}
               action={({ actionRef, parentRef }) => (

src/smart-components/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx

@@ -64,7 +64,7 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
         >
           {operators.map((member) => (
             <UserListItem
-              currentUserId={currentUserId}
+              currentUser={currentUserId}
               user={member}
               key={member.userId}
               action={({ parentRef, actionRef }) => (

src/smart-components/Thread/components/ThreadList/ThreadListItem.tsx

@@ -51,7 +51,7 @@ export default function ThreadListItem({
     nicknamesMap,
     emojiContainer,
     toggleReaction,
-    threadListStatus,
+    threadListState,
     updateMessage,
     resendMessage,
     deleteMessage,
@@ -112,7 +112,7 @@ export default function ThreadListItem({
   }, [mentionedUserIds]);
 
   // edit input
-  const disabled = !(threadListStatus === ThreadListStateTypes.INITIALIZED)
+  const disabled = !(threadListState === ThreadListStateTypes.INITIALIZED)
     || !isOnline
     || isMuted
     || isChannelFrozen;

src/smart-components/Thread/components/ThreadUI/index.tsx

@@ -7,7 +7,7 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import { getChannelTitle } from '../../../Channel/components/ChannelHeader/utils';
 import { useThreadContext } from '../../context/ThreadProvider';
-import { ParentMessageInfoStateTypes, ThreadListStateTypes } from '../../types';
+import { ParentMessageStateTypes, ThreadListStateTypes } from '../../types';
 import ParentMessageInfo from '../ParentMessageInfo';
 import ThreadHeader from '../ThreadHeader';
 import ThreadList from '../ThreadList';
@@ -24,7 +24,7 @@ export interface ThreadUIProps {
   renderMessage?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;
   renderMessageInput?: () => React.ReactElement;
   renderCustomSeparator?: () => React.ReactElement;
-  renderParentMessageInfoPlaceholder?: (type: ParentMessageInfoStateTypes) => React.ReactElement;
+  renderParentMessageInfoPlaceholder?: (type: ParentMessageStateTypes) => React.ReactElement;
   renderThreadListPlaceHolder?: (type: ThreadListStateTypes) => React.ReactElement;
 }
 
@@ -48,8 +48,8 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
     currentChannel,
     allThreadMessages,
     parentMessage,
-    parentMessageInfoStatus,
-    threadListStatus,
+    parentMessageState,
+    threadListState,
     hasMorePrev,
     hasMoreNext,
     fetchPrevThreads,
@@ -63,12 +63,12 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
   const MemorizedHeader = useMemorizedHeader({ renderHeader });
   const MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
     parentMessage,
-    parentMessageInfoStatus,
+    parentMessageState,
     renderParentMessageInfo,
     renderParentMessageInfoPlaceholder, // nil, loading, invalid
   });
   const MemorizedThreadList = useMemorizedThreadList({
-    threadListStatus,
+    threadListState,
     renderThreadListPlaceHolder,
   });
 

src/smart-components/Thread/components/ThreadUI/useMemorizedParentMessageInfo.tsx

@@ -1,31 +1,31 @@
 import React, { ReactElement, useMemo } from 'react';
 
-import { ParentMessageInfoStateTypes } from '../../types';
+import { ParentMessageStateTypes } from '../../types';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import { FileMessage, UserMessage } from '@sendbird/chat/message';
 
 export interface UseMemorizedParentMessageInfoProps {
   parentMessage: UserMessage | FileMessage;
-  parentMessageInfoStatus: ParentMessageInfoStateTypes;
+  parentMessageState: ParentMessageStateTypes;
   renderParentMessageInfo?: () => React.ReactElement;
-  renderParentMessageInfoPlaceholder?: (type: ParentMessageInfoStateTypes) => React.ReactElement;
+  renderParentMessageInfoPlaceholder?: (type: ParentMessageStateTypes) => React.ReactElement;
 }
 
 const useMemorizedParentMessageInfo = ({
   parentMessage,
-  parentMessageInfoStatus,
+  parentMessageState,
   renderParentMessageInfo,
   renderParentMessageInfoPlaceholder,
 }: UseMemorizedParentMessageInfoProps): ReactElement => useMemo(() => {
-  if (parentMessageInfoStatus === ParentMessageInfoStateTypes.NIL
-    || parentMessageInfoStatus === ParentMessageInfoStateTypes.LOADING
-    || parentMessageInfoStatus === ParentMessageInfoStateTypes.INVALID
+  if (parentMessageState === ParentMessageStateTypes.NIL
+    || parentMessageState === ParentMessageStateTypes.LOADING
+    || parentMessageState === ParentMessageStateTypes.INVALID
   ) {
     if (typeof renderParentMessageInfoPlaceholder === 'function') {
-      return renderParentMessageInfoPlaceholder(parentMessageInfoStatus);
+      return renderParentMessageInfoPlaceholder(parentMessageState);
     }
-    switch (parentMessageInfoStatus) {
-      case ParentMessageInfoStateTypes.NIL: {
+    switch (parentMessageState) {
+      case ParentMessageStateTypes.NIL: {
         return (
           <PlaceHolder
             className="sendbird-thread-ui__parent-message-info placeholder-nil"
@@ -34,7 +34,7 @@ const useMemorizedParentMessageInfo = ({
           />
         );
       }
-      case ParentMessageInfoStateTypes.LOADING: {
+      case ParentMessageStateTypes.LOADING: {
         return (
           <PlaceHolder
             className="sendbird-thread-ui__parent-message-info placeholder-loading"
@@ -43,7 +43,7 @@ const useMemorizedParentMessageInfo = ({
           />
         );
       }
-      case ParentMessageInfoStateTypes.INVALID: {
+      case ParentMessageStateTypes.INVALID: {
         return (
           <PlaceHolder
             className="sendbird-thread-ui__parent-message-info placeholder-invalid"
@@ -56,15 +56,15 @@ const useMemorizedParentMessageInfo = ({
         return null;
       }
     }
-  } else if (parentMessageInfoStatus === ParentMessageInfoStateTypes.INITIALIZED) {
+  } else if (parentMessageState === ParentMessageStateTypes.INITIALIZED) {
     if (typeof renderParentMessageInfo === 'function') {
       return renderParentMessageInfo();
     }
   }
   return null;
 }, [
   parentMessage,
-  parentMessageInfoStatus,
+  parentMessageState,
   renderParentMessageInfo,
   renderParentMessageInfoPlaceholder,
 ]);

src/smart-components/Thread/components/ThreadUI/useMemorizedThreadList.tsx

@@ -4,22 +4,22 @@ import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import { ThreadListStateTypes } from '../../types';
 
 export interface UseMemorizedThreadListProps {
-  threadListStatus: ThreadListStateTypes;
+  threadListState: ThreadListStateTypes;
   renderThreadListPlaceHolder?: (tyep: ThreadListStateTypes) => React.ReactElement;
 }
 
 const useMemorizedThreadList = ({
-  threadListStatus,
+  threadListState,
   renderThreadListPlaceHolder,
 }: UseMemorizedThreadListProps): ReactElement => useMemo(() => {
-  if (threadListStatus === ThreadListStateTypes.NIL
-    || threadListStatus === ThreadListStateTypes.LOADING
-    || threadListStatus === ThreadListStateTypes.INVALID
+  if (threadListState === ThreadListStateTypes.NIL
+    || threadListState === ThreadListStateTypes.LOADING
+    || threadListState === ThreadListStateTypes.INVALID
   ) {
     if (typeof renderThreadListPlaceHolder === 'function') {
-      return renderThreadListPlaceHolder(threadListStatus);
+      return renderThreadListPlaceHolder(threadListState);
     }
-    switch (threadListStatus) {
+    switch (threadListState) {
       case ThreadListStateTypes.LOADING: {
         return (
           <PlaceHolder
@@ -48,7 +48,7 @@ const useMemorizedThreadList = ({
   }
   return null;
 }, [
-  threadListStatus,
+  threadListState,
   renderThreadListPlaceHolder,
 ]);
 

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

@@ -95,9 +95,9 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
     currentChannel,
     allThreadMessages,
     parentMessage,
-    channelStatus,
-    threadListStatus,
-    parentMessageInfoStatus,
+    channelState,
+    threadListState,
+    parentMessageState,
     hasMorePrev,
     hasMoreNext,
     emojiContainer,
@@ -146,14 +146,14 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
   const fetchPrevThreads = useGetPrevThreadsCallback({
     hasMorePrev,
     parentMessage,
-    threadListStatus,
+    threadListState,
     isReactionEnabled,
     oldestMessageTimeStamp: allThreadMessages[0]?.createdAt || 0,
   }, { logger, threadDispatcher });
   const fetchNextThreads = useGetNextThreadsCallback({
     hasMoreNext,
     parentMessage,
-    threadListStatus,
+    threadListState,
     isReactionEnabled,
     latestMessageTimeStamp: allThreadMessages[allThreadMessages.length - 1]?.createdAt || 0
   }, { logger, threadDispatcher });
@@ -193,9 +193,9 @@ export const ThreadProvider: React.FC<ThreadProviderProps> = (props: ThreadProvi
         currentChannel,
         allThreadMessages,
         parentMessage,
-        channelStatus,
-        threadListStatus,
-        parentMessageInfoStatus,
+        channelState,
+        threadListState,
+        parentMessageState,
         hasMorePrev,
         hasMoreNext,
         emojiContainer,