Chat / JavaScript
Chat JavaScript v4
Chat JavaScript
Chat
JavaScript
Home
/
Chat
/
JavaScript
/
Local caching
This is the new Docs for Chat SDK v4 for JavaScript. To see the previous Docs, click here.

Group channel collection

A GroupChannelCollection instance allows you to swiftly create a channel list view that remains up to date on all channel-related events. This page explains how to draw a view using the collection.


Create a collection

You can create a GroupChannelCollection instance through the createGroupChannelCollection() method. When creating the instance, you can also determine how to filter and order the group channel list.

Once the collection is created, you should call loadMore().

const groupChannelFilter: GroupChannelFilter = new GroupChannelFilter();
groupChannelFilter.includeEmpty = true; // Group channels with no members will be included.

const params: GroupChannelCollectionParams = {
    filter: groupChannelFilter,
    order: GroupChannelListOrder.LATEST_LAST_MESSAGE,
};
const collection: GroupChannelCollection = sb.groupChannel.createGroupChannelCollection(params);

Pagination

A GroupChannelCollection instance can retrieve more channels to display in the channel list view through the loadMore() method.

Whenever a scroll reaches the bottom of the channel list view, the hasMore() method will first check if there are more channels to load. If so, the loadMore() method fetches them.

The hasMore() method should also be called after you've created a GroupChannelCollection instance.

if (collection.hasMore) {
    const channels: GroupChannel[] = await collection.loadMore();
}

Channel events

Use GroupChannelCollectionEventHandler to determine how the client app reacts to channel-related events. This is called whenever a new channel is created as a real-time event or changelog sync is prompted when the client app is back online.

The following table shows possible cases where each event handler can be called.

EventInvoked when

onChannelsAdded

- New group channels are added to the view.
- New group channels are added through background sync, changelog sync, and real-time event.

onChannelsUpdated

- Group channels are updated in the view.
- Channel information is updated through changelog sync and real-time event.

onChannelsDeleted

- Group channels are deleted from the view.
- Channels are deleted through changelog sync and real-time event.

const handler: GroupChannelCollectionEventHandler = {
    onChannelsAdded: (context: GroupChannelEventContext, channels: GroupChannel[]) => {
        // Add new channels to your data source.
    },
    onChannelsUpdated: (context: GroupChannelEventContext, channels: GroupChannel[]) => {
        // Update the existing channels in your data source.
    },
    onChannelsDeleted: (context: GroupChannelEventContext, channelUrls: string[]) => {
        // Delete the channels with the matching channelUrls from your data source.
    },
};
collection.setGroupChannelCollectionHandler(handler);

Dispose of the collection

The dispose() method should be called when you need to clear the current channel list view.

collection.dispose();