feat: added visibility of users who reacted in SuperGroupChannel

Author: OnestarLee

packages/uikit-react-native/src/components/ChannelMessageList/index.tsx

@@ -390,10 +390,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
     const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
     const bottomSheetItem: BottomSheetItem = {
       sheetItems,
-      HeaderComponent: shouldRenderReaction(
-        channel,
-        channel.isGroupChannel() && (channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions),
-      )
+      HeaderComponent: shouldRenderReaction(channel, channel.isGroupChannel() && configs.enableReactions)
         ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
         : undefined,
     };

packages/uikit-react-native/src/components/ChannelThreadMessageList/index.tsx

@@ -342,10 +342,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
     const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
     const bottomSheetItem: BottomSheetItem = {
       sheetItems,
-      HeaderComponent: shouldRenderReaction(
-        channel,
-        channel.isGroupChannel() && (channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions),
-      )
+      HeaderComponent: shouldRenderReaction(channel, channel.isGroupChannel() && configs.enableReactions)
         ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
         : undefined,
     };

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx

@@ -67,11 +67,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
 
   const reactionChildren = useIIFE(() => {
     const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
-    if (
-      shouldRenderReaction(channel, channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions) &&
-      message.reactions &&
-      message.reactions.length > 0
-    ) {
+    if (shouldRenderReaction(channel, configs.enableReactions) && message.reactions && message.reactions.length > 0) {
       return <ReactionAddons.Message channel={channel} message={message} />;
     }
     return null;

packages/uikit-react-native/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -7,18 +7,14 @@ import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
 import { getReactionCount } from '@sendbird/uikit-utils';
 
-import { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';
+import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
 import ReactionRoundedButton from './ReactionRoundedButton';
 
 const NUM_COL = 4;
 const REACTION_MORE_KEY = 'reaction-more-button';
 export type ReactionAddonType = 'default' | 'thread_parent_message';
 
-const getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {
-  return reaction.userIds.indexOf(userId) > -1;
-};
-
 const createOnPressReaction = (
   reaction: SendbirdReaction,
   channel: SendbirdBaseChannel,
@@ -41,7 +37,6 @@ const createReactionButtons = (
   emojiLimit: number,
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
-  currentUserId?: string,
   reactionAddonType?: ReactionAddonType,
 ) => {
   const reactions = message.reactions ?? [];
@@ -51,15 +46,15 @@ const createReactionButtons = (
     return (
       <Pressable
         key={reaction.key}
-        onPress={createOnPressReaction(reaction, channel, message, getUserReacted(reaction, currentUserId))}
+        onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}
         onLongPress={() => onOpenReactionUserList(index)}
         delayLongPress={DEFAULT_LONG_PRESS_DELAY}
       >
         {({ pressed }) => (
           <ReactionRoundedButton
             url={getEmoji(reaction.key).url}
             count={getReactionCount(reaction)}
-            reacted={pressed || getUserReacted(reaction, currentUserId)}
+            reacted={pressed || reaction.hasCurrentUserReacted}
             style={
               reactionAddonType === 'default'
                 ? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]
@@ -91,7 +86,7 @@ const MessageReactionAddon = ({
   reactionAddonType?: ReactionAddonType;
 }) => {
   const { colors } = useUIKitTheme();
-  const { sdk, emojiManager, currentUser } = useSendbirdChat();
+  const { sdk, emojiManager } = useSendbirdChat();
   const { openReactionList, openReactionUserList } = useReaction();
   const forceUpdate = useForceUpdate();
 
@@ -113,7 +108,6 @@ const MessageReactionAddon = ({
     emojiManager.allEmoji.length,
     () => openReactionList({ channel, message }),
     (focusIndex) => openReactionUserList({ channel, message, focusIndex }),
-    currentUser?.userId,
     reactionAddonType,
   );
 

packages/uikit-react-native/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -26,7 +26,7 @@ const ReactionUserListBottomSheet = ({
 }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
   const { bottom, left, right } = useSafeAreaInsets();
-  const { colors } = useUIKitTheme();
+  const { colors, select, palette } = useUIKitTheme();
 
   const [tabIndex, setTabIndex] = useState(0);
   const scrollRef = useRef<ScrollView>();
@@ -123,9 +123,11 @@ const ReactionUserListBottomSheet = ({
   };
 
   const renderPage = () => {
+    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserIds.length || 0);
+
     return (
       <>
-        {focusedReaction?.userIds.map((userId) => {
+        {focusedReaction?.sampledUserIds.map((userId) => {
           if (channel?.isGroupChannel()) {
             const user = channel.members.find((x) => x.userId === userId);
             return (
@@ -148,6 +150,13 @@ const ReactionUserListBottomSheet = ({
           }
           return null;
         })}
+        {userCountDifference > 0 && (
+          <View style={styles.pageItem}>
+            <Text body3 color={select({ dark: palette.onBackgroundDark02, light: palette.onBackgroundLight02 })}>
+              And {userCountDifference} others
+            </Text>
+          </View>
+        )}
       </>
     );
   };

packages/uikit-react-native/src/contexts/ReactionCtx.tsx

@@ -46,8 +46,6 @@ export const ReactionProvider = ({ children, onPressUserProfile }: Props) => {
 
   const openReactionUserList: ReactionContextType['openReactionUserList'] = useCallback(
     ({ channel, message, focusIndex = 0 }) => {
-      // NOTE: We don't support reaction user list for supergroup channel
-      if (channel.isGroupChannel() && channel.isSuper) return;
 
       setState({ channel, message });
       setReactionUserListFocusIndex(focusIndex);

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx

@@ -94,7 +94,7 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
 
   const renderReactionAddons = () => {
     const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
-    if (shouldRenderReaction(channel, channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions)) {
+    if (shouldRenderReaction(channel, configs.enableReactions)) {
       return (
         <View style={styles.reactionButtonContainer}>
           <ReactionAddons.Message
@@ -302,10 +302,7 @@ const useCreateMessagePressActions = ({
     const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
     const bottomSheetItem: BottomSheetItem = {
       sheetItems,
-      HeaderComponent: shouldRenderReaction(
-        channel,
-        channel.isGroupChannel() && (channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions),
-      )
+      HeaderComponent: shouldRenderReaction(channel, channel.isGroupChannel() && configs.enableReactions)
         ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
         : undefined,
     };

packages/uikit-utils/src/sendbird/message.ts

@@ -159,7 +159,7 @@ export function shouldRenderReaction(channel: SendbirdBaseChannel, reactionEnabl
 }
 
 export function getReactionCount(reaction: SendbirdReaction) {
-  return reaction.userIds.length;
+  return reaction.count;
 }
 
 export type MessageType =