@sendbird/uikit-react-native 2.3.0 → 2.4.1

package/src/domain/openChannelSettings/component/OpenChannelSettingsInfo.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+
+import { Box, Divider, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getOpenChannelTitle } from '@sendbird/uikit-utils';
+
+import ChannelCover from '../../../components/ChannelCover';
+import { useLocalization } from '../../../hooks/useContext';
+import { OpenChannelSettingsContexts } from '../module/moduleContext';
+import type { OpenChannelSettingsProps } from '../types';
+
+const OpenChannelSettingsInfo = (_: OpenChannelSettingsProps['Info']) => {
+  const { channel } = useContext(OpenChannelSettingsContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Box>
+      <Box paddingVertical={24} alignItems={'center'}>
+        <ChannelCover channel={channel} size={80} containerStyle={styles.avatarContainer} />
+        <Text h1 numberOfLines={1}>
+          {getOpenChannelTitle(channel) || ' '}
+        </Text>
+      </Box>
+      <Divider />
+
+      <Box paddingVertical={16}>
+        <Text body2 color={colors.onBackground02} style={styles.infoUrl}>
+          {STRINGS.OPEN_CHANNEL_SETTINGS.INFO_URL}
+        </Text>
+        <Text body3 color={colors.onBackground01}>
+          {channel.url}
+        </Text>
+      </Box>
+      <Divider />
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  avatarContainer: {
+    marginBottom: 12,
+  },
+  infoUrl: {
+    marginBottom: 4,
+  },
+});
+export default OpenChannelSettingsInfo;

package/src/domain/openChannelSettings/component/OpenChannelSettingsMenu.tsx

@@ -0,0 +1,105 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import { Icon, MenuBar, useAlert, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdBaseChannel, isDifferentChannel, useForceUpdate, useUniqHandlerId } from '@sendbird/uikit-utils';
+
+import { UNKNOWN_USER_ID } from '../../../constants';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import { OpenChannelSettingsContexts } from '../module/moduleContext';
+import type { OpenChannelSettingsProps } from '../types';
+
+const OpenChannelSettingsMenu = ({
+  onPressMenuModeration,
+  onPressMenuParticipants,
+  onPressMenuDeleteChannel,
+  menuItemsCreator = (menu) => menu,
+}: OpenChannelSettingsProps['Menu']) => {
+  const { currentUser, sdk } = useSendbirdChat();
+  const { channel } = useContext(OpenChannelSettingsContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { alert } = useAlert();
+
+  const forceUpdate = useForceUpdate();
+  const handlerId = useUniqHandlerId('OpenChannelSettingsMenu');
+
+  const onChannelUpdated = (eventChannel: SendbirdBaseChannel) => {
+    if (isDifferentChannel(channel, eventChannel)) return;
+    forceUpdate();
+  };
+
+  useChannelHandler(
+    sdk,
+    handlerId,
+    {
+      onChannelChanged: onChannelUpdated,
+      onChannelParticipantCountChanged: onChannelUpdated,
+    },
+    'open',
+  );
+
+  const menuItems: MenuBarProps[] = menuItemsCreator([
+    {
+      icon: 'moderation',
+      visible: channel.isOperator(currentUser?.userId ?? UNKNOWN_USER_ID),
+      name: STRINGS.OPEN_CHANNEL_SETTINGS.MENU_MODERATION,
+      onPress: () => onPressMenuModeration(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'members',
+      name: STRINGS.OPEN_CHANNEL_SETTINGS.MENU_PARTICIPANTS,
+      onPress: () => onPressMenuParticipants(),
+      actionLabel: String(channel.participantCount),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'leave',
+      iconColor: colors.error,
+      name: STRINGS.OPEN_CHANNEL_SETTINGS.MENU_DELETE_CHANNEL,
+      onPress: () => {
+        alert({
+          title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANNEL_DELETE_CONFIRM_TITLE,
+          buttons: [
+            {
+              text: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANNEL_DELETE_CONFIRM_CANCEL,
+            },
+            {
+              text: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANNEL_DELETE_CONFIRM_OK,
+              style: 'destructive',
+              onPress: () => {
+                channel.delete().then(() => onPressMenuDeleteChannel());
+              },
+            },
+          ],
+        });
+      },
+    },
+  ]);
+
+  return (
+    <View>
+      {menuItems.map((menu) => {
+        return (
+          <MenuBar
+            key={menu.name}
+            onPress={menu.onPress}
+            name={menu.name}
+            disabled={menu.disabled}
+            visible={menu.visible}
+            icon={menu.icon}
+            iconColor={menu.iconColor}
+            iconBackgroundColor={menu.iconBackgroundColor}
+            actionLabel={menu.actionLabel}
+            actionItem={menu.actionItem}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default OpenChannelSettingsMenu;

package/src/domain/openChannelSettings/index.ts

@@ -0,0 +1,5 @@
+export { default as OpenChannelSettingsHeader } from './component/OpenChannelSettingsHeader';
+export { default as OpenChannelSettingsMenu } from './component/OpenChannelSettingsMenu';
+export { default as OpenChannelSettingsInfo } from './component/OpenChannelSettingsInfo';
+export { default as createOpenChannelSettingsModule } from './module/createOpenChannelSettingsModule';
+export { OpenChannelSettingsContextsProvider, OpenChannelSettingsContexts } from './module/moduleContext';

package/src/domain/openChannelSettings/module/createOpenChannelSettingsModule.tsx

@@ -0,0 +1,17 @@
+import OpenChannelSettingsHeader from '../component/OpenChannelSettingsHeader';
+import OpenChannelSettingsInfo from '../component/OpenChannelSettingsInfo';
+import OpenChannelSettingsMenu from '../component/OpenChannelSettingsMenu';
+import type { OpenChannelSettingsModule } from '../types';
+import { OpenChannelSettingsContextsProvider } from './moduleContext';
+
+const createOpenChannelSettingsModule = ({
+  Header = OpenChannelSettingsHeader,
+  Info = OpenChannelSettingsInfo,
+  Menu = OpenChannelSettingsMenu,
+  Provider = OpenChannelSettingsContextsProvider,
+  ...module
+}: Partial<OpenChannelSettingsModule> = {}): OpenChannelSettingsModule => {
+  return { Header, Info, Menu, Provider, ...module };
+};
+
+export default createOpenChannelSettingsModule;

package/src/domain/openChannelSettings/module/moduleContext.tsx

@@ -0,0 +1,171 @@
+import React, { createContext, useCallback } from 'react';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
+import {
+  NOOP,
+  SendbirdBaseChannel,
+  SendbirdOpenChannel,
+  SendbirdOpenChannelUpdateParams,
+  isDifferentChannel,
+  useForceUpdate,
+  useUniqHandlerId,
+} from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import SBUError from '../../../libs/SBUError';
+import SBUUtils from '../../../libs/SBUUtils';
+import type { OpenChannelSettingsContextsType, OpenChannelSettingsModule } from '../types';
+
+export const OpenChannelSettingsContexts: OpenChannelSettingsContextsType = {
+  Fragment: createContext({
+    channel: {} as SendbirdOpenChannel,
+    headerTitle: '',
+    headerRight: '',
+    onPressHeaderRight: NOOP,
+  }),
+};
+
+export const OpenChannelSettingsContextsProvider: OpenChannelSettingsModule['Provider'] = ({
+  channel,
+  onNavigateToOpenChannel,
+  children,
+}) => {
+  const handlerId = useUniqHandlerId('OpenChannelSettingsContextsProvider');
+  const forceUpdate = useForceUpdate();
+  const { STRINGS } = useLocalization();
+  const { sdk, currentUser } = useSendbirdChat();
+  const { fileService } = usePlatformService();
+  const { alert } = useAlert();
+
+  const onChannelChanged = (eventChannel: SendbirdBaseChannel) => {
+    if (isDifferentChannel(eventChannel, channel)) return;
+    forceUpdate();
+  };
+  const onOperatorUpdated = (eventChannel: SendbirdBaseChannel) => {
+    if (isDifferentChannel(eventChannel, channel) || !eventChannel.isOpenChannel()) return;
+    if (currentUser && !eventChannel.isOperator(currentUser.userId)) {
+      onNavigateToOpenChannel();
+    }
+  };
+
+  useChannelHandler(
+    sdk,
+    handlerId,
+    {
+      onOperatorUpdated: onOperatorUpdated,
+      onChannelUnfrozen: onChannelChanged,
+      onChannelChanged: onChannelChanged,
+      onChannelFrozen: onChannelChanged,
+      onUserBanned: onChannelChanged,
+    },
+    'open',
+  );
+
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { openPrompt } = usePrompt();
+  const { openMenu } = useActionMenu();
+
+  const updateChannel = useCallback(
+    async (params: SendbirdOpenChannelUpdateParams) => {
+      await channel.updateChannel(params);
+      forceUpdate();
+    },
+    [channel],
+  );
+
+  const changeChannelName = useCallback(() => {
+    openPrompt({
+      title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_TITLE,
+      submitLabel: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_OK,
+      placeholder: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER,
+      defaultValue: channel.name,
+      onSubmit: (channelName) => updateChannel({ name: channelName }),
+    });
+  }, [STRINGS, updateChannel, channel.name]);
+
+  const changeChannelImage = useCallback(() => {
+    openMenu({
+      title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE_MENU_TITLE,
+      menuItems: [
+        {
+          title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE_MENU_CAMERA,
+          onPress: async () => {
+            const file = await fileService.openCamera({
+              mediaType: 'photo',
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_CAMERA,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
+            });
+            if (!file) return;
+
+            await updateChannel({ coverUrlOrImage: file });
+          },
+        },
+        {
+          title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY,
+          onPress: async () => {
+            const files = await fileService.openMediaLibrary({
+              selectionLimit: 1,
+              mediaType: 'photo',
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
+            });
+            if (!files || !files[0]) return;
+
+            await updateChannel({ coverUrlOrImage: files[0] });
+          },
+        },
+      ],
+    });
+  }, [STRINGS, updateChannel]);
+
+  const onPressHeaderRight = useCallback(() => {
+    openSheet({
+      sheetItems: [
+        { title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME, onPress: changeChannelName },
+        { title: STRINGS.OPEN_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE, onPress: changeChannelImage },
+      ],
+    });
+  }, [STRINGS, changeChannelImage, changeChannelName]);
+
+  return (
+    <ProviderLayout>
+      <OpenChannelSettingsContexts.Fragment.Provider
+        value={{
+          channel,
+          headerTitle: STRINGS.OPEN_CHANNEL_SETTINGS.HEADER_TITLE,
+          headerRight: STRINGS.OPEN_CHANNEL_SETTINGS.HEADER_RIGHT,
+          onPressHeaderRight,
+        }}
+      >
+        {children}
+      </OpenChannelSettingsContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/openChannelSettings/types.ts

@@ -0,0 +1,54 @@
+import type React from 'react';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelSettingsProps = {
+  Fragment: {
+    channel: OpenChannelSettingsProps['Provider']['channel'];
+    onPressHeaderLeft: OpenChannelSettingsProps['Header']['onPressHeaderLeft'];
+    onPressMenuModeration: OpenChannelSettingsProps['Menu']['onPressMenuModeration'];
+    onPressMenuParticipants: OpenChannelSettingsProps['Menu']['onPressMenuParticipants'];
+    onPressMenuDeleteChannel: OpenChannelSettingsProps['Menu']['onPressMenuDeleteChannel'];
+    onNavigateToOpenChannel: OpenChannelSettingsProps['Provider']['onNavigateToOpenChannel'];
+    menuItemsCreator?: OpenChannelSettingsProps['Menu']['menuItemsCreator'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  Info: {};
+  Menu: {
+    onPressMenuModeration: () => void;
+    onPressMenuParticipants: () => void;
+    onPressMenuDeleteChannel: () => void;
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Provider: {
+    channel: SendbirdOpenChannel;
+    onNavigateToOpenChannel: () => void;
+  };
+};
+
+/**
+ * Internal context for OpenChannelSettings
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelSettingsContextsType = {
+  Fragment: React.Context<{
+    channel: SendbirdOpenChannel;
+    headerTitle: string;
+    headerRight: string;
+    onPressHeaderRight: () => void;
+  }>;
+};
+export interface OpenChannelSettingsModule {
+  Provider: CommonComponent<OpenChannelSettingsProps['Provider']>;
+  Header: CommonComponent<OpenChannelSettingsProps['Header']>;
+  Info: CommonComponent<OpenChannelSettingsProps['Info']>;
+  Menu: CommonComponent<OpenChannelSettingsProps['Menu']>;
+}
+
+export type OpenChannelSettingsFragment = CommonComponent<OpenChannelSettingsProps['Fragment']>;

package/src/domain/openChannelUserList/types.ts

@@ -0,0 +1,30 @@
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdOpenChannel, SendbirdParticipant, UserStruct } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+import type { UserListProps } from '../userList/types';
+
+export interface OpenChannelParticipantsProps<User extends UserStruct> {
+  Fragment: {
+    channel: SendbirdOpenChannel;
+    onPressHeaderLeft: () => void;
+    sortComparator?: UseUserListOptions<User>['sortComparator'];
+    renderUser?: UserListProps<User>['List']['renderUser'];
+  };
+}
+export type OpenChannelParticipantsFragment<User extends UserStruct> = CommonComponent<
+  OpenChannelParticipantsProps<User>['Fragment']
+>;
+
+export interface OpenChannelRegisterOperatorProps<User extends UserStruct = SendbirdParticipant> {
+  Fragment: {
+    channel: SendbirdOpenChannel;
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: (channel: SendbirdOpenChannel) => void;
+    sortComparator?: UseUserListOptions<User>['sortComparator'];
+    renderUser?: UserListProps<User>['List']['renderUser'];
+  };
+}
+export type OpenChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
+  OpenChannelRegisterOperatorProps<User>['Fragment']
+>;

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -4,9 +4,9 @@ import { TouchableOpacity } from 'react-native';
 import { useUserList } from '@sendbird/uikit-chat-hooks';
 import {
   PASS,
-  SendbirdGroupChannelCreateParams,
   SendbirdUser,
   UserStruct,
+  getDefaultGroupChannelCreateParams,
   useFreshCallback,
 } from '@sendbird/uikit-utils';
 
@@ -81,16 +81,13 @@ const createGroupChannelCreateFragment = <UserType extends UserStruct>(
         <UserListModule.Header
           onPressHeaderLeft={onPressHeaderLeft}
           onPressHeaderRight={async (users) => {
-            const params: SendbirdGroupChannelCreateParams = {
+            const params = getDefaultGroupChannelCreateParams({
               invitedUserIds: users.map((it) => it.userId),
-              name: '',
-              coverUrl: '',
-              isDistinct: false,
-            };
+              currentUserId: currentUser?.userId,
+            });
 
             if (channelType === 'BROADCAST') params.isBroadcast = true;
             if (channelType === 'SUPER_GROUP') params.isSuper = true;
-            if (currentUser) params.operatorUserIds = [currentUser.userId];
 
             const processedParams = await onBeforeCreateChannel(params, users);
             const channel = await sdk.groupChannel.createChannel(processedParams);

package/src/fragments/createGroupChannelFragment.tsx

@@ -22,17 +22,19 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     enableTypingIndicator = true,
     onPressHeaderLeft = NOOP,
     onPressHeaderRight = NOOP,
-    onPressImageMessage,
     onPressMediaMessage = NOOP,
     onChannelDeleted = NOOP,
-    onBeforeSendFileMessage = PASS,
     onBeforeSendUserMessage = PASS,
+    onBeforeSendFileMessage = PASS,
+    onBeforeUpdateUserMessage = PASS,
+    onBeforeUpdateFileMessage = PASS,
     channel,
     keyboardAvoidOffset,
     queryCreator,
     collectionCreator,
     sortComparator = messageComparator,
     flatListProps,
+    onPressImageMessage,
   }) => {
     const { sdk, currentUser } = useSendbirdChat();
 
@@ -71,10 +73,37 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       [loading, flatListProps],
     );
 
+    const onPressSendUserMessage: GroupChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(
+      async (params) => {
+        const processedParams = await onBeforeSendUserMessage(params);
+        await sendUserMessage(processedParams);
+      },
+    );
+    const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
+      async (params) => {
+        const processedParams = await onBeforeSendFileMessage(params);
+        await sendFileMessage(processedParams);
+      },
+    );
+    const onPressUpdateUserMessage: GroupChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(
+      async (message, params) => {
+        const processedParams = await onBeforeUpdateUserMessage(params);
+        await updateUserMessage(message.messageId, processedParams);
+      },
+    );
+    const onPressUpdateFileMessage: GroupChannelProps['Input']['onPressUpdateFileMessage'] = useFreshCallback(
+      async (message, params) => {
+        const processedParams = await onBeforeUpdateFileMessage(params);
+        await updateFileMessage(message.messageId, processedParams);
+      },
+    );
+
+    /** @deprecated **/
     const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useFreshCallback(async (file) => {
       const processedParams = await onBeforeSendFileMessage({ file });
       await sendFileMessage(processedParams);
     });
+    /** @deprecated **/
     const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(
       async (text, mention) => {
         const processedParams = await onBeforeSendUserMessage({
@@ -86,12 +115,14 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         await sendUserMessage(processedParams);
       },
     );
+    /** @deprecated **/
     const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useFreshCallback(
       async (editedFile, message) => {
         const processedParams = await onBeforeSendFileMessage({ file: editedFile });
         await updateFileMessage(message.messageId, processedParams);
       },
     );
+    /** @deprecated **/
     const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useFreshCallback(
       async (editedText, message, mention) => {
         const processedParams = await onBeforeSendUserMessage({
@@ -133,6 +164,10 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
           <GroupChannelModule.Input
             SuggestedMentionList={GroupChannelModule.SuggestedMentionList}
             shouldRenderInput={shouldRenderInput(channel)}
+            onPressSendUserMessage={onPressSendUserMessage}
+            onPressSendFileMessage={onPressSendFileMessage}
+            onPressUpdateUserMessage={onPressUpdateUserMessage}
+            onPressUpdateFileMessage={onPressUpdateFileMessage}
             onSendFileMessage={onSendFileMessage}
             onSendUserMessage={onSendUserMessage}
             onUpdateFileMessage={onUpdateFileMessage}

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -4,7 +4,7 @@ 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 { ifMuted, ifOperator, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+import { ifOperator, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -13,15 +13,15 @@ import createUserListModule from '../domain/userList/module/createUserListModule
 import type { UserListModule } from '../domain/userList/types';
 import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
 
-const noop = () => '';
-const HOOK_NAME = 'createGroupChannelMembersFragment';
+const RETURN_EMPTY_STRING = () => '';
+
 const createGroupChannelMembersFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
 ): GroupChannelMembersFragment<SendbirdMember> => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
   return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
-    const uniqId = useUniqId(HOOK_NAME);
+    const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
     const { STRINGS } = useLocalization();
@@ -33,7 +33,7 @@ const createGroupChannelMembersFragment = (
       queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
     });
 
-    useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    useChannelHandler(sdk, handlerId, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);
@@ -100,8 +100,8 @@ const createGroupChannelMembersFragment = (
 
             if (!channel.isBroadcast) {
               menuItems.push({
-                title: ifMuted(user.isMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),
-                onPress: ifMuted(
+                title: ifThenOr(user.isMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),
+                onPress: ifThenOr(
                   user.isMuted,
                   () => channel.unmuteUser(user),
                   () => channel.muteUser(user),
@@ -123,7 +123,10 @@ const createGroupChannelMembersFragment = (
     });
 
     return (
-      <UserListModule.Provider headerRight={noop} headerTitle={STRINGS.GROUP_CHANNEL_MEMBERS.HEADER_TITLE}>
+      <UserListModule.Provider
+        headerRight={RETURN_EMPTY_STRING}
+        headerTitle={STRINGS.GROUP_CHANNEL_MEMBERS.HEADER_TITLE}
+      >
         <UserListModule.Header
           shouldActivateHeaderRight={() => true}
           onPressHeaderLeft={onPressHeaderLeft}

package/src/fragments/createGroupChannelMutedMembersFragment.tsx

@@ -2,7 +2,7 @@ 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 { NOOP, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -13,24 +13,31 @@ import type {
 } 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 handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, refresh, error, next } = useUserList(sdk, {
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
       queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
     });
 
-    useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    useChannelHandler(sdk, handlerId, {
+      onUserMuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        upsertUser(user);
+      },
+      onUserUnmuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);