@sendbird/uikit-chat-hooks 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/channel/{useGroupChannelList.js → useGroupChannelList/index.js} +1 -1
- package/lib/commonjs/channel/useGroupChannelList/index.js.map +1 -0
- package/lib/commonjs/channel/useGroupChannelList/reducer.js +184 -0
- package/lib/commonjs/channel/useGroupChannelList/reducer.js.map +1 -0
- package/lib/commonjs/channel/useGroupChannelList/useGroupChannelListWithCollection.js +134 -0
- package/lib/commonjs/channel/useGroupChannelList/useGroupChannelListWithCollection.js.map +1 -0
- package/lib/commonjs/channel/useGroupChannelList/useGroupChannelListWithQuery.js +118 -0
- package/lib/commonjs/channel/useGroupChannelList/useGroupChannelListWithQuery.js.map +1 -0
- package/lib/commonjs/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.js +3 -3
- package/lib/commonjs/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.js.map +1 -1
- package/lib/commonjs/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.js +2 -2
- package/lib/commonjs/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.js.map +1 -1
- package/lib/commonjs/common/useMessageOutgoingStatus.js +49 -0
- package/lib/commonjs/common/useMessageOutgoingStatus.js.map +1 -0
- package/lib/commonjs/index.js +12 -4
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/channel/{useGroupChannelList.js → useGroupChannelList/index.js} +1 -1
- package/lib/module/channel/useGroupChannelList/index.js.map +1 -0
- package/lib/module/channel/useGroupChannelList/reducer.js +174 -0
- package/lib/module/channel/useGroupChannelList/reducer.js.map +1 -0
- package/lib/module/channel/useGroupChannelList/useGroupChannelListWithCollection.js +120 -0
- package/lib/module/channel/useGroupChannelList/useGroupChannelListWithCollection.js.map +1 -0
- package/lib/module/channel/useGroupChannelList/useGroupChannelListWithQuery.js +104 -0
- package/lib/module/channel/useGroupChannelList/useGroupChannelListWithQuery.js.map +1 -0
- package/lib/module/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.js +3 -3
- package/lib/module/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.js.map +1 -1
- package/lib/module/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.js +2 -2
- package/lib/module/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.js.map +1 -1
- package/lib/module/common/useMessageOutgoingStatus.js +36 -0
- package/lib/module/common/useMessageOutgoingStatus.js.map +1 -0
- package/lib/module/index.js +4 -3
- package/lib/module/index.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/src/channel/{useGroupChannelList.d.ts → useGroupChannelList/index.d.ts} +1 -1
- package/lib/typescript/src/channel/useGroupChannelList/reducer.d.ts +14 -0
- package/lib/typescript/src/channel/{useGroupChannelListWithCollection.d.ts → useGroupChannelList/useGroupChannelListWithCollection.d.ts} +1 -1
- package/lib/typescript/src/channel/{useGroupChannelListWithQuery.d.ts → useGroupChannelList/useGroupChannelListWithQuery.d.ts} +1 -1
- package/lib/typescript/src/common/useMessageOutgoingStatus.d.ts +3 -0
- package/lib/typescript/src/index.d.ts +4 -3
- package/lib/typescript/src/types.d.ts +0 -7
- package/package.json +3 -3
- package/src/channel/{useGroupChannelList.ts → useGroupChannelList/index.ts} +1 -1
- package/src/channel/useGroupChannelList/reducer.ts +154 -0
- package/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts +116 -0
- package/src/channel/useGroupChannelList/useGroupChannelListWithQuery.ts +114 -0
- package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts +3 -3
- package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts +2 -2
- package/src/common/useMessageOutgoingStatus.ts +56 -0
- package/src/index.ts +4 -3
- package/src/types.ts +0 -8
- package/lib/commonjs/channel/useGroupChannelList.js.map +0 -1
- package/lib/commonjs/channel/useGroupChannelListWithCollection.js +0 -148
- package/lib/commonjs/channel/useGroupChannelListWithCollection.js.map +0 -1
- package/lib/commonjs/channel/useGroupChannelListWithQuery.js +0 -130
- package/lib/commonjs/channel/useGroupChannelListWithQuery.js.map +0 -1
- package/lib/module/channel/useGroupChannelList.js.map +0 -1
- package/lib/module/channel/useGroupChannelListWithCollection.js +0 -135
- package/lib/module/channel/useGroupChannelListWithCollection.js.map +0 -1
- package/lib/module/channel/useGroupChannelListWithQuery.js +0 -117
- package/lib/module/channel/useGroupChannelListWithQuery.js.map +0 -1
- package/src/channel/useGroupChannelListWithCollection.ts +0 -139
- package/src/channel/useGroupChannelListWithQuery.ts +0 -119
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { useReducer } from 'react';
|
|
2
|
+
|
|
3
|
+
import type { SendbirdChannel } from '@sendbird/uikit-utils';
|
|
4
|
+
import { SendbirdGroupChannel, getGroupChannels } from '@sendbird/uikit-utils';
|
|
5
|
+
|
|
6
|
+
type Order = 'latest_last_message' | 'chronological' | 'channel_name_alphabetical' | 'metadata_value_alphabetical';
|
|
7
|
+
|
|
8
|
+
type Action =
|
|
9
|
+
| {
|
|
10
|
+
type: 'update_loading' | 'update_refreshing';
|
|
11
|
+
value: { status: boolean };
|
|
12
|
+
}
|
|
13
|
+
| {
|
|
14
|
+
type: 'update_channels';
|
|
15
|
+
value: { channels: SendbirdChannel[] };
|
|
16
|
+
}
|
|
17
|
+
| {
|
|
18
|
+
type: 'delete_channels';
|
|
19
|
+
value: { channelUrls: string[] };
|
|
20
|
+
}
|
|
21
|
+
| {
|
|
22
|
+
type: 'set_channels';
|
|
23
|
+
value: { channels: SendbirdChannel[]; clearPrev: boolean };
|
|
24
|
+
}
|
|
25
|
+
| {
|
|
26
|
+
type: 'update_order';
|
|
27
|
+
value: { order?: Order };
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
type State = {
|
|
31
|
+
loading: boolean;
|
|
32
|
+
refreshing: boolean;
|
|
33
|
+
groupChannels: SendbirdGroupChannel[];
|
|
34
|
+
order?: Order;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const defaultReducer = ({ ...draft }: State, action: Action) => {
|
|
38
|
+
const compareByOrder = createCompareByOrder(draft.order);
|
|
39
|
+
|
|
40
|
+
switch (action.type) {
|
|
41
|
+
case 'update_refreshing':
|
|
42
|
+
case 'update_loading': {
|
|
43
|
+
const key = action.type === 'update_loading' ? 'loading' : 'refreshing';
|
|
44
|
+
draft[key] = action.value.status;
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
47
|
+
case 'update_channels': {
|
|
48
|
+
getGroupChannels(action.value.channels).forEach((freshChannel) => {
|
|
49
|
+
const idx = draft.groupChannels.findIndex((staleChannel) => staleChannel.url === freshChannel.url);
|
|
50
|
+
if (idx > -1) draft.groupChannels[idx] = freshChannel;
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
compareByOrder && (draft.groupChannels = draft.groupChannels.sort(compareByOrder));
|
|
54
|
+
break;
|
|
55
|
+
}
|
|
56
|
+
case 'delete_channels': {
|
|
57
|
+
action.value.channelUrls.forEach((url) => {
|
|
58
|
+
const idx = draft.groupChannels.findIndex((c) => c.url === url);
|
|
59
|
+
if (idx > -1) draft.groupChannels.splice(idx, 1);
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
compareByOrder && (draft.groupChannels = draft.groupChannels.sort(compareByOrder));
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
case 'set_channels': {
|
|
66
|
+
if (action.value.clearPrev) {
|
|
67
|
+
draft.groupChannels = getGroupChannels(action.value.channels);
|
|
68
|
+
} else {
|
|
69
|
+
draft.groupChannels = [...draft.groupChannels, ...getGroupChannels(action.value.channels)];
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
compareByOrder && (draft.groupChannels = draft.groupChannels.sort(compareByOrder));
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
case 'update_order': {
|
|
76
|
+
draft.order = action.value.order;
|
|
77
|
+
break;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
return draft;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export const useGroupChannelListReducer = (order?: Order) => {
|
|
84
|
+
const [{ loading, refreshing, groupChannels }, dispatch] = useReducer(defaultReducer, {
|
|
85
|
+
loading: true,
|
|
86
|
+
refreshing: false,
|
|
87
|
+
groupChannels: [],
|
|
88
|
+
order,
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
const updateChannels = (channels: SendbirdChannel[]) => {
|
|
92
|
+
dispatch({ type: 'update_channels', value: { channels } });
|
|
93
|
+
};
|
|
94
|
+
const deleteChannels = (channelUrls: string[]) => {
|
|
95
|
+
dispatch({ type: 'delete_channels', value: { channelUrls } });
|
|
96
|
+
};
|
|
97
|
+
const setChannels = (channels: SendbirdChannel[], clearPrev: boolean) => {
|
|
98
|
+
dispatch({ type: 'set_channels', value: { channels, clearPrev } });
|
|
99
|
+
};
|
|
100
|
+
const updateLoading = (status: boolean) => {
|
|
101
|
+
dispatch({ type: 'update_loading', value: { status } });
|
|
102
|
+
};
|
|
103
|
+
const updateRefreshing = (status: boolean) => {
|
|
104
|
+
dispatch({ type: 'update_refreshing', value: { status } });
|
|
105
|
+
};
|
|
106
|
+
const updateOrder = (order?: Order) => {
|
|
107
|
+
dispatch({ type: 'update_order', value: { order } });
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
return {
|
|
111
|
+
updateLoading,
|
|
112
|
+
updateRefreshing,
|
|
113
|
+
updateChannels,
|
|
114
|
+
deleteChannels,
|
|
115
|
+
setChannels,
|
|
116
|
+
|
|
117
|
+
updateOrder,
|
|
118
|
+
|
|
119
|
+
loading,
|
|
120
|
+
refreshing,
|
|
121
|
+
groupChannels,
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
const createCompareByOrder = (order?: Order) => {
|
|
126
|
+
if (!order) return undefined;
|
|
127
|
+
|
|
128
|
+
return (channel1: SendbirdGroupChannel, channel2: SendbirdGroupChannel): number => {
|
|
129
|
+
switch (order) {
|
|
130
|
+
case 'latest_last_message': {
|
|
131
|
+
if (channel1.lastMessage && channel2.lastMessage) {
|
|
132
|
+
return channel2.lastMessage.createdAt - channel1.lastMessage.createdAt;
|
|
133
|
+
} else if (channel1.lastMessage) {
|
|
134
|
+
return -1;
|
|
135
|
+
} else if (channel2.lastMessage) {
|
|
136
|
+
return 1;
|
|
137
|
+
} else {
|
|
138
|
+
return channel2.createdAt - channel1.createdAt;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
case 'chronological': {
|
|
143
|
+
return channel2.createdAt - channel1.createdAt;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
case 'channel_name_alphabetical': {
|
|
147
|
+
return channel1.name.localeCompare(channel2.name);
|
|
148
|
+
}
|
|
149
|
+
default: {
|
|
150
|
+
return 0;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
};
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
import type { SendbirdChatSDK, SendbirdGroupChannelCollection } from '@sendbird/uikit-utils';
|
|
4
|
+
import { useAsyncEffect, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
|
|
5
|
+
|
|
6
|
+
import { useAppFeatures } from '../../common/useAppFeatures';
|
|
7
|
+
import { useChannelHandler } from '../../handler/useChannelHandler';
|
|
8
|
+
import type { UseGroupChannelList, UseGroupChannelListOptions } from '../../types';
|
|
9
|
+
import { useGroupChannelListReducer } from './reducer';
|
|
10
|
+
|
|
11
|
+
const HOOK_NAME = 'useGroupChannelListWithCollection';
|
|
12
|
+
|
|
13
|
+
const createGroupChannelListCollection = (
|
|
14
|
+
sdk: SendbirdChatSDK,
|
|
15
|
+
collectionCreator: UseGroupChannelListOptions['collectionCreator'],
|
|
16
|
+
) => {
|
|
17
|
+
const passedCollection = collectionCreator?.();
|
|
18
|
+
if (passedCollection) return passedCollection;
|
|
19
|
+
|
|
20
|
+
const defaultOptions = {
|
|
21
|
+
includeEmpty: false,
|
|
22
|
+
limit: 5,
|
|
23
|
+
order: sdk.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE,
|
|
24
|
+
};
|
|
25
|
+
const collectionBuilder = sdk.GroupChannel.createGroupChannelCollection();
|
|
26
|
+
const groupChannelFilter = new sdk.GroupChannelFilter();
|
|
27
|
+
groupChannelFilter.includeEmpty = defaultOptions.includeEmpty;
|
|
28
|
+
|
|
29
|
+
return collectionBuilder
|
|
30
|
+
.setFilter(groupChannelFilter)
|
|
31
|
+
.setLimit(defaultOptions.limit)
|
|
32
|
+
.setOrder(defaultOptions.order)
|
|
33
|
+
.build();
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, userId, options) => {
|
|
37
|
+
const id = useUniqId(HOOK_NAME);
|
|
38
|
+
const { deliveryReceiptEnabled } = useAppFeatures(sdk);
|
|
39
|
+
|
|
40
|
+
const collectionRef = useRef<SendbirdGroupChannelCollection>();
|
|
41
|
+
|
|
42
|
+
const { loading, groupChannels, refreshing, setChannels, deleteChannels, updateRefreshing, updateLoading } =
|
|
43
|
+
useGroupChannelListReducer();
|
|
44
|
+
|
|
45
|
+
const updateChannelsAndMarkAsDelivered = (markAsDelivered: boolean) => {
|
|
46
|
+
const channels = collectionRef.current?.channelList ?? [];
|
|
47
|
+
setChannels(channels, true);
|
|
48
|
+
if (markAsDelivered && deliveryReceiptEnabled) channels.forEach((channel) => sdk.markAsDelivered(channel.url));
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const init = useFreshCallback(async (uid?: string) => {
|
|
52
|
+
if (collectionRef.current) collectionRef.current?.dispose();
|
|
53
|
+
|
|
54
|
+
if (uid) {
|
|
55
|
+
collectionRef.current = createGroupChannelListCollection(sdk, options?.collectionCreator);
|
|
56
|
+
|
|
57
|
+
if (collectionRef.current?.hasMore) {
|
|
58
|
+
await collectionRef.current?.loadMore();
|
|
59
|
+
updateChannelsAndMarkAsDelivered(true);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
collectionRef.current?.setGroupChannelCollectionHandler({
|
|
63
|
+
onChannelsAdded() {
|
|
64
|
+
updateChannelsAndMarkAsDelivered(true);
|
|
65
|
+
},
|
|
66
|
+
onChannelsUpdated() {
|
|
67
|
+
updateChannelsAndMarkAsDelivered(true);
|
|
68
|
+
},
|
|
69
|
+
onChannelsDeleted() {
|
|
70
|
+
updateChannelsAndMarkAsDelivered(false);
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
return () => {
|
|
78
|
+
if (collectionRef.current) collectionRef.current?.dispose();
|
|
79
|
+
};
|
|
80
|
+
}, []);
|
|
81
|
+
|
|
82
|
+
useAsyncEffect(async () => {
|
|
83
|
+
updateLoading(true);
|
|
84
|
+
await init(userId);
|
|
85
|
+
updateLoading(false);
|
|
86
|
+
}, [init, userId]);
|
|
87
|
+
|
|
88
|
+
useChannelHandler(sdk, `${HOOK_NAME}_${id}`, {
|
|
89
|
+
onUserBanned: (channel, user) => {
|
|
90
|
+
const isMe = user.userId === userId;
|
|
91
|
+
if (isMe) deleteChannels([channel.url]);
|
|
92
|
+
else updateChannelsAndMarkAsDelivered(false);
|
|
93
|
+
},
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
const refresh = useFreshCallback(async () => {
|
|
97
|
+
updateRefreshing(true);
|
|
98
|
+
await init(userId);
|
|
99
|
+
updateRefreshing(false);
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
const next = useFreshCallback(async () => {
|
|
103
|
+
if (collectionRef.current?.hasMore) {
|
|
104
|
+
await collectionRef.current?.loadMore();
|
|
105
|
+
updateChannelsAndMarkAsDelivered(true);
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
return {
|
|
110
|
+
loading,
|
|
111
|
+
groupChannels,
|
|
112
|
+
refresh,
|
|
113
|
+
refreshing,
|
|
114
|
+
next,
|
|
115
|
+
};
|
|
116
|
+
};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
import type Sendbird from 'sendbird';
|
|
3
|
+
|
|
4
|
+
import type { SendbirdChannel, SendbirdChatSDK } from '@sendbird/uikit-utils';
|
|
5
|
+
import { useAsyncEffect, useFreshCallback } from '@sendbird/uikit-utils';
|
|
6
|
+
|
|
7
|
+
import { useAppFeatures } from '../../common/useAppFeatures';
|
|
8
|
+
import { useChannelHandler } from '../../handler/useChannelHandler';
|
|
9
|
+
import type { UseGroupChannelList, UseGroupChannelListOptions } from '../../types';
|
|
10
|
+
import { useGroupChannelListReducer } from './reducer';
|
|
11
|
+
|
|
12
|
+
const HOOK_NAME = 'useGroupChannelListWithQuery';
|
|
13
|
+
|
|
14
|
+
const createGroupChannelListQuery = (
|
|
15
|
+
sdk: SendbirdChatSDK,
|
|
16
|
+
queryCreator: UseGroupChannelListOptions['queryCreator'],
|
|
17
|
+
) => {
|
|
18
|
+
const passedQuery = queryCreator?.();
|
|
19
|
+
if (passedQuery) return passedQuery;
|
|
20
|
+
|
|
21
|
+
const defaultOptions = {
|
|
22
|
+
includeEmpty: false,
|
|
23
|
+
limit: 20,
|
|
24
|
+
order: 'latest_last_message',
|
|
25
|
+
} as const;
|
|
26
|
+
const defaultQuery = sdk.GroupChannel.createMyGroupChannelListQuery();
|
|
27
|
+
defaultQuery.limit = defaultOptions.limit;
|
|
28
|
+
defaultQuery.order = defaultOptions.order;
|
|
29
|
+
defaultQuery.includeEmpty = defaultOptions.includeEmpty;
|
|
30
|
+
return defaultQuery;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, options) => {
|
|
34
|
+
const { deliveryReceiptEnabled } = useAppFeatures(sdk);
|
|
35
|
+
const queryRef = useRef<Sendbird.GroupChannelListQuery>();
|
|
36
|
+
|
|
37
|
+
const {
|
|
38
|
+
loading,
|
|
39
|
+
groupChannels,
|
|
40
|
+
refreshing,
|
|
41
|
+
updateChannels,
|
|
42
|
+
setChannels,
|
|
43
|
+
deleteChannels,
|
|
44
|
+
updateRefreshing,
|
|
45
|
+
updateLoading,
|
|
46
|
+
updateOrder,
|
|
47
|
+
} = useGroupChannelListReducer();
|
|
48
|
+
|
|
49
|
+
const updateChannelsAndMarkAsDelivered = (channels: SendbirdChannel[]) => {
|
|
50
|
+
updateChannels(channels);
|
|
51
|
+
if (deliveryReceiptEnabled) channels.forEach((channel) => sdk.markAsDelivered(channel.url));
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const init = useFreshCallback(async (uid?: string) => {
|
|
55
|
+
if (uid) {
|
|
56
|
+
queryRef.current = createGroupChannelListQuery(sdk, options?.queryCreator);
|
|
57
|
+
updateOrder(queryRef.current?.order);
|
|
58
|
+
|
|
59
|
+
if (queryRef.current?.hasNext) {
|
|
60
|
+
const channels = await queryRef.current.next();
|
|
61
|
+
|
|
62
|
+
setChannels(channels, true);
|
|
63
|
+
if (deliveryReceiptEnabled) channels.forEach((channel) => sdk.markAsDelivered(channel.url));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
useAsyncEffect(async () => {
|
|
69
|
+
updateLoading(true);
|
|
70
|
+
await init(userId);
|
|
71
|
+
updateLoading(false);
|
|
72
|
+
}, [init, userId]);
|
|
73
|
+
|
|
74
|
+
useChannelHandler(sdk, HOOK_NAME, {
|
|
75
|
+
onChannelChanged: (channel) => updateChannelsAndMarkAsDelivered([channel]),
|
|
76
|
+
onChannelFrozen: (channel) => updateChannels([channel]),
|
|
77
|
+
onChannelUnfrozen: (channel) => updateChannels([channel]),
|
|
78
|
+
onChannelMemberCountChanged: (channels) => updateChannels(channels),
|
|
79
|
+
onChannelDeleted: (url) => deleteChannels([url]),
|
|
80
|
+
onUserJoined: (channel) => updateChannelsAndMarkAsDelivered([channel]),
|
|
81
|
+
onUserLeft: (channel, user) => {
|
|
82
|
+
const isMe = user.userId === userId;
|
|
83
|
+
if (isMe) deleteChannels([channel.url]);
|
|
84
|
+
else updateChannelsAndMarkAsDelivered([channel]);
|
|
85
|
+
},
|
|
86
|
+
onUserBanned(channel, user) {
|
|
87
|
+
const isMe = user.userId === userId;
|
|
88
|
+
if (isMe) deleteChannels([channel.url]);
|
|
89
|
+
else updateChannelsAndMarkAsDelivered([channel]);
|
|
90
|
+
},
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
const refresh = useFreshCallback(async () => {
|
|
94
|
+
updateRefreshing(true);
|
|
95
|
+
await init(userId);
|
|
96
|
+
updateRefreshing(false);
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
const next = useFreshCallback(async () => {
|
|
100
|
+
if (queryRef.current?.hasNext) {
|
|
101
|
+
const channels = await queryRef.current.next();
|
|
102
|
+
setChannels(channels, false);
|
|
103
|
+
if (deliveryReceiptEnabled) channels.forEach((channel) => sdk.markAsDelivered(channel.url));
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
return {
|
|
108
|
+
loading,
|
|
109
|
+
groupChannels,
|
|
110
|
+
refresh,
|
|
111
|
+
refreshing,
|
|
112
|
+
next,
|
|
113
|
+
};
|
|
114
|
+
};
|
|
@@ -62,12 +62,12 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
|
|
|
62
62
|
try {
|
|
63
63
|
if (deliveryReceiptEnabled) sdk.markAsDelivered(activeChannel.url);
|
|
64
64
|
} catch (e) {
|
|
65
|
-
Logger.
|
|
65
|
+
Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
|
|
66
66
|
}
|
|
67
67
|
try {
|
|
68
68
|
await sdk.markAsReadWithChannelUrls([activeChannel.url]);
|
|
69
69
|
} catch (e) {
|
|
70
|
-
Logger.
|
|
70
|
+
Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
73
|
|
|
@@ -99,7 +99,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
|
|
|
99
99
|
}
|
|
100
100
|
})
|
|
101
101
|
.onApiResult((err, messages) => {
|
|
102
|
-
if (err) Logger.
|
|
102
|
+
if (err) Logger.warn(`[${HOOK_NAME}/onApiResult]`, err);
|
|
103
103
|
else {
|
|
104
104
|
Logger.debug(`[${HOOK_NAME}/onApiResult]`, 'message length:', messages.length);
|
|
105
105
|
updateMessages(messages, true, sdk.currentUser.userId);
|
|
@@ -49,12 +49,12 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
|
|
|
49
49
|
try {
|
|
50
50
|
if (deliveryReceiptEnabled) sdk.markAsDelivered(activeChannel.url);
|
|
51
51
|
} catch (e) {
|
|
52
|
-
Logger.
|
|
52
|
+
Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
|
|
53
53
|
}
|
|
54
54
|
try {
|
|
55
55
|
await sdk.markAsReadWithChannelUrls([activeChannel.url]);
|
|
56
56
|
} catch (e) {
|
|
57
|
-
Logger.
|
|
57
|
+
Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
|
|
@@ -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
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -2,11 +2,12 @@ export { useGroupChannelList } from './channel/useGroupChannelList';
|
|
|
2
2
|
export { useGroupChannelMessages } from './channel/useGroupChannelMessages';
|
|
3
3
|
export { useActiveGroupChannel } from './channel/useActiveGroupChannel';
|
|
4
4
|
|
|
5
|
-
export {
|
|
5
|
+
export { useAppFeatures } from './common/useAppFeatures';
|
|
6
|
+
export { useMessageOutgoingStatus } from './common/useMessageOutgoingStatus';
|
|
6
7
|
export { usePushTrigger } from './common/usePushTrigger';
|
|
7
|
-
export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
|
|
8
8
|
export { useTotalUnreadChannelCount } from './common/useTotalUnreadChannelCount';
|
|
9
|
-
export {
|
|
9
|
+
export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
|
|
10
|
+
export { useUserList } from './common/useUserList';
|
|
10
11
|
|
|
11
12
|
export { useChannelHandler } from './handler/useChannelHandler';
|
|
12
13
|
export { useConnectionHandler } from './handler/useConnectionHandler';
|
package/src/types.ts
CHANGED
|
@@ -48,13 +48,6 @@ export interface UseGroupChannelList {
|
|
|
48
48
|
* */
|
|
49
49
|
refresh: () => Promise<void>;
|
|
50
50
|
|
|
51
|
-
/**
|
|
52
|
-
* Update channel, update or insert channel to state
|
|
53
|
-
* @param {SendbirdGroupChannel} channel
|
|
54
|
-
* @return {void}
|
|
55
|
-
* */
|
|
56
|
-
update: (channel: SendbirdGroupChannel) => void;
|
|
57
|
-
|
|
58
51
|
/**
|
|
59
52
|
* Get group channels state
|
|
60
53
|
* */
|
|
@@ -68,7 +61,6 @@ export interface UseGroupChannelList {
|
|
|
68
61
|
};
|
|
69
62
|
}
|
|
70
63
|
export type UseGroupChannelListOptions = {
|
|
71
|
-
sortComparator?: (a: SendbirdGroupChannel, b: SendbirdGroupChannel) => number;
|
|
72
64
|
queryCreator?: () => Sendbird.GroupChannelListQuery;
|
|
73
65
|
collectionCreator?: () => SendbirdGroupChannelCollection;
|
|
74
66
|
enableCollectionWithoutLocalCache?: boolean;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useGroupChannelList","sdk","userId","options","isCacheEnabled","enableCollectionWithoutLocalCache","useGroupChannelListWithCollection","useGroupChannelListWithQuery"],"sources":["useGroupChannelList.ts"],"sourcesContent":["import type { UseGroupChannelList } from '../types';\nimport { useGroupChannelListWithCollection } from './useGroupChannelListWithCollection';\nimport { useGroupChannelListWithQuery } from './useGroupChannelListWithQuery';\n\nexport const useGroupChannelList: UseGroupChannelList = (sdk, userId, options) => {\n if (sdk.isCacheEnabled || options?.enableCollectionWithoutLocalCache) {\n return useGroupChannelListWithCollection(sdk, userId, options);\n } else {\n return useGroupChannelListWithQuery(sdk, userId, options);\n }\n};\n"],"mappings":";;;;;;;AACA;;AACA;;AAEO,MAAMA,mBAAwC,GAAG,CAACC,GAAD,EAAMC,MAAN,EAAcC,OAAd,KAA0B;EAChF,IAAIF,GAAG,CAACG,cAAJ,IAAsBD,OAAtB,aAAsBA,OAAtB,eAAsBA,OAAO,CAAEE,iCAAnC,EAAsE;IACpE,OAAO,IAAAC,oEAAA,EAAkCL,GAAlC,EAAuCC,MAAvC,EAA+CC,OAA/C,CAAP;EACD,CAFD,MAEO;IACL,OAAO,IAAAI,0DAAA,EAA6BN,GAA7B,EAAkCC,MAAlC,EAA0CC,OAA1C,CAAP;EACD;AACF,CANM"}
|
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useGroupChannelListWithCollection = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
|
|
10
|
-
var _uikitUtils = require("@sendbird/uikit-utils");
|
|
11
|
-
|
|
12
|
-
var _useAppFeatures = require("../common/useAppFeatures");
|
|
13
|
-
|
|
14
|
-
var _useChannelHandler = require("../handler/useChannelHandler");
|
|
15
|
-
|
|
16
|
-
const HOOK_NAME = 'useGroupChannelListWithCollection';
|
|
17
|
-
|
|
18
|
-
const createGroupChannelListCollection = (sdk, collectionCreator) => {
|
|
19
|
-
const passedCollection = collectionCreator === null || collectionCreator === void 0 ? void 0 : collectionCreator();
|
|
20
|
-
if (passedCollection) return passedCollection;
|
|
21
|
-
const defaultCollection = sdk.GroupChannel.createGroupChannelCollection();
|
|
22
|
-
const filter = new sdk.GroupChannelFilter();
|
|
23
|
-
return defaultCollection.setLimit(20).setFilter(filter).build();
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const useGroupChannelListWithCollection = (sdk, userId, options) => {
|
|
27
|
-
const id = (0, _uikitUtils.useUniqId)(HOOK_NAME);
|
|
28
|
-
const {
|
|
29
|
-
deliveryReceiptEnabled
|
|
30
|
-
} = (0, _useAppFeatures.useAppFeatures)(sdk);
|
|
31
|
-
const collectionRef = (0, _react.useRef)();
|
|
32
|
-
const [loading, setLoading] = (0, _react.useState)(false);
|
|
33
|
-
const [refreshing, setRefreshing] = (0, _react.useState)(false);
|
|
34
|
-
const [groupChannelMap, setGroupChannelMap] = (0, _react.useState)({});
|
|
35
|
-
const groupChannels = (0, _react.useMemo)(() => {
|
|
36
|
-
const channels = Object.values(groupChannelMap);
|
|
37
|
-
if (options !== null && options !== void 0 && options.sortComparator) return channels.sort(options === null || options === void 0 ? void 0 : options.sortComparator);
|
|
38
|
-
return channels;
|
|
39
|
-
}, [groupChannelMap, options === null || options === void 0 ? void 0 : options.sortComparator]); // ---------- internal methods ---------- //
|
|
40
|
-
|
|
41
|
-
const updateChannels = (channels, clearPrev) => {
|
|
42
|
-
const groupChannels = channels.filter(c => c.isGroupChannel());
|
|
43
|
-
if (clearPrev) setGroupChannelMap((0, _uikitUtils.arrayToMap)(groupChannels, 'url'));else setGroupChannelMap(prev => ({ ...prev,
|
|
44
|
-
...(0, _uikitUtils.arrayToMap)(groupChannels, 'url')
|
|
45
|
-
}));
|
|
46
|
-
if (deliveryReceiptEnabled) groupChannels.forEach(channel => sdk.markAsDelivered(channel.url));
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const deleteChannels = channelUrls => {
|
|
50
|
-
setGroupChannelMap(_ref => {
|
|
51
|
-
let { ...draft
|
|
52
|
-
} = _ref;
|
|
53
|
-
channelUrls.forEach(url => delete draft[url]);
|
|
54
|
-
return draft;
|
|
55
|
-
});
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
const init = (0, _react.useCallback)(async uid => {
|
|
59
|
-
var _collectionRef$curren;
|
|
60
|
-
|
|
61
|
-
if (collectionRef.current) (_collectionRef$curren = collectionRef.current) === null || _collectionRef$curren === void 0 ? void 0 : _collectionRef$curren.dispose();
|
|
62
|
-
|
|
63
|
-
if (uid) {
|
|
64
|
-
var _collectionRef$curren2, _collectionRef$curren4;
|
|
65
|
-
|
|
66
|
-
collectionRef.current = createGroupChannelListCollection(sdk, options === null || options === void 0 ? void 0 : options.collectionCreator);
|
|
67
|
-
|
|
68
|
-
if ((_collectionRef$curren2 = collectionRef.current) !== null && _collectionRef$curren2 !== void 0 && _collectionRef$curren2.hasMore) {
|
|
69
|
-
var _collectionRef$curren3;
|
|
70
|
-
|
|
71
|
-
updateChannels(await ((_collectionRef$curren3 = collectionRef.current) === null || _collectionRef$curren3 === void 0 ? void 0 : _collectionRef$curren3.loadMore()), true);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
(_collectionRef$curren4 = collectionRef.current) === null || _collectionRef$curren4 === void 0 ? void 0 : _collectionRef$curren4.setGroupChannelCollectionHandler({
|
|
75
|
-
onChannelsAdded(_, channels) {
|
|
76
|
-
updateChannels(channels, false);
|
|
77
|
-
},
|
|
78
|
-
|
|
79
|
-
onChannelsUpdated(_, channels) {
|
|
80
|
-
updateChannels(channels, false);
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
onChannelsDeleted(_, channelUrls) {
|
|
84
|
-
deleteChannels(channelUrls);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
}, [sdk, options === null || options === void 0 ? void 0 : options.collectionCreator]); // ---------- internal methods ends ---------- //
|
|
90
|
-
// ---------- internal hooks ---------- //
|
|
91
|
-
|
|
92
|
-
(0, _react.useEffect)(() => {
|
|
93
|
-
return () => {
|
|
94
|
-
var _collectionRef$curren5;
|
|
95
|
-
|
|
96
|
-
if (collectionRef.current) (_collectionRef$curren5 = collectionRef.current) === null || _collectionRef$curren5 === void 0 ? void 0 : _collectionRef$curren5.dispose();
|
|
97
|
-
};
|
|
98
|
-
}, []);
|
|
99
|
-
(0, _uikitUtils.useAsyncEffect)(async () => {
|
|
100
|
-
setLoading(true);
|
|
101
|
-
await init(userId);
|
|
102
|
-
setLoading(false);
|
|
103
|
-
}, [init, userId]);
|
|
104
|
-
(0, _useChannelHandler.useChannelHandler)(sdk, `${HOOK_NAME}_${id}`, {
|
|
105
|
-
onUserBanned: (channel, user) => {
|
|
106
|
-
const isMe = user.userId === userId;
|
|
107
|
-
if (isMe) deleteChannels([channel.url]);else updateChannels([channel], false);
|
|
108
|
-
}
|
|
109
|
-
}); // ---------- internal hooks ends ---------- //
|
|
110
|
-
// ---------- returns methods ---------- //
|
|
111
|
-
|
|
112
|
-
const refresh = (0, _react.useCallback)(async () => {
|
|
113
|
-
setRefreshing(true);
|
|
114
|
-
await init(userId);
|
|
115
|
-
setRefreshing(false);
|
|
116
|
-
}, [init, userId]);
|
|
117
|
-
const update = (0, _react.useCallback)(channel => {
|
|
118
|
-
if (deliveryReceiptEnabled) sdk.markAsDelivered(channel.url);
|
|
119
|
-
setGroupChannelMap(prev => ({ ...prev,
|
|
120
|
-
[channel.url]: channel
|
|
121
|
-
}));
|
|
122
|
-
}, [sdk]);
|
|
123
|
-
const next = (0, _react.useCallback)(async () => {
|
|
124
|
-
var _collectionRef$curren6;
|
|
125
|
-
|
|
126
|
-
if ((_collectionRef$curren6 = collectionRef.current) !== null && _collectionRef$curren6 !== void 0 && _collectionRef$curren6.hasMore) {
|
|
127
|
-
var _collectionRef$curren7;
|
|
128
|
-
|
|
129
|
-
const channels = await ((_collectionRef$curren7 = collectionRef.current) === null || _collectionRef$curren7 === void 0 ? void 0 : _collectionRef$curren7.loadMore());
|
|
130
|
-
setGroupChannelMap(prev => ({ ...prev,
|
|
131
|
-
...(0, _uikitUtils.arrayToMap)(channels, 'url')
|
|
132
|
-
}));
|
|
133
|
-
if (deliveryReceiptEnabled) channels.forEach(channel => sdk.markAsDelivered(channel.url));
|
|
134
|
-
}
|
|
135
|
-
}, [sdk]); // ---------- returns methods ends ---------- //
|
|
136
|
-
|
|
137
|
-
return {
|
|
138
|
-
loading,
|
|
139
|
-
groupChannels,
|
|
140
|
-
refresh,
|
|
141
|
-
refreshing,
|
|
142
|
-
next,
|
|
143
|
-
update
|
|
144
|
-
};
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
exports.useGroupChannelListWithCollection = useGroupChannelListWithCollection;
|
|
148
|
-
//# sourceMappingURL=useGroupChannelListWithCollection.js.map
|