@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/fragments/createGroupChannelBannedUsersFragment.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createGroupChannelBannedUsersModule } from '../domain/groupChannelBannedUsers';
+import type {
+  GroupChannelBannedUsersFragment,
+  GroupChannelBannedUsersModule,
+} from '../domain/groupChannelBannedUsers/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createGroupChannelBannedUsersFragment = (
+  initModule?: Partial<GroupChannelBannedUsersModule>,
+): GroupChannelBannedUsersFragment => {
+  const GroupChannelBannedUsersModule = createGroupChannelBannedUsersModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+    const { STRINGS } = useLocalization();
+    const { currentUser, sdk } = useSendbirdChat();
+    const { openMenu } = useActionMenu();
+
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
+      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
+    });
+
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
+      if (renderUser) return renderUser(props);
+
+      const { user } = props;
+
+      return (
+        <UserActionBar
+          muted={false}
+          uri={user.profileUrl}
+          name={
+            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
+          }
+          disabled={user.userId === currentUser?.userId}
+          onPressActionMenu={() => {
+            openMenu({
+              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+              menuItems: [
+                {
+                  title: STRINGS.LABELS.UNBAN,
+                  onPress: () => channel.unbanUser(user).then(() => deleteUser(user.userId)),
+                },
+              ],
+            });
+          }}
+        />
+      );
+    });
+
+    return (
+      <GroupChannelBannedUsersModule.Provider channel={channel}>
+        <GroupChannelBannedUsersModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<GroupChannelBannedUsersModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<GroupChannelBannedUsersModule.StatusError onPressRetry={refresh} />}
+        >
+          <GroupChannelBannedUsersModule.List
+            bannedUsers={users}
+            renderUser={_renderUser}
+            ListEmptyComponent={<GroupChannelBannedUsersModule.StatusEmpty />}
+            onLoadNext={next}
+          />
+        </StatusComposition>
+      </GroupChannelBannedUsersModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelBannedUsersFragment;

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, SendbirdGroupChannelCreateParams, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
+import {
+  PASS,
+  SendbirdGroupChannelCreateParams,
+  SendbirdUser,
+  UserStruct,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';
@@ -11,30 +17,12 @@ import createUserListModule from '../domain/userList/module/createUserListModule
 import type { UserListModule } from '../domain/userList/types';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
-const defaultUserIdsGenerator = <T,>(users: T[]) => {
-  const userIds = users
-    .map((user) => {
-      // @ts-ignore
-      return user.userId as string | undefined;
-    })
-    .filter((u): u is string => Boolean(u));
-
-  if (userIds.length === 0) {
-    Logger.warn(
-      'GroupChannelCreateFragment: Couldn\'t find user ids! if you provide "queryCreator", please provide "userIdsGenerator" as well',
-    );
-  }
-
-  return userIds;
-};
-
-const createGroupChannelCreateFragment = <UserType,>(
+const createGroupChannelCreateFragment = <UserType extends UserStruct>(
   initModule?: Partial<UserListModule<UserType>>,
 ): GroupChannelCreateFragment<UserType> => {
   const UserListModule = createUserListModule<UserType>(initModule);
 
   return ({
-    userIdsGenerator = defaultUserIdsGenerator,
     onPressHeaderLeft,
     onBeforeCreateChannel = PASS,
     onCreateChannel,
@@ -52,34 +40,32 @@ const createGroupChannelCreateFragment = <UserType,>(
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((user, selectedUsers, setSelectedUsers) => {
       if (queryCreator && !renderUser) {
-        throw new Error('You should provide "renderUser" when providing "queryCreator"');
+        const hasRequiredKey = Object.hasOwn(user, 'profileUrl') && Object.hasOwn(user, 'nickname');
+        if (!hasRequiredKey) throw new Error('You should provide "renderUser" when providing "queryCreator"');
       }
-      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
 
-      const sbUser = user as unknown as SendbirdUser;
-      const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
-      const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
 
-      const isMe = sbUser.userId === currentUser?.userId;
+      const isMe = user.userId === currentUser?.userId;
       if (isMe) return null;
 
-      const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
+      const userIdx = selectedUsers.findIndex((u) => u.userId === user.userId);
       const isSelected = userIdx > -1;
 
       return (
         <TouchableOpacity
           activeOpacity={0.7}
           onPress={() => {
-            sbSetSelectedUsers(([...draft]) => {
+            setSelectedUsers(([...draft]) => {
               if (isSelected) draft.splice(userIdx, 1);
-              else draft.push(sbUser);
+              else draft.push(user);
               return draft;
             });
           }}
         >
           <UserSelectableBar
-            uri={sbUser.profileUrl}
-            name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
+            uri={(user as unknown as SendbirdUser).profileUrl}
+            name={(user as unknown as SendbirdUser).nickname || STRINGS.LABELS.USER_NO_NAME}
             selected={isSelected}
             disabled={false}
           />
@@ -96,7 +82,7 @@ const createGroupChannelCreateFragment = <UserType,>(
           onPressHeaderLeft={onPressHeaderLeft}
           onPressHeaderRight={async (users) => {
             const params: SendbirdGroupChannelCreateParams = {
-              invitedUserIds: userIdsGenerator(users),
+              invitedUserIds: users.map((it) => it.userId),
               name: '',
               coverUrl: '',
               isDistinct: false,

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+import { NOOP, PASS, SendbirdGroupChannel, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
@@ -37,7 +37,6 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     const { sdk, currentUser } = useSendbirdChat();
 
     const {
-      activeChannel,
       messages,
       nextMessages,
       newMessagesFromMembers,
@@ -76,10 +75,17 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       const processedParams = await onBeforeSendFileMessage({ file });
       await sendFileMessage(processedParams);
     });
-    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(async (text) => {
-      const processedParams = await onBeforeSendUserMessage({ message: text });
-      await sendUserMessage(processedParams);
-    });
+    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(
+      async (text, mention) => {
+        const processedParams = await onBeforeSendUserMessage({
+          message: text,
+          mentionedUserIds: mention?.userIds,
+          mentionedMessageTemplate: mention?.messageTemplate,
+          mentionType: mention?.type,
+        });
+        await sendUserMessage(processedParams);
+      },
+    );
     const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useFreshCallback(
       async (editedFile, message) => {
         const processedParams = await onBeforeSendFileMessage({ file: editedFile });
@@ -87,24 +93,29 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       },
     );
     const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useFreshCallback(
-      async (editedText, message) => {
-        const processedParams = await onBeforeSendUserMessage({ message: editedText });
+      async (editedText, message, mention) => {
+        const processedParams = await onBeforeSendUserMessage({
+          message: editedText,
+          mentionedUserIds: mention?.userIds,
+          mentionedMessageTemplate: mention?.messageTemplate,
+          mentionType: mention?.type,
+        });
         await updateUserMessage(message.messageId, processedParams);
       },
     );
 
     return (
       <GroupChannelModule.Provider
-        channel={activeChannel}
+        channel={channel}
         enableTypingIndicator={enableTypingIndicator}
         keyboardAvoidOffset={keyboardAvoidOffset}
       >
         <GroupChannelModule.Header onPressHeaderLeft={onPressHeaderLeft} onPressHeaderRight={onPressHeaderRight} />
         <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>
           <GroupChannelModule.MessageList
+            channel={channel}
             enableMessageGrouping={enableMessageGrouping}
             currentUserId={currentUser?.userId}
-            channel={activeChannel}
             renderMessage={_renderMessage}
             messages={messages}
             nextMessages={nextMessages}
@@ -120,7 +131,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input
-            channel={activeChannel}
+            SuggestedMentionList={GroupChannelModule.SuggestedMentionList}
+            shouldRenderInput={shouldRenderInput(channel)}
             onSendFileMessage={onSendFileMessage}
             onSendUserMessage={onSendUserMessage}
             onUpdateFileMessage={onUpdateFileMessage}
@@ -132,4 +144,12 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
   };
 };
 
+function shouldRenderInput(channel: SendbirdGroupChannel) {
+  if (channel.isBroadcast) {
+    return channel.myRole === 'operator';
+  }
+
+  return true;
+}
+
 export default createGroupChannelFragment;

package/src/fragments/createGroupChannelInviteFragment.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { useActiveGroupChannel, useUserList } from '@sendbird/uikit-chat-hooks';
-import { Logger, SendbirdUser } from '@sendbird/uikit-utils';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdGroupChannel, SendbirdUser, UserStruct } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';
@@ -11,37 +11,12 @@ import createUserListModule from '../domain/userList/module/createUserListModule
 import type { UserListModule } from '../domain/userList/types';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
-const defaultUserIdsGenerator = <T,>(users: T[]) => {
-  const userIds = users
-    .map((user) => {
-      // @ts-ignore
-      return user.userId as string | undefined;
-    })
-    .filter((u): u is string => Boolean(u));
-
-  if (userIds.length === 0) {
-    Logger.warn(
-      'GroupChannelInviteFragment: Couldn\'t find user id to invite! if you provided "queryCreator", please provide "userIdsGenerator" as well',
-    );
-  }
-
-  return userIds;
-};
-
-const createGroupChannelInviteFragment = <UserType,>(
+const createGroupChannelInviteFragment = <UserType extends UserStruct>(
   initModule?: Partial<UserListModule<UserType>>,
 ): GroupChannelInviteFragment<UserType> => {
   const UserListModule = createUserListModule<UserType>(initModule);
 
-  return ({
-    channel,
-    onPressHeaderLeft,
-    onInviteMembers,
-    userIdsGenerator = defaultUserIdsGenerator,
-    sortComparator,
-    queryCreator,
-    renderUser,
-  }) => {
+  return ({ channel, onPressHeaderLeft, onInviteMembers, sortComparator, queryCreator, renderUser }) => {
     const { sdk } = useSendbirdChat();
     const { STRINGS } = useLocalization();
     const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
@@ -49,48 +24,47 @@ const createGroupChannelInviteFragment = <UserType,>(
       sortComparator,
     });
 
-    const { activeChannel } = useActiveGroupChannel(sdk, channel);
+    const memberIds = shouldFilterMember(channel) ? channel.members.map((it) => it.userId) : [];
 
     const _renderUser: NonNullable<typeof renderUser> = useCallback(
       (user, selectedUsers, setSelectedUsers) => {
         if (queryCreator && !renderUser) {
-          throw new Error('You should provide "renderUser" when providing "queryCreator"');
+          const hasRequiredKey = Object.hasOwn(user, 'profileUrl') && Object.hasOwn(user, 'nickname');
+          if (!hasRequiredKey) throw new Error('You should provide "renderUser" when providing "queryCreator"');
         }
-        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
 
-        const sbUser = user as unknown as SendbirdUser;
-        const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
-        const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
+        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
 
-        const joinedUserIds = activeChannel.members.map((u) => u.userId);
-        const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
-        const isSelected = userIdx > -1;
+        const userIdxInMembers = memberIds.indexOf(user.userId);
+        const userIdxInSelectedUsers = selectedUsers.findIndex((it) => it.userId === user.userId);
 
-        const isAlreadyJoined = joinedUserIds.includes(sbUser.userId);
+        const isMember = userIdxInMembers > -1;
+        const isSelected = userIdxInSelectedUsers > -1;
 
         return (
           <TouchableOpacity
             activeOpacity={0.7}
-            disabled={isAlreadyJoined}
+            disabled={isMember}
             onPress={() => {
-              sbSetSelectedUsers(([...draft]) => {
-                if (isSelected) draft.splice(userIdx, 1);
-                else draft.push(sbUser);
+              setSelectedUsers(([...draft]) => {
+                if (isSelected) draft.splice(userIdxInSelectedUsers, 1);
+                else draft.push(user);
                 return draft;
               });
             }}
           >
             <UserSelectableBar
-              uri={sbUser.profileUrl}
-              name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
-              selected={isAlreadyJoined || isSelected}
-              disabled={isAlreadyJoined}
+              uri={(user as unknown as SendbirdUser).profileUrl}
+              name={(user as unknown as SendbirdUser).nickname || STRINGS.LABELS.USER_NO_NAME}
+              selected={isMember || isSelected}
+              disabled={isMember}
             />
           </TouchableOpacity>
         );
       },
-      [activeChannel, renderUser, queryCreator],
+      [channel, renderUser, queryCreator],
     );
+
     return (
       <UserListModule.Provider
         headerRight={(selectedUsers) => STRINGS.GROUP_CHANNEL_INVITE.HEADER_RIGHT({ selectedUsers })}
@@ -99,8 +73,8 @@ const createGroupChannelInviteFragment = <UserType,>(
         <UserListModule.Header
           onPressHeaderLeft={onPressHeaderLeft}
           onPressHeaderRight={async (users) => {
-            const userIds = userIdsGenerator(users);
-            const updatedChannel = await activeChannel.inviteWithUserIds(userIds);
+            const userIds = users.map((it) => it.userId);
+            const updatedChannel = await channel.inviteWithUserIds(userIds);
             onInviteMembers(updatedChannel);
           }}
         />
@@ -124,4 +98,8 @@ const createGroupChannelInviteFragment = <UserType,>(
   };
 };
 
+function shouldFilterMember(channel: SendbirdGroupChannel) {
+  return !channel.isSuper && !channel.isBroadcast;
+}
+
 export default createGroupChannelInviteFragment;

package/src/fragments/createGroupChannelListFragment.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { AppState } from 'react-native';
 
 import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, useFreshCallback } from '@sendbird/uikit-utils';
+import { PASS, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import GroupChannelPreviewContainer from '../containers/GroupChannelPreviewContainer';
@@ -17,13 +17,12 @@ import { useSendbirdChat } from '../hooks/useContext';
 const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListModule>): GroupChannelListFragment => {
   const GroupChannelListModule = createGroupChannelListModule(initModule);
   return ({
-    TypeSelectorHeader,
     onPressChannel,
     onPressCreateChannel,
     queryCreator,
     collectionCreator,
     renderGroupChannelPreview,
-    // skipTypeSelection = true,
+    skipTypeSelection = false,
     flatListProps = {},
     menuItemCreator = PASS,
   }) => {
@@ -56,10 +55,7 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
       },
     );
 
-    if (!currentUser) {
-      Logger.warn('Cannot render GroupChannelListFragment, please connect using `useConnection()` hook first');
-      return null;
-    }
+    const isChannelTypeAvailable = features.broadcastChannelEnabled || features.superGroupChannelEnabled;
 
     return (
       <GroupChannelListModule.Provider>
@@ -78,9 +74,7 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
           />
         </StatusComposition>
         <GroupChannelListModule.TypeSelector
-          // NOTE: not included in first iteration
-          skipTypeSelection
-          Header={TypeSelectorHeader}
+          skipTypeSelection={isChannelTypeAvailable ? skipTypeSelection : true}
           onSelectType={onPressCreateChannel}
         />
       </GroupChannelListModule.Provider>