Chat SDKs JavaScript v3
Chat SDKs JavaScript
Chat SDKs
JavaScript
Version 3
Sendbird Chat SDK v3 for JavaScript is no longer supported as a new version is released. Check out our latest Chat SDK v4

Group channel collection

Copy link

A GroupChannelCollection allows you to swiftly create a channel list view that doesn’t miss any channel-related events. This page explains how to draw a view using the collection.

Note: Understand the differences between local caching and SyncManager, and learn how to migrate Group channel collection.


Create a collection

Copy link

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 the loadMore()).

var groupChannelFilter = new sb.GroupChannelFilter();
groupChannelFilter.includeEmpty = true;

var groupChannelCollection = sb.GroupChannel.createGroupChannelCollection()
    .setOrder(sb.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE)  // Acceptable values are ` CHRONOLOGICAL`, `LATEST_LAST_MESSAGE`,
                                //`CHANNEL_NAME_ALPHABETICAL`, and `METADATA_VALUE_ALPHABETICAL`.
    .setFilter(groupChannelFilter)
    .build();

Pagination

Copy link

A groupChannelCollection retrieves 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() will first check if there are more channels to load. If true, the loadMore() will fetch them.

The hasMore() should also be called after you've created a groupChannelCollection.

if (groupChannelCollection.hasMore) {
    groupChannelCollection.loadMore().then((channels) => {
        // Add channels to your data source.
    });
}

Channel events

Copy link

Use the groupChannelCollectionHandler to determine how the client app would react 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.

EventCalled when

onChannelAdded

- A new group channel is created as a real-time event.
- New group channels are fetched by changelog sync.

onChannelUpdated

- The channel information that is included in the user's current chat view is updated as a real-time event.
- Updated channel information is fetched during changelog sync.

onChannelDeleted

- A group channel is deleted as a real-time event.
- A channel deletion event is fetched during changelog sync.

var groupChannelCollectionHandler = {
    onChannelsAdded: function (context, channels) {
        // Add new channels to your data source.
    },
    onChannelsUpdated: function (context, channels) {
        // Update the existing channels in your data source.
    },
    onChannelsDeleted: function (context, channelUrls) {
        // Delete the channels with the matching channelUrls from your data source
    },
};
groupChannelCollection.setGroupChannelCollectionHandler(groupChannelCollectionHandler);

Dispose of the collection

Copy link

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

groupChannelCollection.dispose();