Skip to content

Commit 301801c

Browse files
bang9bang9
authored
Merge pull request #38 from sendbird/fix/export-collectionCreator-in-channel-list
[UIKIT-2201] Fix/export collection creator in channel list
2 parents ebe03e0 + da1191c commit 301801c

File tree

18 files changed

+174
-179
lines changed

18 files changed

+174
-179
lines changed

‎packages/uikit-chat-hooks/src/channel/useGroupChannelListWithCollection.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,20 @@ const createGroupChannelListCollection = (
2222
const passedCollection = collectionCreator?.();
2323
if (passedCollection) return passedCollection;
2424

25-
const defaultCollection = sdk.GroupChannel.createGroupChannelCollection();
26-
const filter = new sdk.GroupChannelFilter();
27-
return defaultCollection.setLimit(20).setFilter(filter).build();
25+
const defaultOptions = {
26+
includeEmpty: false,
27+
limit: 20,
28+
order: sdk.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE,
29+
};
30+
const collectionBuilder = sdk.GroupChannel.createGroupChannelCollection();
31+
const groupChannelFilter = new sdk.GroupChannelFilter();
32+
groupChannelFilter.includeEmpty = defaultOptions.includeEmpty;
33+
34+
return collectionBuilder
35+
.setFilter(groupChannelFilter)
36+
.setLimit(defaultOptions.limit)
37+
.setOrder(defaultOptions.order)
38+
.build();
2839
};
2940

3041
export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, userId, options) => {

‎packages/uikit-chat-hooks/src/channel/useGroupChannelListWithQuery.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,15 @@ const createGroupChannelListQuery = (
1818
const passedQuery = queryCreator?.();
1919
if (passedQuery) return passedQuery;
2020

21+
const defaultOptions = {
22+
includeEmpty: false,
23+
limit: 20,
24+
order: sdk.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE,
25+
};
2126
const defaultQuery = sdk.GroupChannel.createMyGroupChannelListQuery();
22-
defaultQuery.limit = 20;
27+
defaultQuery.limit = defaultOptions.limit;
28+
defaultQuery.order = defaultOptions.order;
29+
defaultQuery.includeEmpty = defaultOptions.includeEmpty;
2330
return defaultQuery;
2431
};
2532

‎packages/uikit-chat-hooks/src/common/useMessageOutgoingStatus.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import type {
2+
SendbirdAdminMessage,
3+
SendbirdChatSDK,
4+
SendbirdFileMessage,
5+
SendbirdGroupChannel,
6+
SendbirdUserMessage,
7+
} from '@sendbird/uikit-utils';
8+
import { isDifferentChannel, isMyMessage, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
9+
10+
import { useChannelHandler } from '../handler/useChannelHandler';
11+
import { useAppFeatures } from './useAppFeatures';
12+
13+
const HOOK_NAME = 'useMessageOutgoingStatus';
14+
15+
export type SBUOutgoingStatus = 'NONE' | 'PENDING' | 'FAILED' | 'UNDELIVERED' | 'DELIVERED' | 'UNREAD' | 'READ';
16+
17+
export const useMessageOutgoingStatus = (
18+
sdk: SendbirdChatSDK,
19+
channel: SendbirdGroupChannel,
20+
message?: SendbirdFileMessage | SendbirdUserMessage | SendbirdAdminMessage | null,
21+
): SBUOutgoingStatus => {
22+
const features = useAppFeatures(sdk);
23+
const forceUpdate = useForceUpdate();
24+
const currentUser = sdk.currentUser;
25+
26+
const uniqId = useUniqId(HOOK_NAME);
27+
useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
28+
onDeliveryReceiptUpdated(eventChannel) {
29+
if (isDifferentChannel(channel, eventChannel)) return;
30+
if (!isMyMessage(message, currentUser?.userId)) return;
31+
32+
forceUpdate();
33+
},
34+
onReadReceiptUpdated(eventChannel) {
35+
if (isDifferentChannel(channel, eventChannel)) return;
36+
if (!isMyMessage(message, currentUser?.userId)) return;
37+
38+
forceUpdate();
39+
},
40+
});
41+
42+
if (!message) return 'NONE';
43+
44+
if (message.sendingStatus === 'pending') return 'PENDING';
45+
46+
if (message.sendingStatus === 'failed') return 'FAILED';
47+
48+
if (channel.getUnreadMemberCount(message) === 0) return 'READ';
49+
50+
if (features.deliveryReceiptEnabled) {
51+
if (channel.getUndeliveredMemberCount(message) === 0) return 'DELIVERED';
52+
return 'UNDELIVERED';
53+
}
54+
55+
return 'UNREAD';
56+
};

‎packages/uikit-chat-hooks/src/index.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ export { useGroupChannelList } from './channel/useGroupChannelList';
22
export { useGroupChannelMessages } from './channel/useGroupChannelMessages';
33
export { useActiveGroupChannel } from './channel/useActiveGroupChannel';
44

5-
export { useUserList } from './common/useUserList';
5+
export { useAppFeatures } from './common/useAppFeatures';
6+
export { useMessageOutgoingStatus } from './common/useMessageOutgoingStatus';
67
export { usePushTrigger } from './common/usePushTrigger';
7-
export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
88
export { useTotalUnreadChannelCount } from './common/useTotalUnreadChannelCount';
9-
export { useAppFeatures } from './common/useAppFeatures';
9+
export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
10+
export { useUserList } from './common/useUserList';
1011

1112
export { useChannelHandler } from './handler/useChannelHandler';
1213
export { useConnectionHandler } from './handler/useConnectionHandler';

‎packages/uikit-react-native-foundation/src/ui/GroupChannelPreview/index.tsx

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -87,21 +87,23 @@ const GroupChannelPreview = ({
8787
</View>
8888

8989
<View style={styles.rightBottomSection}>
90-
<View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>
91-
{bodyIcon && (
92-
<Icon
93-
size={18}
94-
icon={bodyIcon}
95-
color={color.default.none.bodyIcon}
96-
containerStyle={[
97-
styles.bodyIcon,
98-
{ backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
99-
]}
100-
/>
101-
)}
102-
<Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
103-
{body}
104-
</Text>
90+
<View style={styles.body}>
91+
<View style={styles.bodyWrapper}>
92+
{bodyIcon && (
93+
<Icon
94+
size={18}
95+
icon={bodyIcon}
96+
color={color.default.none.bodyIcon}
97+
containerStyle={[
98+
styles.bodyIcon,
99+
{ backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
100+
]}
101+
/>
102+
)}
103+
<Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
104+
{body}
105+
</Text>
106+
</View>
105107
</View>
106108
<View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
107109
</View>
@@ -116,10 +118,11 @@ const Separator = ({ color }: SeparatorProps) => <View style={[styles.separator,
116118

117119
const styles = createStyleSheet({
118120
container: {
121+
height: 76,
119122
width: '100%',
120123
flexDirection: 'row',
121124
paddingHorizontal: 16,
122-
paddingVertical: 10,
125+
paddingTop: 10,
123126
alignItems: 'center',
124127
},
125128
coverContainer: {
@@ -170,9 +173,12 @@ const styles = createStyleSheet({
170173
body: {
171174
marginRight: 4,
172175
flex: 1,
173-
justifyContent: 'center',
176+
flexDirection: 'row',
174177
alignItems: 'flex-start',
178+
},
179+
bodyWrapper: {
175180
flexDirection: 'row',
181+
alignItems: 'center',
176182
},
177183
bodyText: {
178184
flex: 1,

‎packages/uikit-react-native/src/components/FileViewer.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import { StatusBar, StyleSheet, View } from 'react-native';
2+
import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
33
import { useSafeAreaInsets } from 'react-native-safe-area-context';
44

55
import {
@@ -17,7 +17,6 @@ import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
1717
import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte, useIIFE } from '@sendbird/uikit-utils';
1818

1919
import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
20-
import SBUPressable from './SBUPressable';
2120

2221
type Props = {
2322
fileMessage: SendbirdFileMessage;
@@ -191,9 +190,9 @@ const FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) =
191190
{ paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },
192191
]}
193192
>
194-
<SBUPressable as={'TouchableOpacity'} onPress={onClose} style={styles.barButton}>
193+
<TouchableOpacity onPress={onClose} style={styles.barButton}>
195194
<Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
196-
</SBUPressable>
195+
</TouchableOpacity>
197196
<View style={styles.barTitleContainer}>
198197
<Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle}>
199198
{title}
@@ -233,13 +232,13 @@ const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDown
233232
},
234233
]}
235234
>
236-
<SBUPressable as={'TouchableOpacity'} onPress={onPressDownload} style={styles.barButton}>
235+
<TouchableOpacity onPress={onPressDownload} style={styles.barButton}>
237236
<Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
238-
</SBUPressable>
237+
</TouchableOpacity>
239238
<View style={styles.barTitleContainer} />
240-
<SBUPressable as={'TouchableOpacity'} onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
239+
<TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
241240
{deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
242-
</SBUPressable>
241+
</TouchableOpacity>
243242
</View>
244243
);
245244
};

‎packages/uikit-react-native/src/components/MessageRenderer/MessageOutgoingStatus.tsx

Lines changed: 13 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useEffect } from 'react';
1+
import React from 'react';
22

3+
import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
34
import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
45
import type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
5-
import { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
66

77
import { useSendbirdChat } from '../../hooks/useContext';
88

@@ -12,64 +12,31 @@ type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
1212
const MessageOutgoingStatus = ({ channel, message }: Props) => {
1313
if (!message.isUserMessage() && !message.isFileMessage()) return null;
1414

15-
const { sdk, features } = useSendbirdChat();
15+
const { sdk } = useSendbirdChat();
1616
const { colors } = useUIKitTheme();
17+
const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);
1718

18-
const uniqId = useUniqId('MessageOutgoingStatus');
19-
const forceUpdate = useForceUpdate();
20-
21-
useEffect(() => {
22-
const handlerId = `MessageOutgoingStatus_${uniqId}`;
23-
24-
if (
25-
message.sendingStatus === 'succeeded' &&
26-
channel.getUnreadMemberCount(message) === 0 &&
27-
channel.getUndeliveredMemberCount(message) === 0
28-
) {
29-
sdk.removeChannelHandler(handlerId);
30-
} else {
31-
const handler = new sdk.ChannelHandler();
32-
33-
handler.onReadReceiptUpdated = (eventChannel) => {
34-
if (isDifferentChannel(channel, eventChannel)) return;
35-
forceUpdate();
36-
};
37-
38-
if (features.deliveryReceiptEnabled) {
39-
handler.onDeliveryReceiptUpdated = (eventChannel) => {
40-
if (isDifferentChannel(channel, eventChannel)) return;
41-
forceUpdate();
42-
};
43-
}
44-
45-
sdk.addChannelHandler(handlerId, handler);
46-
}
47-
48-
return () => {
49-
sdk.removeChannelHandler(handlerId);
50-
};
51-
}, [message.sendingStatus]);
52-
53-
if (message.sendingStatus === 'pending') {
19+
if (outgoingStatus === 'PENDING') {
5420
return <LoadingSpinner size={SIZE} style={styles.container} />;
5521
}
5622

57-
if (message.sendingStatus === 'failed') {
23+
if (outgoingStatus === 'FAILED') {
5824
return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
5925
}
6026

61-
if (channel.getUnreadMemberCount(message) === 0) {
27+
if (outgoingStatus === 'READ') {
6228
return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
6329
}
6430

65-
if (features.deliveryReceiptEnabled) {
66-
if (channel.getUndeliveredMemberCount(message) === 0) {
67-
return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
68-
}
31+
if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {
32+
return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
33+
}
34+
35+
if (outgoingStatus === 'UNDELIVERED') {
6936
return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
7037
}
7138

72-
return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
39+
return null;
7340
};
7441

7542
const styles = createStyleSheet({

‎packages/uikit-react-native/src/components/SBUPressable.tsx

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)