Skip to content

Commit 44cabe5

Browse files
OnestarLeeOnestarLee
authored
Merge pull request #217 from sendbird/feat/reaction-v2
[CLNP-5587] feat: support the reacted user list in supergroup
2 parents b50d6ba + 936676a commit 44cabe5

File tree

22 files changed

+2883
-4543
lines changed

22 files changed

+2883
-4543
lines changed

‎docs-validation/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@react-native-firebase/messaging": "^14.7.0",
1515
"@react-navigation/native": "^6.1.17",
1616
"@react-navigation/native-stack": "^6.10.0",
17-
"@sendbird/chat": "^4.13.3",
17+
"@sendbird/chat": "^4.16.0",
1818
"date-fns": "^4.1.0",
1919
"react": "18.2.0",
2020
"react-native": "0.74.3",

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
]
9999
},
100100
"resolutions": {
101-
"@sendbird/chat": "4.13.3",
101+
"@sendbird/chat": "4.16.0",
102102
"@types/react": "^18"
103103
}
104104
}

‎packages/uikit-chat-hooks/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"typescript": "5.2.2"
5656
},
5757
"peerDependencies": {
58-
"@sendbird/chat": "^4.13.3",
58+
"@sendbird/chat": "^4.16.0",
5959
"react": ">=16.13.1"
6060
},
6161
"react-native-builder-bob": {

‎packages/uikit-react-native/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
"@react-native-clipboard/clipboard": ">=1.8.5",
110110
"@react-native-community/netinfo": ">=9.3.0",
111111
"@react-native-firebase/messaging": ">=14.4.0",
112-
"@sendbird/chat": "^4.13.3",
112+
"@sendbird/chat": "^4.16.0",
113113
"@sendbird/react-native-scrollview-enhancer": "*",
114114
"date-fns": ">=2.28.0",
115115
"expo-av": ">=12.0.4",

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
189189
if (
190190
mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
191191
) {
192-
return message.mentionedMessageTemplate;
192+
return message.mentionedMessageTemplate ?? '';
193193
} else {
194194
return message.message;
195195
}

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

+4-10
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,14 @@ import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
77
import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
88
import { getReactionCount } from '@sendbird/uikit-utils';
99

10-
import { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';
10+
import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
1111
import { useReaction, useSendbirdChat } from '../../hooks/useContext';
1212
import ReactionRoundedButton from './ReactionRoundedButton';
1313

1414
const NUM_COL = 4;
1515
const REACTION_MORE_KEY = 'reaction-more-button';
1616
export type ReactionAddonType = 'default' | 'thread_parent_message';
1717

18-
const getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {
19-
return reaction.userIds.indexOf(userId) > -1;
20-
};
21-
2218
const createOnPressReaction = (
2319
reaction: SendbirdReaction,
2420
channel: SendbirdBaseChannel,
@@ -41,7 +37,6 @@ const createReactionButtons = (
4137
emojiLimit: number,
4238
onOpenReactionList: () => void,
4339
onOpenReactionUserList: (focusIndex: number) => void,
44-
currentUserId?: string,
4540
reactionAddonType?: ReactionAddonType,
4641
) => {
4742
const reactions = message.reactions ?? [];
@@ -51,15 +46,15 @@ const createReactionButtons = (
5146
return (
5247
<Pressable
5348
key={reaction.key}
54-
onPress={createOnPressReaction(reaction, channel, message, getUserReacted(reaction, currentUserId))}
49+
onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}
5550
onLongPress={() => onOpenReactionUserList(index)}
5651
delayLongPress={DEFAULT_LONG_PRESS_DELAY}
5752
>
5853
{({ pressed }) => (
5954
<ReactionRoundedButton
6055
url={getEmoji(reaction.key).url}
6156
count={getReactionCount(reaction)}
62-
reacted={pressed || getUserReacted(reaction, currentUserId)}
57+
reacted={pressed || reaction.hasCurrentUserReacted}
6358
style={
6459
reactionAddonType === 'default'
6560
? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]
@@ -91,7 +86,7 @@ const MessageReactionAddon = ({
9186
reactionAddonType?: ReactionAddonType;
9287
}) => {
9388
const { colors } = useUIKitTheme();
94-
const { sdk, emojiManager, currentUser } = useSendbirdChat();
89+
const { sdk, emojiManager } = useSendbirdChat();
9590
const { openReactionList, openReactionUserList } = useReaction();
9691
const forceUpdate = useForceUpdate();
9792

@@ -113,7 +108,6 @@ const MessageReactionAddon = ({
113108
emojiManager.allEmoji.length,
114109
() => openReactionList({ channel, message }),
115110
(focusIndex) => openReactionUserList({ channel, message, focusIndex }),
116-
currentUser?.userId,
117111
reactionAddonType,
118112
);
119113

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

+15-9
Original file line numberDiff line numberDiff line change
@@ -123,31 +123,37 @@ const ReactionUserListBottomSheet = ({
123123
};
124124

125125
const renderPage = () => {
126+
const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);
127+
126128
return (
127129
<>
128-
{focusedReaction?.userIds.map((userId) => {
130+
{focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {
129131
if (channel?.isGroupChannel()) {
130-
const user = channel.members.find((x) => x.userId === userId);
131132
return (
132133
<Pressable
133-
key={userId}
134+
key={reactedUserInfo.userId}
134135
onPress={async () => {
135-
if (user) {
136-
await onClose();
137-
onPressUserProfile(user);
138-
}
136+
await onClose();
137+
onPressUserProfile(reactedUserInfo);
139138
}}
140139
style={styles.pageItem}
141140
>
142-
<Avatar size={36} uri={user?.profileUrl} containerStyle={styles.avatar} />
141+
<Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />
143142
<Text subtitle2 style={{ flex: 1 }}>
144-
{user?.nickname || STRINGS.LABELS.USER_NO_NAME}
143+
{reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}
145144
</Text>
146145
</Pressable>
147146
);
148147
}
149148
return null;
150149
})}
150+
{userCountDifference > 0 && (
151+
<View style={styles.pageItem}>
152+
<Text body3 color={colors.onBackground02}>
153+
{STRINGS.REACTION.MORE_USERS(userCountDifference)}
154+
</Text>
155+
</View>
156+
)}
151157
</>
152158
);
153159
};

‎packages/uikit-react-native/src/components/ReactionBottomSheets/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type React from 'react';
22

3-
import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
3+
import { SendbirdReactedUserInfo } from '@sendbird/uikit-utils';
44

55
import type { LocalizationContext } from '../../contexts/LocalizationCtx';
66
import type { ReactionContext } from '../../contexts/ReactionCtx';
@@ -13,7 +13,7 @@ export type ReactionBottomSheetProps = {
1313
visible: boolean;
1414
onDismiss: () => void;
1515
onClose: () => Promise<void>;
16-
onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
16+
onPressUserProfile: (user: SendbirdReactedUserInfo) => void;
1717
chatCtx: GetFromContext<typeof SendbirdChatContext>;
1818
reactionCtx: GetFromContext<typeof ReactionContext>;
1919
localizationCtx: GetFromContext<typeof LocalizationContext>;

‎packages/uikit-react-native/src/components/ThreadParentMessageRenderer/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) =>
111111
if (
112112
mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
113113
) {
114-
return message.mentionedMessageTemplate;
114+
return message.mentionedMessageTemplate ?? '';
115115
} else {
116116
return message.message;
117117
}

‎packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
SendbirdGroupChannel,
2626
SendbirdGroupChannelCreateParams,
2727
SendbirdMember,
28+
SendbirdReactedUserInfo,
2829
SendbirdUser,
2930
useIsFirstMount,
3031
} from '@sendbird/uikit-utils';
@@ -141,11 +142,11 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
141142
onCreateChannel: (channel: SendbirdGroupChannel) => void;
142143
onBeforeCreateChannel?: (
143144
channelParams: SendbirdGroupChannelCreateParams,
144-
users: SendbirdUser[] | SendbirdMember[],
145+
users: SendbirdUser[] | SendbirdMember[] | SendbirdReactedUserInfo[],
145146
) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
146147
};
147148
reaction?: {
148-
onPressUserProfile?: (user: SendbirdUser | SendbirdMember) => void;
149+
onPressUserProfile?: (user: SendbirdReactedUserInfo) => void;
149150
};
150151
userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
151152
imageCompression?: Partial<ImageCompressionConfigInterface>;

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

-3
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,6 @@ export const ReactionProvider = ({ children, onPressUserProfile }: Props) => {
4646

4747
const openReactionUserList: ReactionContextType['openReactionUserList'] = useCallback(
4848
({ channel, message, focusIndex = 0 }) => {
49-
// NOTE: We don't support reaction user list for supergroup channel
50-
if (channel.isGroupChannel() && channel.isSuper) return;
51-
5249
setState({ channel, message });
5350
setReactionUserListFocusIndex(focusIndex);
5451
setReactionUserListVisible(true);

‎packages/uikit-react-native/src/contexts/UserProfileCtx.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type {
66
SendbirdGroupChannel,
77
SendbirdGroupChannelCreateParams,
88
SendbirdMember,
9+
SendbirdReactedUserInfo,
910
SendbirdUser,
1011
} from '@sendbird/uikit-utils';
1112
import { Logger, PASS, getDefaultGroupChannelCreateParams, useIIFE } from '@sendbird/uikit-utils';
@@ -16,15 +17,15 @@ import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
1617
type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
1718
type OnBeforeCreateChannel = (
1819
channelParams: SendbirdGroupChannelCreateParams,
19-
users: SendbirdUser[] | SendbirdMember[],
20+
users: SendbirdUser[] | SendbirdMember[] | SendbirdReactedUserInfo[],
2021
) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
2122

2223
type ShowOptions = {
2324
hideMessageButton?: boolean;
2425
};
2526

2627
export type UserProfileContextType = {
27-
show(user: SendbirdUser | SendbirdMember, options?: ShowOptions): void;
28+
show(user: SendbirdUser | SendbirdMember | SendbirdReactedUserInfo, options?: ShowOptions): void;
2829
hide(): void;
2930
};
3031

@@ -58,7 +59,7 @@ export const UserProfileProvider = ({
5859

5960
const { bottom, left, right } = useSafeAreaInsets();
6061

61-
const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
62+
const [user, setUser] = useState<SendbirdUser | SendbirdMember | SendbirdReactedUserInfo>();
6263
const [visible, setVisible] = useState(false);
6364
const [hideMessageButton, setHideMessageButton] = useState(false);
6465

‎packages/uikit-react-native/src/localization/StringSet.type.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {
88
SendbirdMessage,
99
SendbirdOpenChannel,
1010
SendbirdParticipant,
11+
SendbirdReactedUserInfo,
1112
SendbirdUser,
1213
SendbirdUserMessage,
1314
} from '@sendbird/uikit-utils';
@@ -323,6 +324,9 @@ export interface StringSet {
323324
VOICE_MESSAGE: string;
324325
VOICE_MESSAGE_INPUT_CANCEL: string;
325326
};
327+
REACTION: {
328+
MORE_USERS: (userCountDifference: number) => string;
329+
};
326330
FILE_VIEWER: {
327331
TITLE: (message: SendbirdFileMessage) => string;
328332
SUBTITLE: (message: SendbirdFileMessage) => string;
@@ -377,6 +381,6 @@ export interface StringSet {
377381
PROFILE_CARD: {
378382
BUTTON_MESSAGE: string;
379383
BODY_LABEL: string;
380-
BODY: (user: SendbirdUser | SendbirdMember) => string;
384+
BODY: (user: SendbirdUser | SendbirdMember | SendbirdReactedUserInfo) => string;
381385
};
382386
}

‎packages/uikit-react-native/src/localization/createBaseStringSet.ts

+3
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,9 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
345345
VOICE_MESSAGE_INPUT_CANCEL: 'Cancel',
346346
...overrides?.LABELS,
347347
},
348+
REACTION: {
349+
MORE_USERS: (userCountDifference) => `And ${userCountDifference} others`,
350+
},
348351
FILE_VIEWER: {
349352
TITLE: (message) => message.sender?.nickname || USER_NO_NAME,
350353
SUBTITLE: (message) => getMessageTimeFormat(new Date(message.createdAt), dateLocale),

‎packages/uikit-testing-tools/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"access": "public"
4040
},
4141
"devDependencies": {
42-
"@sendbird/chat": "^4.13.3",
42+
"@sendbird/chat": "^4.16.0",
4343
"@sendbird/uikit-utils": "3.7.6",
4444
"@types/jest": "^29.4.0",
4545
"@types/react": "*",

‎packages/uikit-utils/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"typescript": "5.2.2"
5757
},
5858
"peerDependencies": {
59-
"@sendbird/chat": "^4.13.3",
59+
"@sendbird/chat": "^4.16.0",
6060
"date-fns": ">=2.28.0",
6161
"react": ">=17.0.2",
6262
"react-native": ">=0.65.0"

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export function shouldRenderReaction(channel: SendbirdBaseChannel, reactionEnabl
159159
}
160160

161161
export function getReactionCount(reaction: SendbirdReaction) {
162-
return reaction.userIds.length;
162+
return reaction.count;
163163
}
164164

165165
export type MessageType =

‎packages/uikit-utils/src/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import type {
3939
MessageSearchQuery,
4040
MultipleFilesMessage,
4141
PreviousMessageListQuery,
42+
ReactedUserInfo,
4243
Reaction,
4344
UserMessage,
4445
UserMessageCreateParams,
@@ -112,6 +113,7 @@ export type SendbirdOpenChannel = OpenChannel;
112113
export type SendbirdFeedChannel = FeedChannel;
113114

114115
export type SendbirdReaction = Reaction;
116+
export type SendbirdReactedUserInfo = ReactedUserInfo;
115117
export type SendbirdEmoji = Emoji;
116118
export type SendbirdEmojiCategory = EmojiCategory;
117119
export type SendbirdEmojiContainer = EmojiContainer;

0 commit comments

Comments
 (0)