@sendbird/uikit-react-native 2.0.3 → 2.2.0

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/createGroupChannelNotificationsFragment.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { createGroupChannelNotificationsModule } from '../domain/groupChannelNotifications';
+import type {
+  GroupChannelNotificationsFragment,
+  GroupChannelNotificationsModule,
+} from '../domain/groupChannelNotifications/types';
+
+const createGroupChannelNotificationsFragment = (
+  initModule?: Partial<GroupChannelNotificationsModule>,
+): GroupChannelNotificationsFragment => {
+  const GroupChannelNotificationsModule = createGroupChannelNotificationsModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, children, channel }) => {
+    return (
+      <GroupChannelNotificationsModule.Provider channel={channel}>
+        <GroupChannelNotificationsModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <GroupChannelNotificationsModule.View />
+        {children}
+      </GroupChannelNotificationsModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelNotificationsFragment;

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;

package/src/fragments/createGroupChannelRegisterOperatorFragment.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdMember } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserSelectableBar from '../components/UserSelectableBar';
+import type { GroupChannelRegisterOperatorFragment } from '../domain/groupChannelUserList/types';
+import createUserListModule from '../domain/userList/module/createUserListModule';
+import type { UserListModule } from '../domain/userList/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createGroupChannelRegisterOperatorFragment = (
+  initModule?: Partial<UserListModule<SendbirdMember>>,
+): GroupChannelRegisterOperatorFragment<SendbirdMember> => {
+  const UserListModule = createUserListModule<SendbirdMember>(initModule);
+
+  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {
+    const { sdk, currentUser } = useSendbirdChat();
+    const { STRINGS } = useLocalization();
+    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
+      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
+      sortComparator,
+    });
+
+    const _renderUser: NonNullable<typeof renderUser> = useCallback(
+      (user, selectedUsers, setSelectedUsers) => {
+        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+        const userIdx = selectedUsers.findIndex((u) => u.userId === user.userId);
+        const isSelected = userIdx > -1;
+        const isOperator = user.role === 'operator';
+
+        return (
+          <TouchableOpacity
+            activeOpacity={0.7}
+            disabled={isOperator}
+            onPress={() => {
+              setSelectedUsers(([...draft]) => {
+                if (isSelected) draft.splice(userIdx, 1);
+                else draft.push(user);
+                return draft;
+              });
+            }}
+          >
+            <UserSelectableBar
+              uri={user.profileUrl}
+              name={
+                (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+                (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
+              }
+              selected={isOperator || isSelected}
+              disabled={isOperator}
+            />
+          </TouchableOpacity>
+        );
+      },
+      [channel, renderUser],
+    );
+    return (
+      <UserListModule.Provider
+        headerRight={(selectedUsers) => STRINGS.GROUP_CHANNEL_REGISTER_OPERATOR.HEADER_RIGHT({ selectedUsers })}
+        headerTitle={STRINGS.GROUP_CHANNEL_REGISTER_OPERATOR.HEADER_TITLE}
+      >
+        <UserListModule.Header
+          shouldActivateHeaderRight={(selectedUsers) => selectedUsers.length > 0}
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={async (users) => {
+            await channel.addOperators(users.map((it) => it.userId));
+            onPressHeaderRight(channel);
+          }}
+        />
+        <StatusComposition
+          loading={loading}
+          error={Boolean(error)}
+          LoadingComponent={<UserListModule.StatusLoading />}
+          ErrorComponent={<UserListModule.StatusError onPressRetry={() => refresh()} />}
+        >
+          <UserListModule.List
+            onLoadNext={next}
+            users={users}
+            renderUser={_renderUser}
+            onRefresh={refresh}
+            refreshing={refreshing}
+            ListEmptyComponent={<UserListModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </UserListModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelRegisterOperatorFragment;

package/src/fragments/createGroupChannelSettingsFragment.tsx

@@ -13,7 +13,15 @@ const createGroupChannelSettingsFragment = (
 ): GroupChannelSettingsFragment => {
   const GroupChannelSettingsModule = createGroupChannelSettingsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, onPressMenuMembers, onPressMenuLeaveChannel, menuItemsCreator }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    onPressMenuModeration,
+    onPressMenuMembers,
+    onPressMenuLeaveChannel,
+    onPressMenuNotification,
+    menuItemsCreator,
+  }) => {
     const { colors } = useUIKitTheme();
     const { left, right } = useSafeAreaInsets();
 
@@ -30,8 +38,10 @@ const createGroupChannelSettingsFragment = (
           <GroupChannelSettingsModule.Info />
           <GroupChannelSettingsModule.Menu
             menuItemsCreator={menuItemsCreator}
+            onPressMenuModeration={onPressMenuModeration}
             onPressMenuMembers={onPressMenuMembers}
             onPressMenuLeaveChannel={onPressMenuLeaveChannel}
+            onPressMenuNotification={onPressMenuNotification}
           />
         </ScrollView>
       </GroupChannelSettingsModule.Provider>

package/src/hooks/useConnection.ts

@@ -9,7 +9,7 @@ type ConnectOptions = { nickname?: string; accessToken?: string };
 const cacheRestrictCodes = [400300, 400301, 400302, 400310];
 
 const useConnection = () => {
-  const { sdk, setCurrentUser, features } = useSendbirdChat();
+  const { sdk, emojiManager, setCurrentUser, features } = useSendbirdChat();
   const { registerPushTokenForCurrentUser, unregisterPushTokenForCurrentUser } = usePushTokenRegistration();
 
   const connect = useCallback(
@@ -24,6 +24,8 @@ const useConnection = () => {
             .updateCurrentUserInfo({ nickname: opts.nickname })
             .then((updatedUser) => (user = updatedUser))
             .catch((e) => Logger.warn('[useConnection]', 'nickname-sync failure', e));
+        } else if (features.useUserIdForNicknameEnabled) {
+          await sdk.updateCurrentUserInfo({ nickname: userId }).then((updatedUser) => (user = updatedUser));
         }
 
         if (features.autoPushTokenRegistrationEnabled) {
@@ -35,6 +37,7 @@ const useConnection = () => {
 
         Logger.debug('[useConnection]', 'connected! (online)');
         setCurrentUser(user);
+        sdk.getAllEmoji().then(emojiManager.init);
 
         return user;
       } catch (e) {
@@ -48,6 +51,7 @@ const useConnection = () => {
           } else if (sdk.currentUser) {
             Logger.debug('[useConnection]', 'connected! (offline)');
             setCurrentUser(sdk.currentUser);
+            sdk.getAllEmoji().finally(emojiManager.init);
             return sdk.currentUser;
           }
         }