@sendbird/uikit-react-native 2.0.3 → 2.1.0

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 { UserStruct, useUserList } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdGroupChannel, SendbirdUser } 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>

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -1,89 +1,126 @@
-import React, { useCallback } from 'react';
+import React, { useRef } from 'react';
 
-import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
-import { Icon } from '@sendbird/uikit-react-native-foundation';
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
+import { Icon, useActionMenu } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMember } from '@sendbird/uikit-utils';
-import { useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
+import { ifMuted, ifOperator, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
 
+import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
 import type { GroupChannelMembersFragment } from '../domain/groupChannelUserList/types';
 import createUserListModule from '../domain/userList/module/createUserListModule';
 import type { UserListModule } from '../domain/userList/types';
-import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
 
 const noop = () => '';
-const name = 'createGroupChannelMembersFragment';
+const HOOK_NAME = 'createGroupChannelMembersFragment';
 const createGroupChannelMembersFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
 ): GroupChannelMembersFragment<SendbirdMember> => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
   return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
-    const uniqId = useUniqId(name);
-    const forceUpdate = useForceUpdate();
-    const { sdk, currentUser } = useSendbirdChat();
-    const { activeChannel } = useActiveGroupChannel(sdk, channel);
+    const uniqId = useUniqId(HOOK_NAME);
 
+    const refreshSchedule = useRef<NodeJS.Timeout>();
     const { STRINGS } = useLocalization();
+    const { sdk, currentUser } = useSendbirdChat();
+    const { openMenu } = useActionMenu();
+    const { show } = useUserProfile();
 
-    useChannelHandler(sdk, `${name}_${uniqId}`, {
-      // Note: Removed from v4
-      // onUserEntered(channel) {
-      //   if (channel.url === activeChannel.url) forceUpdate();
-      // },
-      onUserLeft(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
-      },
-      onUserJoined(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
-      },
-      onUserUnmuted(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
-      },
-      onUserUnbanned(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
-      },
-      onUserBanned(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
-      },
-      onUserMuted(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
+    const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {
+      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
+    });
+
+    useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+      onUserLeft(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
       },
-      onChannelMemberCountChanged(channels) {
-        if (channels.find((c) => c.url === channel.url)) forceUpdate();
+      onUserBanned(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
       },
-      onChannelChanged(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
+      onOperatorUpdated(eventChannel) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        if (refreshSchedule.current) clearTimeout(refreshSchedule.current);
+        refreshSchedule.current = setTimeout(() => refresh(), 500);
       },
-      onChannelFrozen(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
+      onUserMuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel) || !eventChannel.isGroupChannel()) return;
+
+        const memberFromChannel = eventChannel.members.find((it) => it.userId === user.userId);
+        if (memberFromChannel) return upsertUser(memberFromChannel);
+
+        const memberFromList = users.find((it) => it.userId === user.userId);
+        if (memberFromList) {
+          memberFromList.isMuted = true;
+          upsertUser(memberFromList);
+        }
       },
-      onChannelUnfrozen(channel) {
-        if (channel.url === activeChannel.url) forceUpdate();
+      onUserUnmuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel) || !eventChannel.isGroupChannel()) return;
+
+        const memberFromChannel = eventChannel.members.find((it) => it.userId === user.userId);
+        if (memberFromChannel) return upsertUser(memberFromChannel);
+
+        const memberFromList = users.find((it) => it.userId === user.userId);
+        if (memberFromList) {
+          memberFromList.isMuted = false;
+          upsertUser(memberFromList);
+        }
       },
     });
 
-    const _renderUser: NonNullable<typeof renderUser> = useCallback(
-      (user, selectedUsers, setSelectedUsers) => {
-        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
-
-        return (
-          <UserActionBar
-            muted={user.isMuted}
-            uri={user.profileUrl}
-            label={user.role === 'operator' ? STRINGS.GROUP_CHANNEL_MEMBERS.USER_BAR_OPERATOR : ''}
-            name={
-              (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
-              (user.userId === currentUser?.userId ? STRINGS.GROUP_CHANNEL_MEMBERS.USER_BAR_ME_POSTFIX : '')
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((user, selectedUsers, setSelectedUsers) => {
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+      return (
+        <UserActionBar
+          muted={user.isMuted}
+          uri={user.profileUrl}
+          label={user.role === 'operator' ? STRINGS.LABELS.USER_BAR_OPERATOR : ''}
+          name={
+            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
+          }
+          disabled={user.userId === currentUser?.userId}
+          onPressActionMenu={ifOperator(channel.myRole, () => {
+            const menuItems: ActionMenuItem['menuItems'] = [];
+
+            menuItems.push({
+              title: ifOperator(user.role, STRINGS.LABELS.UNREGISTER_OPERATOR, STRINGS.LABELS.REGISTER_AS_OPERATOR),
+              onPress: ifOperator(
+                user.role,
+                () => channel.removeOperators([user.userId]),
+                () => channel.addOperators([user.userId]),
+              ),
+            });
+
+            if (!channel.isBroadcast) {
+              menuItems.push({
+                title: ifMuted(user.isMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),
+                onPress: ifMuted(
+                  user.isMuted,
+                  () => channel.unmuteUser(user),
+                  () => channel.muteUser(user),
+                ),
+              });
             }
-            disabled={user.userId === currentUser?.userId}
-            // TODO: implement ban/mute actions, use channel.members with handlers instead member query
-            onPressActionMenu={undefined}
-          />
-        );
-      },
-      [renderUser],
-    );
+
+            menuItems.push({
+              title: STRINGS.LABELS.BAN,
+              style: 'destructive',
+              onPress: () => channel.banUser(user),
+            });
+
+            openMenu({ title: user.nickname || STRINGS.LABELS.USER_NO_NAME, menuItems });
+          })}
+          onPressAvatar={() => show(user)}
+        />
+      );
+    });
 
     return (
       <UserListModule.Provider headerRight={noop} headerTitle={STRINGS.GROUP_CHANNEL_MEMBERS.HEADER_TITLE}>
@@ -93,13 +130,19 @@ const createGroupChannelMembersFragment = (
           right={<Icon icon={'plus'} />}
           onPressHeaderRight={async () => onPressHeaderRight()}
         />
-
-        <UserListModule.List
-          users={activeChannel.members}
-          renderUser={_renderUser}
-          onLoadNext={async () => void 0}
-          ListEmptyComponent={<UserListModule.StatusEmpty />}
-        />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<UserListModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<UserListModule.StatusError onPressRetry={refresh} />}
+        >
+          <UserListModule.List
+            users={users}
+            renderUser={_renderUser}
+            onLoadNext={next}
+            ListEmptyComponent={<UserListModule.StatusEmpty />}
+          />
+        </StatusComposition>
       </UserListModule.Provider>
     );
   };

package/src/fragments/createGroupChannelModerationFragment.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { createGroupChannelModerationModule } from '../domain/groupChannelModeration';
+import type {
+  GroupChannelModerationFragment,
+  GroupChannelModerationModule,
+} from '../domain/groupChannelModeration/types';
+
+const createGroupChannelModerationFragment = (
+  initModule?: Partial<GroupChannelModerationModule>,
+): GroupChannelModerationFragment => {
+  const GroupChannelModerationModule = createGroupChannelModerationModule(initModule);
+
+  return ({
+    channel,
+    onPressHeaderLeft = NOOP,
+    onPressMenuBannedUsers,
+    onPressMenuMutedMembers,
+    onPressMenuOperators,
+    menuItemsCreator,
+  }) => {
+    const { left, right } = useSafeAreaInsets();
+    const { colors } = useUIKitTheme();
+    return (
+      <GroupChannelModerationModule.Provider channel={channel}>
+        <GroupChannelModerationModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <ScrollView
+          style={{ backgroundColor: colors.background }}
+          contentContainerStyle={{
+            paddingLeft: left + styles.viewContainer.paddingHorizontal,
+            paddingRight: right + styles.viewContainer.paddingHorizontal,
+          }}
+        >
+          <GroupChannelModerationModule.Menu
+            onPressMenuBannedUsers={onPressMenuBannedUsers}
+            onPressMenuMutedMembers={onPressMenuMutedMembers}
+            onPressMenuOperators={onPressMenuOperators}
+            menuItemsCreator={menuItemsCreator}
+          />
+        </ScrollView>
+      </GroupChannelModerationModule.Provider>
+    );
+  };
+};
+
+const styles = createStyleSheet({
+  viewContainer: {
+    paddingHorizontal: 16,
+  },
+});
+
+export default createGroupChannelModerationFragment;

package/src/fragments/createGroupChannelMutedMembersFragment.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createGroupChannelMutedMembersModule } from '../domain/groupChannelMutedMembers';
+import type {
+  GroupChannelMutedMembersFragment,
+  GroupChannelMutedMembersModule,
+} from '../domain/groupChannelMutedMembers/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const HOOK_NAME = 'createGroupChannelMutedMembersFragment';
+const createGroupChannelMutedMembersFragment = (
+  initModule?: Partial<GroupChannelMutedMembersModule>,
+): GroupChannelMutedMembersFragment => {
+  const GroupChannelMutedMembersModule = createGroupChannelMutedMembersModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+    const uniqId = useUniqId(HOOK_NAME);
+
+    const { STRINGS } = useLocalization();
+    const { sdk, currentUser } = useSendbirdChat();
+    const { openMenu } = useActionMenu();
+
+    const { users, deleteUser, loading, refresh, error, next } = useUserList(sdk, {
+      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
+    });
+
+    useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+      onUserLeft(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+      onUserBanned(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+    });
+
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
+      if (renderUser) return renderUser(props);
+
+      const { user } = props;
+      return (
+        <UserActionBar
+          muted
+          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.UNMUTE,
+                  onPress: () => channel.unmuteUser(user).then(() => deleteUser(user.userId)),
+                },
+              ],
+            });
+          }}
+        />
+      );
+    });
+
+    return (
+      <GroupChannelMutedMembersModule.Provider channel={channel}>
+        <GroupChannelMutedMembersModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<GroupChannelMutedMembersModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<GroupChannelMutedMembersModule.StatusError onPressRetry={refresh} />}
+        >
+          <GroupChannelMutedMembersModule.List
+            mutedMembers={users}
+            onLoadNext={next}
+            renderUser={_renderUser}
+            ListEmptyComponent={<GroupChannelMutedMembersModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </GroupChannelMutedMembersModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelMutedMembersFragment;

package/src/fragments/createGroupChannelOperatorsFragment.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { ifOperator, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createGroupChannelOperatorsModule } from '../domain/groupChannelOperators';
+import type { GroupChannelOperatorsFragment, GroupChannelOperatorsModule } from '../domain/groupChannelOperators/types';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
+
+const name = 'createGroupChannelOperatorsFragment';
+const createGroupChannelOperatorsFragment = (
+  initModule?: Partial<GroupChannelOperatorsModule>,
+): GroupChannelOperatorsFragment => {
+  const GroupChannelOperatorsModule = createGroupChannelOperatorsModule(initModule);
+
+  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+    const uniqId = useUniqId(name);
+
+    const { STRINGS } = useLocalization();
+    const { sdk, currentUser } = useSendbirdChat();
+    const { openMenu } = useActionMenu();
+    const { show } = useUserProfile();
+
+    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, {
+      queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),
+    });
+
+    useChannelHandler(sdk, `${name}_${uniqId}`, {
+      onUserLeft(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+      onUserBanned(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+      onOperatorUpdated(eventChannel, updatedUsers) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        const operatorsAdded = users.length < updatedUsers.length;
+        if (operatorsAdded) updatedUsers.forEach(upsertUser);
+      },
+    });
+
+    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}
+          onPressAvatar={() => show(user)}
+          onPressActionMenu={ifOperator(channel.myRole, () => {
+            openMenu({
+              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+              menuItems: [
+                {
+                  title: STRINGS.LABELS.UNREGISTER_OPERATOR,
+                  onPress: () => channel.removeOperators([user.userId]).then(() => deleteUser(user.userId)),
+                },
+              ],
+            });
+          })}
+        />
+      );
+    });
+
+    return (
+      <GroupChannelOperatorsModule.Provider channel={channel}>
+        <GroupChannelOperatorsModule.Header
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={onPressHeaderRight}
+        />
+
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<GroupChannelOperatorsModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<GroupChannelOperatorsModule.StatusError onPressRetry={refresh} />}
+        >
+          <GroupChannelOperatorsModule.List
+            operators={users}
+            renderUser={_renderUser}
+            onLoadNext={next}
+            ListEmptyComponent={<GroupChannelOperatorsModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </GroupChannelOperatorsModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelOperatorsFragment;