Thread List

The thread list contains the user's most recent threads.

Initialization

Call registerSubscriptions() once, so the list and its threads get their events. Call activate() when the list is on screen and deactivate() when it leaves.

client.threads.registerSubscriptions();

// When the list is on screen
client.threads.activate();

// When the list leaves the screen
client.threads.deactivate();

Reading

// The thread list
const { items: threads, isLoading } =
  client.threads.paginator.state.getLatestValue();

// Unread threads
const { unreadThreadCount } = client.threads.state.getLatestValue();

Subscribe to render changes:

const unsubscribe = client.threads.paginator.state.subscribeWithSelector(
  ({ items }) => ({ items }),
  ({ items }) => renderThreadList(items),
);

Loading more threads

toTail() loads the next page into items. hasMoreTail tells you whether there are more to load. A page is 25 threads, and toTail() does nothing until activate() has loaded the first one.

const { hasMoreTail } = client.threads.paginator.state.getLatestValue();

if (hasMoreTail) {
  await client.threads.paginator.toTail();
}

Configure the query

The thread list always holds the user's threads in the server's order: unread threads first, then by latest reply. Each thread comes with up to 10 participants and its 10 latest replies. You can change the page size, 25 threads by default. Set it before activate() loads the first page.

client.threads.paginator.updateConfig({ pageSize: 10 });

WebSocket events

Threads in the list update from WebSocket events: new replies, reactions, read state and thread updates. unreadThreadCount updates too.

The list itself doesn't reorder or grow on its own. A reply to a listed thread sets isThreadOrderStale, and a reply to a thread that isn't in the list adds it to unseenThreadIds. Show a prompt, and call reload() to apply the changes:

const unsubscribeBanner = client.threads.state.subscribeWithSelector(
  ({ isThreadOrderStale, unseenThreadIds }) => ({
    isThreadOrderStale,
    unseenThreadIds,
  }),
  ({ isThreadOrderStale, unseenThreadIds }) =>
    renderReloadPrompt(isThreadOrderStale || unseenThreadIds.length > 0),
);

// When the user taps the prompt
await client.threads.reload();