Skip to content

Commit b25b4b7

Browse files
bang9bang9
authored
Merge pull request #14 from sendbird/feature/sample-settings
feat(sample): settings
2 parents 9f18b22 + 74ea450 commit b25b4b7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1033
-256
lines changed

‎packages/chat-react-hooks/src/channel/useGroupChannelList.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export const useGroupChannelList = (
1010
options?: UseGroupChannelListOptions,
1111
): UseGroupChannelList => {
1212
if (sdk.isCacheEnabled) {
13-
return useGroupChannelListWithQuery(sdk, userId, options);
14-
} else {
1513
return useGroupChannelListWithCollection(sdk, userId, options);
14+
} else {
15+
return useGroupChannelListWithQuery(sdk, userId, options);
1616
}
1717
};

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

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
22
import type Sendbird from 'sendbird';
33

44
import type { SendbirdChannel, SendbirdChatSDK } from '@sendbird/uikit-utils';
5-
import { Logger, arrayToMap, useAsyncEffect } from '@sendbird/uikit-utils';
5+
import { Logger, arrayToMap, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
66

77
import useInternalPubSub from '../common/useInternalPubSub';
88
import useChannelHandler from '../handler/useChannelHandler';
@@ -28,13 +28,14 @@ const createGroupChannelListCollection = (
2828
.build();
2929
};
3030

31-
const hookName = 'useGroupChannelListWithCollection';
31+
const HOOK_NAME = 'useGroupChannelListWithCollection';
3232

3333
export const useGroupChannelListWithCollection = (
3434
sdk: SendbirdChatSDK,
3535
userId?: string,
3636
options?: UseGroupChannelListOptions,
3737
): UseGroupChannelList => {
38+
const id = useUniqId(HOOK_NAME);
3839
const { events, subscribe } = useInternalPubSub();
3940

4041
const collectionRef = useRef<Sendbird.GroupChannelCollection>();
@@ -49,9 +50,10 @@ export const useGroupChannelListWithCollection = (
4950
}, [groupChannelMap, options?.sortComparator]);
5051

5152
// ---------- internal methods ---------- //
52-
const updateChannels = (channels: SendbirdChannel[]) => {
53+
const updateChannels = (channels: SendbirdChannel[], clearPrev: boolean) => {
5354
const groupChannels = channels.filter((c): c is Sendbird.GroupChannel => c.isGroupChannel());
54-
setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(groupChannels, 'url') }));
55+
if (clearPrev) setGroupChannelMap(arrayToMap(groupChannels, 'url'));
56+
else setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(groupChannels, 'url') }));
5557
groupChannels.forEach((channel) => sdk.markAsDelivered(channel.url));
5658
};
5759
const deleteChannels = (channelUrls: string[]) => {
@@ -60,28 +62,27 @@ export const useGroupChannelListWithCollection = (
6062
return draft;
6163
});
6264
};
63-
const clearChannels = () => {
64-
setGroupChannelMap({});
65-
};
6665
const init = useCallback(
6766
async (uid?: string) => {
6867
if (collectionRef.current) collectionRef.current?.dispose();
69-
clearChannels();
7068

7169
if (uid) {
7270
collectionRef.current = createGroupChannelListCollection(sdk, options?.collectionCreator);
71+
if (collectionRef.current?.hasMore) {
72+
updateChannels(await collectionRef.current?.loadMore(), true);
73+
}
74+
7375
collectionRef.current?.setGroupChannelCollectionHandler({
7476
onChannelsAdded(_, channels) {
75-
updateChannels(channels);
77+
updateChannels(channels, false);
7678
},
7779
onChannelsUpdated(_, channels) {
78-
updateChannels(channels);
80+
updateChannels(channels, false);
7981
},
8082
onChannelsDeleted(_, channelUrls) {
8183
deleteChannels(channelUrls);
8284
},
8385
});
84-
updateChannels(await collectionRef.current?.loadMore());
8586
}
8687
},
8788
[sdk, options?.collectionCreator],
@@ -105,18 +106,18 @@ export const useGroupChannelListWithCollection = (
105106
subscribe(
106107
events.ChannelUpdated,
107108
({ channel }, err) => {
108-
if (err) Logger.warn(hookName, 'Cannot update channels', err);
109-
else updateChannels([channel]);
109+
if (err) Logger.warn(HOOK_NAME, 'Cannot update channels', err);
110+
else updateChannels([channel], false);
110111
},
111-
hookName,
112+
HOOK_NAME,
112113
),
113114
subscribe(
114115
events.ChannelDeleted,
115116
({ channelUrl }, err) => {
116-
if (err) Logger.warn(hookName, 'Cannot delete channels', err);
117+
if (err) Logger.warn(HOOK_NAME, 'Cannot delete channels', err);
117118
else deleteChannels([channelUrl]);
118119
},
119-
hookName,
120+
HOOK_NAME,
120121
),
121122
];
122123

@@ -127,18 +128,18 @@ export const useGroupChannelListWithCollection = (
127128

128129
useChannelHandler(
129130
sdk,
130-
hookName,
131+
HOOK_NAME + id,
131132
{
132-
onChannelChanged: (channel) => updateChannels([channel]),
133-
onChannelFrozen: (channel) => updateChannels([channel]),
134-
onChannelUnfrozen: (channel) => updateChannels([channel]),
135-
onChannelMemberCountChanged: (channels) => updateChannels(channels),
133+
onChannelChanged: (channel) => updateChannels([channel], false),
134+
onChannelFrozen: (channel) => updateChannels([channel], false),
135+
onChannelUnfrozen: (channel) => updateChannels([channel], false),
136+
onChannelMemberCountChanged: (channels) => updateChannels(channels, false),
136137
onChannelDeleted: (url) => deleteChannels([url]),
137-
onUserJoined: (channel) => updateChannels([channel]),
138+
onUserJoined: (channel) => updateChannels([channel], false),
138139
onUserLeft: (channel, user) => {
139140
const isMe = user.userId === userId;
140141
if (isMe) deleteChannels([channel.url]);
141-
else updateChannels([channel]);
142+
else updateChannels([channel], false);
142143
},
143144
},
144145
[sdk, userId],

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,10 @@ export const useGroupChannelListWithQuery = (
4141
}, [groupChannelMap, options?.sortComparator]);
4242

4343
// ---------- internal methods ---------- //
44-
const updateChannels = (channels: SendbirdChannel[]) => {
44+
const updateChannels = (channels: SendbirdChannel[], clearPrev: boolean) => {
4545
const groupChannels = channels.filter((c): c is Sendbird.GroupChannel => c.isGroupChannel());
46-
setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(groupChannels, 'url') }));
46+
if (clearPrev) setGroupChannelMap(arrayToMap(groupChannels, 'url'));
47+
else setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(groupChannels, 'url') }));
4748
groupChannels.forEach((channel) => sdk.markAsDelivered(channel.url));
4849
};
4950
const deleteChannels = (channelUrls: string[]) => {
@@ -60,7 +61,10 @@ export const useGroupChannelListWithQuery = (
6061
clearChannels();
6162
if (uid) {
6263
queryRef.current = createGroupChannelListQuery(sdk, options?.queryCreator);
63-
await next();
64+
if (queryRef.current?.hasNext) {
65+
const channels = await queryRef.current.next();
66+
updateChannels(channels, true);
67+
}
6468
}
6569
},
6670
[sdk, options?.queryCreator],
@@ -78,16 +82,16 @@ export const useGroupChannelListWithQuery = (
7882
sdk,
7983
'useGroupChannelListWithQuery',
8084
{
81-
onChannelChanged: (channel) => updateChannels([channel]),
82-
onChannelFrozen: (channel) => updateChannels([channel]),
83-
onChannelUnfrozen: (channel) => updateChannels([channel]),
84-
onChannelMemberCountChanged: (channels) => updateChannels(channels),
85+
onChannelChanged: (channel) => updateChannels([channel], false),
86+
onChannelFrozen: (channel) => updateChannels([channel], false),
87+
onChannelUnfrozen: (channel) => updateChannels([channel], false),
88+
onChannelMemberCountChanged: (channels) => updateChannels(channels, false),
8589
onChannelDeleted: (url) => deleteChannels([url]),
86-
onUserJoined: (channel) => updateChannels([channel]),
90+
onUserJoined: (channel) => updateChannels([channel], false),
8791
onUserLeft: (channel, user) => {
8892
const isMe = user.userId === userId;
8993
if (isMe) deleteChannels([channel.url]);
90-
else updateChannels([channel]);
94+
else updateChannels([channel], false);
9195
},
9296
},
9397
[sdk, userId],

‎packages/chat-react-hooks/src/channel/useGroupChannelMessagesWithCollection.ts‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,9 @@ export const useGroupChannelMessagesWithCollection = (
4747
});
4848

4949
// ---------- internal methods ------------ //
50-
const updateMessages = (messages: Sendbird.BaseMessageInstance[]) => {
51-
setMessageMap((prev) => ({ ...prev, ...arrayToMap(messages, 'reqId', 'messageId') }));
50+
const updateMessages = (messages: Sendbird.BaseMessageInstance[], clearPrev: boolean) => {
51+
if (clearPrev) setMessageMap(arrayToMap(messages, 'reqId', 'messageId'));
52+
else setMessageMap((prev) => ({ ...prev, ...arrayToMap(messages, 'reqId', 'messageId') }));
5253
};
5354
const deleteMessages = (messages: SendbirdMessage[]) => {
5455
setMessageMap(({ ...draft }) => {
@@ -59,8 +60,9 @@ export const useGroupChannelMessagesWithCollection = (
5960
return draft;
6061
});
6162
};
62-
const updateNextMessages = (messages: Sendbird.BaseMessageInstance[]) => {
63-
setNextMessageMap((prev) => ({ ...prev, ...arrayToMap(messages, 'reqId', 'messageId') }));
63+
const updateNextMessages = (messages: Sendbird.BaseMessageInstance[], clearPrev: boolean) => {
64+
if (clearPrev) setNextMessageMap(arrayToMap(messages, 'reqId', 'messageId'));
65+
else setNextMessageMap((prev) => ({ ...prev, ...arrayToMap(messages, 'reqId', 'messageId') }));
6466
};
6567
const deleteNextMessages = (messages: SendbirdMessage[]) => {
6668
setNextMessageMap(({ ...draft }) => {
@@ -71,36 +73,37 @@ export const useGroupChannelMessagesWithCollection = (
7173
return draft;
7274
});
7375
};
74-
const clearAllMessages = () => {
75-
setMessageMap({});
76-
setNextMessageMap({});
77-
};
7876
const init = useCallback(
7977
async (uid?: string) => {
8078
if (collectionRef.current) collectionRef.current?.dispose();
81-
clearAllMessages();
8279

8380
if (uid) {
8481
collectionRef.current = createMessageCollection(sdk, channel, options?.collectionCreator);
82+
if (collectionRef.current?.hasPrevious) {
83+
const list = await collectionRef.current?.loadPrevious();
84+
updateMessages(list, true);
85+
}
86+
updateNextMessages([], true);
87+
8588
collectionRef.current
8689
.initialize(sdk.MessageCollection.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
8790
.onCacheResult((err, messages) => {
8891
if (err) Logger.error(`[${hookName}/onCacheResult]`, err);
89-
else updateMessages(messages);
92+
else updateMessages(messages, false);
9093
})
9194
.onApiResult((err, messages) => {
9295
if (err) Logger.error(`[${hookName}/onApiResult]`, err);
93-
else updateMessages(messages);
96+
else updateMessages(messages, false);
9497
});
9598

9699
collectionRef.current.setMessageCollectionHandler({
97100
onMessagesAdded(_, __, messages) {
98101
sdk.markAsDelivered(channel.url);
99102
sdk.markAsReadWithChannelUrls([channel.url]);
100-
updateNextMessages(messages);
103+
updateNextMessages(messages, false);
101104
},
102105
onMessagesUpdated(_, __, messages) {
103-
updateNextMessages(messages);
106+
updateNextMessages(messages, false);
104107
},
105108
onMessagesDeleted(_, __, messages) {
106109
deleteMessages(messages);
@@ -116,8 +119,6 @@ export const useGroupChannelMessagesWithCollection = (
116119
init(uid);
117120
},
118121
});
119-
120-
await prev();
121122
}
122123
},
123124
[sdk, channel, options?.collectionCreator],
@@ -147,7 +148,7 @@ export const useGroupChannelMessagesWithCollection = (
147148
const prev = useCallback(async () => {
148149
if (collectionRef.current && collectionRef.current?.hasPrevious) {
149150
const list = await collectionRef.current?.loadPrevious();
150-
updateMessages(list);
151+
updateMessages(list, false);
151152
}
152153
}, []);
153154

@@ -161,7 +162,7 @@ export const useGroupChannelMessagesWithCollection = (
161162
list.push(...nextMessages);
162163
}
163164
if (list.length > 0) {
164-
updateMessages(list);
165+
updateMessages(list, false);
165166
}
166167
}, []);
167168

@@ -170,11 +171,11 @@ export const useGroupChannelMessagesWithCollection = (
170171
const pendingMessage = channel.sendUserMessage(params, (message, error) => {
171172
onSent?.(pendingMessage, error);
172173
if (!error && message) {
173-
updateNextMessages([message]);
174+
updateNextMessages([message], false);
174175
next();
175176
}
176177
});
177-
updateNextMessages([pendingMessage]);
178+
updateNextMessages([pendingMessage], false);
178179
next();
179180

180181
return pendingMessage;
@@ -186,11 +187,11 @@ export const useGroupChannelMessagesWithCollection = (
186187
const pendingMessage = channel.sendFileMessage(params, (message, error) => {
187188
onSent?.(pendingMessage, error);
188189
if (!error && message) {
189-
updateNextMessages([message]);
190+
updateNextMessages([message], false);
190191
next();
191192
}
192193
});
193-
updateNextMessages([pendingMessage]);
194+
updateNextMessages([pendingMessage], false);
194195
next();
195196

196197
return pendingMessage;

0 commit comments

Comments
 (0)