Channel details contexts

The contexts of channel details. ChannelDetailsContextProvider holds the channel every part of the screen reads; you render it. The forms and lists render the other providers themselves, each holding a search source or a store. This page lists each provider's props and value. The hooks that read them are on Channel details hooks.

Best practices

• Render ChannelDetailsContextProvider around ChannelDetails, and around every screen of your own that renders a form or a list of channel details, with the same channel.
• Don't render the list providers yourself to use a list, since the lists render their own. Render a provider when you build a list of your own on its search source, or pass searchSource to the list.
• Create a search source of your own once, with useState(() => ...), and activate it. The providers use the source they get as it is.
• Read a source's results with useStateStore(searchSource.state, selector) and a selector at module scope.

Overview

Every hook throws outside its provider. The edit and add members providers read the channel from ChannelDetailsContextProvider, so they need it around them. The list providers take the channel as a prop. Each context is also exported, as ChannelDetailsContext, ChannelEditDetailsContext and so on.

ChannelDetailsContextProvider

ChannelDetailsContextValue:

The value changes when the provider gets another channel. A new channel instance under the same cid counts as another channel.

ChannelEditDetailsProvider

ChannelEditDetailsForm renders it around the edit form, with the form's compressImageQuality and doFileUploadRequest. It's also a notification target in the channel-details panel, so the notifications of saving show in the form.

ChannelEditDetailsProviderProps:

ChannelEditDetailsContextValue:

An empty name unsets the channel's name, and a removed image unsets its image. Each save publishes a success or failure notification.

EditChannelDetailsStore

The provider creates the store once, from the channel's name and image at that moment, so a channel.updated event doesn't overwrite what the user is typing. Mount the provider once for each edit.

setCurrentName(name), setUpdatedImage(image) and setPendingAction(action) change them. useIsNameEdited(store), useIsImageEdited(store) and useAreChannelDetailsEdited(store) say whether anything changed, and re-render only when the answer does.

ChannelAddMembersProvider

ChannelAddMembersForm renders it around the add members form, with the form's searchSource. It's also a notification target in the channel-details panel.

ChannelAddMembersProviderProps:

The default source loads 25 users a page, searches with name: { $autocomplete: query }, and lists every user while the query is empty.

ChannelAddMembersContextValue:

useIsSelected(selectionStore, id) and useIsSelectionEmpty(selectionStore) read the selection, and re-render only when their answer changes.

The list providers

ChannelMemberListProvider, ChannelPinnedMessageListProvider, ChannelMediaListProvider and ChannelFileAttachmentListProvider take the same props:

Their value is { searchSource }. The provider creates the default source when it mounts, even when you pass your own, and keeps it for as long as it's mounted. A list renders the provider with the list's own searchSource prop. The provider builds a new value object each time it renders.

Each loads 25 items a page and allows an empty query. The sources don't follow events. A source shows what the server returned when it last queried.

MessageSearchSource and ChannelMemberSearchSource come from stream-chat. Search sources explains their filters, sort and paging.

Example

A photos screen without videos, with a source of your own passed to MediaList:

import { useState } from "react";
import { View } from "react-native";
import { MessageSearchSource } from "stream-chat";
import type { Channel as StreamChannel } from "stream-chat";
import {
  ChannelDetailsContextProvider,
  MediaList,
  useChatContext,
} from "stream-chat-react-native";

export const ChannelPhotosScreen = ({
  channel,
}: {
  channel: StreamChannel;
}) => {
  const { client } = useChatContext();
  const [searchSource] = useState(() => {
    const source = new MessageSearchSource(client, {
      allowEmptySearchString: true,
      pageSize: 25,
      resetOnNewSearchQuery: false,
    });
    source.messageSearchChannelFilters = {
      cid: channel.cid,
      members: undefined,
    };
    source.messageSearchFilters = {
      "attachments.type": "image",
      type: undefined,
    };
    source.messageSearchSort = [{ field: "created_at", direction: -1 }];
    source.activate();
    return source;
  });

  return (
    <ChannelDetailsContextProvider channel={channel}>
      <View style={{ flex: 1 }}>
        <MediaList searchSource={searchSource} />
      </View>
    </ChannelDetailsContextProvider>
  );
};

members: undefined and type: undefined drop the filters MessageSearchSource adds by default. The grid still shows only the images and videos of the messages it gets, so a message with an image and a video shows both.

Related

• ChannelDetails: the screen.
• Channel details lists: the lists and forms that render these providers.
• Channel details hooks: the hooks that read them.