Setting up client & connection...
;
+ if (!client) return Setting up client & connection...
;
return (
-
-
@@ -137,9 +140,12 @@ const App = () => {
const initChannel = async () => {
const channel = client.channel('messaging', 'react-tutorial', {
- image: 'https://getstream.io/random_png/?name=react-v14',
- name: 'Talk about React',
members: [userId],
+ // custom channel fields live under `custom` since v10
+ custom: {
+ image: 'https://getstream.io/random_png/?name=react-v14',
+ name: 'Talk about React',
+ },
});
await channel.watch();
diff --git a/examples/tutorial/src/5-custom-attachment-type/App.tsx b/examples/tutorial/src/5-custom-attachment-type/App.tsx
index f69598573..6e14b9a3e 100644
--- a/examples/tutorial/src/5-custom-attachment-type/App.tsx
+++ b/examples/tutorial/src/5-custom-attachment-type/App.tsx
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import type {
Attachment as AttachmentType,
+ ClientUser,
Channel as StreamChannel,
- User,
} from 'stream-chat';
import {
Attachment,
@@ -20,7 +20,7 @@ import {
import './layout.css';
import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
-const user: User = {
+const user: ClientUser = {
id: userId,
name: userName,
image: `https://getstream.io/random_png/?name=${userName}`,
@@ -28,10 +28,14 @@ const user: User = {
const attachments: AttachmentType[] = [
{
- image: 'https://images-na.ssl-images-amazon.com/images/I/71k0cry-ceL._SL1500_.jpg',
- name: 'iPhone',
type: 'product',
- url: 'https://goo.gl/ppFmcR',
+ // fields that are not part of the Attachment API go under `custom` — this example declares them
+ // through module augmentation in ./stream-chat.d.ts
+ custom: {
+ image: 'https://images-na.ssl-images-amazon.com/images/I/71k0cry-ceL._SL1500_.jpg',
+ name: 'iPhone',
+ url: 'https://goo.gl/ppFmcR',
+ },
},
];
@@ -55,14 +59,16 @@ const CustomAttachment = (props: AttachmentProps) => {
{displayTitle ?? channel.data?.name ?? 'Unnamed Channel'}
- {latestMessagePreview ? (
- {latestMessagePreview}
+ {displayTitle ?? channel.data?.custom?.name ?? 'Unnamed Channel'}
+ {previewedMessage ? (
+
+
) : null}
Product recommendation
-
+
{attachment.name}
+
+ {attachment.custom?.name}
+
);
@@ -84,21 +90,27 @@ const App = () => {
const initChannel = async () => {
const channel = client.channel('messaging', 'react-tutorial-products', {
- image: 'https://getstream.io/random_png/?name=products',
- name: 'Product recommendations',
members: [userId],
+ custom: {
+ image: 'https://getstream.io/random_png/?name=products',
+ name: 'Product recommendations',
+ },
});
await channel.watch();
- const hasProductMessage = channel.state.messages.some((message) =>
+ // messages are no longer kept on channel.state — the paginator owns the list
+ const hasProductMessage = (channel.messagePaginator.items ?? []).some((message) =>
message.attachments?.some(isProductAttachment),
);
if (!hasProductMessage) {
+ // the message payload is nested under `message` since v10
await channel.sendMessage({
- text: 'Your selected product is out of stock, would you like to select one of these alternatives?',
- attachments,
+ message: {
+ text: 'Your selected product is out of stock, would you like to select one of these alternatives?',
+ attachments,
+ },
});
}
diff --git a/examples/tutorial/src/6-emoji-picker/App.tsx b/examples/tutorial/src/6-emoji-picker/App.tsx
index d8df79a70..ba69e011e 100644
--- a/examples/tutorial/src/6-emoji-picker/App.tsx
+++ b/examples/tutorial/src/6-emoji-picker/App.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import type { User } from 'stream-chat';
+import type { ClientUser } from 'stream-chat';
import {
Channel,
ChannelHeader,
@@ -20,7 +20,7 @@ import data from '@emoji-mart/data';
import './layout.css';
import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
-const user: User = {
+const user: ClientUser = {
id: userId,
name: userName,
image: `https://getstream.io/random_png/?name=${userName}`,
@@ -62,9 +62,12 @@ const App = () => {
const initChannel = async () => {
const channel = client.channel('messaging', 'react-tutorial', {
- image: 'https://getstream.io/random_png/?name=react-v14',
- name: 'Talk about React',
members: [userId],
+ // custom channel fields live under `custom` since v10
+ custom: {
+ image: 'https://getstream.io/random_png/?name=react-v14',
+ name: 'Talk about React',
+ },
});
await channel.watch();
diff --git a/examples/tutorial/src/7-livestream/App.tsx b/examples/tutorial/src/7-livestream/App.tsx
index 740aefcc7..7e4200a4d 100644
--- a/examples/tutorial/src/7-livestream/App.tsx
+++ b/examples/tutorial/src/7-livestream/App.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import type { Channel as StreamChannel, User } from 'stream-chat';
+import type { Channel as StreamChannel, ClientUser } from 'stream-chat';
import {
Channel,
ChannelHeader,
@@ -12,7 +12,7 @@ import {
import './layout.css';
import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
-const user: User = {
+const user: ClientUser = {
id: userId,
name: userName,
image: `https://getstream.io/random_png/?name=${userName}`,
@@ -31,8 +31,11 @@ const App = () => {
const initChannel = async () => {
const spaceChannel = chatClient.channel('livestream', 'spacex', {
- image: 'https://goo.gl/Zefkbx',
- name: 'SpaceX launch discussion',
+ // custom channel fields live under `custom` since v10
+ custom: {
+ image: 'https://goo.gl/Zefkbx',
+ name: 'SpaceX launch discussion',
+ },
});
await spaceChannel.watch();
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index 24794d22a..4e7f68474 100644
--- a/examples/vite/src/App.tsx
+++ b/examples/vite/src/App.tsx
@@ -15,7 +15,6 @@ import type {
} from 'stream-chat';
import {
ChannelPaginator,
- ChannelPaginatorsOrchestrator,
ChannelSearchSource,
createActiveCommandGuardMiddleware,
createCommandInjectionMiddleware,
@@ -130,6 +129,7 @@ const requestOptions: ChannelPaginatorRequestOptions = {
};
const sort: ChannelSort = [
+ { direction: -1, field: 'pinned_at' },
{ direction: -1, field: 'last_message_at' },
{ direction: -1, field: 'updated_at' },
];
@@ -342,8 +342,11 @@ const App = () => {
});
}, [chatClient]);
- const filters: ChannelFilters = useMemo(
- () => ({
+ useEffect(() => {
+ if (!chatClient) return;
+ const { channelManager } = chatClient;
+
+ const filters: ChannelFilters = {
$or: [
{
members: { $in: [userId] },
@@ -365,42 +368,8 @@ const App = () => {
],
},
],
- }),
- [userId],
- );
+ };
- // Four channel lists driven by one orchestrator:
- // - `channels:default` (main): the app `filters`, minus archived and muted channels.
- // - `channels:archived`: the user's archived channels.
- // - `channels:muted`: the user's muted channels.
- // - `channels:opened` (fallback): empty filter, seeded empty so it never auto-queries — holds
- // channels opened from search that don't match any of the above.
- // The priority ownership resolver decides where a channel that matches several lists lands
- // (archived > muted > default > opened), so e.g. an archived channel stays out of the main list.
- // `orchestrator.ingestChannel` (search/DM open, and the mute handler below) re-evaluates a
- // channel against every list and routes it accordingly.
- const channelPaginatorsOrchestrator = useMemo(() => {
- if (!chatClient) return undefined;
- const main = new ChannelPaginator({
- client: chatClient,
- filters: { ...filters, archived: false, muted: false },
- id: 'channels:default',
- paginatorOptions: { pageSize: CHANNELS_PAGE_SIZE },
- requestOptions,
- sort,
- });
- const archived = new ChannelPaginator({
- client: chatClient,
- filters: { ...filters, archived: true },
- id: 'channels:archived',
- sort,
- });
- const muted = new ChannelPaginator({
- client: chatClient,
- filters: { ...filters, muted: true },
- id: 'channels:muted',
- sort,
- });
const fallback = new ChannelPaginator({
client: chatClient,
filters: {},
@@ -409,39 +378,45 @@ const App = () => {
// Seed an empty loaded page so the catch-all list doesn't auto-query on mount.
fallback.setItems({ isLastPage: true, valueOrFactory: [] });
- // The orchestrator has no built-in mute handler, so muting/unmuting wouldn't move a channel
- // between lists on its own. Enrich the default handlers: when the user's channel mutes change,
- // re-route every loaded channel (ingestChannel re-evaluates ownership per channel, so a newly
- // muted channel leaves the main list for the muted one and an unmuted channel returns).
- const eventHandlers = ChannelPaginatorsOrchestrator.getDefaultHandlers();
- eventHandlers['notification.channel_mutes_updated'] = [
- {
- id: 'example:channel-mutes-updated',
- handle: ({ ctx: { orchestrator } }) => {
- const seen = new Set
+ {item.cid}
+
+);
+
+const setupClient = async () => {
+ const client = await getTestClientWithUser({ id: 'user_x' });
+ // no list in these tests should reach the network — they are seeded instead
+ vi.spyOn(client, 'queryChannelsAndHydrate').mockRejectedValue(
+ new Error('unexpected channel query'),
+ );
+ return client;
+};
+
+/** A paginator with a single loaded page, so it renders a list without querying. */
+const seededPaginator = (client: StreamChat, id: string) => {
+ const paginator = new ChannelPaginator({ client, id });
+ paginator.setItems({
+ isLastPage: true,
+ valueOrFactory: [client.channel('messaging', id.replace(':', '-'))],
+ });
+ return paginator;
+};
+
+const renderLists = (client: StreamChat, paginators: ChannelPaginatorType[]) => {
+ paginators.forEach((paginator) => client.channelManager.insertPaginator({ paginator }));
+ return render(
+