Skip to content

Commit 4abf80c

Browse files
authored
Merge pull request #1078 from GetStream/customActiveChannel-fix
Custom active channel fix
2 parents 0f5d0d0 + 74aecfa commit 4abf80c

File tree

4 files changed

+45
-27
lines changed

4 files changed

+45
-27
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
### Feature
66

77
- Add the ability to open/close list of available commands on click [#1072](https://github.com/GetStream/stream-chat-react/pull/1072)
8+
- Add the ability to set custom active channel on mount even if it's not returned in the initial `queryChannels` response [#1078](https://github.com/GetStream/stream-chat-react/pull/1078)
89

910
### Chore
1011

src/components/ChannelList/ChannelList.tsx

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -207,32 +207,38 @@ const UnMemoizedChannelList = <
207207
* Set a channel with id {customActiveChannel} as active and move it to the top of the list.
208208
* If customActiveChannel prop is absent, then set the first channel in list as active channel.
209209
*/
210-
const activeChannelHandler = (
210+
const activeChannelHandler = async (
211211
channels: Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>,
212212
setChannels: React.Dispatch<React.SetStateAction<Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>>>,
213213
) => {
214-
if (
215-
!channels ||
216-
channels.length === 0 ||
217-
channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)
218-
) {
214+
if (channels.length === 0 || channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
219215
return;
220216
}
221217

222218
if (customActiveChannel) {
223-
const customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
219+
let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
220+
221+
if (!customActiveChannelObject) {
222+
//@ts-expect-error
223+
[customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
224+
}
225+
224226
if (customActiveChannelObject) {
225-
if (setActiveChannel) {
226-
setActiveChannel(customActiveChannelObject, watchers);
227-
}
228-
const newChannels = moveChannelUp(customActiveChannelObject.cid, channels);
227+
setActiveChannel(customActiveChannelObject, watchers);
228+
229+
const newChannels = moveChannelUp({
230+
activeChannel: customActiveChannelObject,
231+
channels,
232+
cid: customActiveChannelObject.cid,
233+
});
234+
229235
setChannels(newChannels);
230236
}
231237

232238
return;
233239
}
234240

235-
if (setActiveChannelOnMount && setActiveChannel) {
241+
if (setActiveChannelOnMount) {
236242
setActiveChannel(channels[0], watchers);
237243
}
238244
};

src/components/ChannelList/hooks/useMessageNewListener.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const useMessageNewListener = <
4242
return uniqBy([channel, ...channels], 'cid');
4343
}
4444

45-
if (!lockChannelOrder) return moveChannelUp(event.cid || '', channels);
45+
if (!lockChannelOrder) return moveChannelUp({ channels, cid: event.cid || '' });
4646

4747
return channels;
4848
});

src/components/ChannelList/utils.ts

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Channel, StreamChat } from 'stream-chat';
2+
import uniqBy from 'lodash.uniqby';
23

34
import type {
45
DefaultAttachmentType,
@@ -30,6 +31,20 @@ export const getChannel = async <
3031

3132
export const MAX_QUERY_CHANNELS_LIMIT = 30;
3233

34+
type MoveChannelUpParams<
35+
At extends DefaultAttachmentType = DefaultAttachmentType,
36+
Ch extends DefaultChannelType = DefaultChannelType,
37+
Co extends DefaultCommandType = DefaultCommandType,
38+
Ev extends DefaultEventType = DefaultEventType,
39+
Me extends DefaultMessageType = DefaultMessageType,
40+
Re extends DefaultReactionType = DefaultReactionType,
41+
Us extends DefaultUserType<Us> = DefaultUserType
42+
> = {
43+
channels: Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>;
44+
cid: string;
45+
activeChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
46+
};
47+
3348
export const moveChannelUp = <
3449
At extends DefaultAttachmentType = DefaultAttachmentType,
3550
Ch extends DefaultChannelType = DefaultChannelType,
@@ -38,22 +53,18 @@ export const moveChannelUp = <
3853
Me extends DefaultMessageType = DefaultMessageType,
3954
Re extends DefaultReactionType = DefaultReactionType,
4055
Us extends DefaultUserType<Us> = DefaultUserType
41-
>(
42-
cid: string,
43-
channels: Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>,
44-
) => {
45-
// get channel index
56+
>({
57+
activeChannel,
58+
channels,
59+
cid,
60+
}: MoveChannelUpParams<At, Ch, Co, Ev, Me, Re, Us>) => {
61+
// get index of channel to move up
4662
const channelIndex = channels.findIndex((channel) => channel.cid === cid);
4763

48-
if (channelIndex <= 0) return channels;
49-
50-
// get channel from channels
51-
const channel = channels[channelIndex];
64+
if (!activeChannel && channelIndex <= 0) return channels;
5265

53-
// remove channel from current position
54-
channels.splice(channelIndex, 1);
55-
// add channel at the start
56-
channels.unshift(channel);
66+
// get channel to move up
67+
const channel = activeChannel || channels[channelIndex];
5768

58-
return [...channels];
69+
return uniqBy([channel, ...channels], 'cid');
5970
};

0 commit comments

Comments
 (0)