stream-chat-react-native-core 9.10.1 → 10.0.0-rc.1

package/src/components/ChannelList/__tests__/ChannelListView.test.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-import type { Channel, QueryChannelsRequestType, StreamChat } from 'stream-chat';
+import { FlatList } from 'react-native';
+
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import { ChannelPaginator } from 'stream-chat';
+import type { Channel, ChannelPaginatorOptions, StreamChat, UserResponse } from 'stream-chat';
 
 import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
-import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
@@ -18,30 +20,28 @@ let chatClient: StreamChat;
 let defaultChannels: Channel[];
 let queryChannelsResponse: Channel[];
 
-const queryChannelsOverride: QueryChannelsRequestType = () =>
-  Promise.resolve(queryChannelsResponse);
+const doRequest: NonNullable<ChannelPaginatorOptions['paginatorOptions']>['doRequest'] = () =>
+  Promise.resolve({ items: queryChannelsResponse });
 
 /**
  * Renders the full ChannelList (which now always uses ChannelListView internally).
  */
-const Component = () => (
-  <Chat client={chatClient}>
-    <ChatContext.Consumer>
-      {(context) => (
-        <ChatProvider value={{ ...context, isOnline: true }}>
-          <ChannelList
-            filters={{
-              members: {
-                $in: ['vishal', 'neil'],
-              },
-            }}
-            queryChannelsOverride={queryChannelsOverride}
-          />
-        </ChatProvider>
-      )}
-    </ChatContext.Consumer>
-  </Chat>
-);
+const Component = () => {
+  const [paginator] = useState(
+    () =>
+      new ChannelPaginator({
+        client: chatClient,
+        filters: { members: { $in: ['vishal', 'neil'] } },
+        paginatorOptions: { doRequest },
+      }),
+  );
+
+  return (
+    <Chat client={chatClient}>
+      <ChannelList paginator={paginator} />
+    </Chat>
+  );
+};
 
 const noop = () => {};
 
@@ -57,42 +57,36 @@ const ComponentWithContextOverrides = ({
   loadingChannels: boolean;
 }) => (
   <Chat client={chatClient}>
-    <ChatContext.Consumer>
-      {(context) => (
-        <ChatProvider value={{ ...context, isOnline: true }}>
-          <ChannelsProvider
-            value={
-              {
-                additionalFlatListProps: {},
-                channelListInitialized: !loadingChannels && !error,
-                channels: error ? null : [],
-                error: error ? new Error('test error') : undefined,
-                forceUpdate: 0,
-                hasNextPage: false,
-                loadingChannels,
-                loadingNextPage: false,
-                loadMoreThreshold: 0.1,
-                loadNextPage: noop,
-                maxUnreadCount: 255,
-                numberOfSkeletons: 8,
-                refreshing: false,
-                refreshList: noop,
-                reloadList: noop,
-                setFlatListRef: noop,
-              } as unknown as ChannelsContextValue
-            }
-          >
-            <ChannelListView />
-          </ChannelsProvider>
-        </ChatProvider>
-      )}
-    </ChatContext.Consumer>
+    <ChannelsProvider
+      value={
+        {
+          additionalFlatListProps: {},
+          loadMoreThreshold: 0.1,
+          loadNextPage: noop,
+          maxUnreadCount: 255,
+          numberOfSkeletons: 8,
+          refreshList: noop,
+          reloadList: noop,
+          setFlatListRef: noop,
+        } as unknown as ChannelsContextValue
+      }
+    >
+      <ChannelListView
+        channelListInitialized={!loadingChannels && !error}
+        channels={error ? null : []}
+        error={error ? new Error('test error') : undefined}
+        hasNextPage={false}
+        loadingChannels={loadingChannels}
+        loadingNextPage={false}
+        refreshing={false}
+      />
+    </ChannelsProvider>
   </Chat>
 );
 
 describe('ChannelListView', () => {
   beforeAll(async () => {
-    chatClient = await getTestClientWithUser({ id: 'vishal' });
+    chatClient = await getTestClientWithUser({ id: 'vishal' } as UserResponse);
     const c1 = generateChannelResponse();
     const c2 = generateChannelResponse();
     useMockedApis(chatClient, [getOrCreateChannelApi(c1)]);
@@ -134,6 +128,49 @@ describe('ChannelListView', () => {
     });
   });
 
+  it('loads the next page every time the end is reached', () => {
+    const loadNextPage = jest.fn();
+    const Listing = ({ channels = null }: { channels?: Channel[] | null }) => (
+      <Chat client={chatClient}>
+        <ChannelsProvider
+          value={
+            {
+              additionalFlatListProps: {},
+              loadMoreThreshold: 0.1,
+              loadNextPage,
+              maxUnreadCount: 255,
+              numberOfSkeletons: 8,
+              refreshList: noop,
+              reloadList: noop,
+              setFlatListRef: noop,
+            } as unknown as ChannelsContextValue
+          }
+        >
+          <ChannelListView
+            channelListInitialized={channels !== null}
+            channels={channels}
+            hasNextPage={true}
+            loadingChannels={channels === null}
+            loadingNextPage={false}
+            refreshing={false}
+          />
+        </ChannelsProvider>
+      </Chat>
+    );
+
+    const { rerender, UNSAFE_getByType } = render(<Listing />);
+    const reachEnd = () =>
+      act(() => UNSAFE_getByType(FlatList).props.onEndReached({ distanceFromEnd: 0 }));
+    // An empty list reaches its end as soon as it mounts.
+    reachEnd();
+
+    rerender(<Listing channels={defaultChannels} />);
+    reachEnd();
+    // Reaching the end again within the same drag, after a page has arrived, loads the next one too.
+    reachEnd();
+    expect(loadNextPage).toHaveBeenCalledTimes(3);
+  });
+
   it('renders the `LoadingIndicator` when when channels have not yet loaded', async () => {
     const { getByTestId } = render(
       <ComponentWithContextOverrides error={false} loadingChannels={true} />,

package/src/components/ChannelList/hooks/__tests__/useChannelMembersState.test.tsx

@@ -0,0 +1,66 @@
+import { StateStore } from '@stream-io/state-store';
+import { act, renderHook } from '@testing-library/react-native';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { useChannelMembersState } from '../useChannelMembersState';
+
+const member = (id: string, name: string, online = false) =>
+  ({ user: { id, name, online } }) as unknown as ChannelMemberResponse;
+
+const pickName = (m: ChannelMemberResponse) => ({ name: m.user?.name });
+
+describe('useChannelMembersState', () => {
+  let state: StateStore<{ members: Record<string, ChannelMemberResponse> }>;
+  let channel: Channel;
+
+  beforeEach(() => {
+    state = new StateStore<{ members: Record<string, ChannelMemberResponse> }>({
+      members: { a: member('a', 'A'), b: member('b', 'B') },
+    });
+    channel = { cid: 'messaging:test', state } as unknown as Channel;
+  });
+
+  const renderCounted = (pick?: typeof pickName) => {
+    let renders = 0;
+    const hook = renderHook(() => {
+      renders += 1;
+      return useChannelMembersState(channel, pick);
+    });
+    const rendersBefore = renders;
+    return { ...hook, rendersSince: () => renders - rendersBefore };
+  };
+
+  it('re-renders on every members change without a pick', () => {
+    const { rendersSince } = renderCounted();
+
+    act(() => state.next({ members: { a: member('a', 'A', true), b: member('b', 'B') } }));
+
+    expect(rendersSince()).toBe(1);
+  });
+
+  it('keeps the members when no picked field changed', () => {
+    const { result, rendersSince } = renderCounted(pickName);
+    const members = result.current;
+
+    act(() => state.next({ members: { a: member('a', 'A', true), b: member('b', 'B') } }));
+
+    expect(rendersSince()).toBe(0);
+    expect(result.current).toBe(members);
+  });
+
+  it('updates when a picked field changes', () => {
+    const { result } = renderCounted(pickName);
+
+    act(() => state.next({ members: { a: member('a', 'Renamed'), b: member('b', 'B') } }));
+
+    expect(result.current.a.user?.name).toBe('Renamed');
+  });
+
+  it('updates when a member leaves', () => {
+    const { result } = renderCounted(pickName);
+
+    act(() => state.next({ members: { a: member('a', 'A') } }));
+
+    expect(Object.keys(result.current)).toEqual(['a']);
+  });
+});

package/src/components/ChannelList/hooks/__tests__/useMutedChannels.test.tsx

@@ -0,0 +1,37 @@
+import { act, renderHook } from '@testing-library/react-native';
+import type { ChannelMute, StreamChat } from 'stream-chat';
+
+import type { ChatContextValue } from '../../../../contexts/chatContext/ChatContext';
+import * as ChatContext from '../../../../contexts/chatContext/ChatContext';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { useMutedChannels } from '../useMutedChannels';
+
+describe('useMutedChannels', () => {
+  let client: StreamChat;
+
+  beforeEach(async () => {
+    client = await getTestClientWithUser({ id: 'me' });
+    jest
+      .spyOn(ChatContext, 'useChatContext')
+      .mockImplementation(() => ({ client }) as unknown as ChatContextValue);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('follows the client muted channels without being handed a channel', () => {
+    const { result } = renderHook(() => useMutedChannels());
+    expect(result.current).toEqual([]);
+
+    const channelMutes = [{ channel: { cid: 'messaging:muted' } }] as unknown as ChannelMute[];
+    act(() => {
+      client.dispatchEvent({
+        me: { channel_mutes: channelMutes },
+        type: 'notification.channel_mutes_updated',
+      } as unknown as Parameters<StreamChat['dispatchEvent']>[0]);
+    });
+
+    expect(result.current).toBe(channelMutes);
+  });
+});

package/src/components/ChannelList/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './listeners/useChannelUpdated';
 export * from './useChannelMembersState';
 export * from './useChannelOnlineMemberCount';
 export * from './useMutedChannels';

package/src/components/ChannelList/hooks/useChannelMembersState.ts

@@ -1,21 +1,62 @@
-import { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';
-
-import { useSelectedChannelState } from '../../../hooks/useSelectedChannelState';
-
-const selector = (channel: Channel) => channel.state.members;
-const keys: EventTypes[] = [
-  'member.added',
-  'member.updated',
-  'member.removed',
-  'user.banned',
-  'user.unbanned',
-  'user.presence.changed',
-  'user.updated',
-];
-export function useChannelMembersState(channel: Channel): Record<string, ChannelMemberResponse>;
+import { useMemo } from 'react';
+
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+
+type MembersState = { members: Record<string, ChannelMemberResponse> };
+
+/**
+ * The fields of a member a caller reads. Define it at module scope, so it stays the same function.
+ */
+export type ChannelMemberPick = (member: ChannelMemberResponse) => Record<string, unknown>;
+
+const selector = (state: MembersState) => ({
+  members: state.members,
+});
+
+const isShallowEqual = (a: Record<string, unknown>, b: Record<string, unknown>) => {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+
+// keeps the previous members while every member's picked fields are unchanged
+const createPickedMembersSelector = (pick: ChannelMemberPick) => {
+  let previous: { members: MembersState['members']; picked: Record<string, unknown>[] } | undefined;
+  return (state: MembersState) => {
+    const picked = Object.values(state.members).map(pick);
+    const last = previous;
+    if (
+      last &&
+      picked.length === last.picked.length &&
+      picked.every((fields, i) => isShallowEqual(fields, last.picked[i]))
+    ) {
+      return { members: last.members };
+    }
+    previous = { members: state.members, picked };
+    return { members: state.members };
+  };
+};
+
+/**
+ * Returns the channel's members, sourced reactively from `channel.state`.
+ *
+ * With `pick`, the members update only when one of the picked fields changes for some member, or
+ * when members join or leave. A presence change replaces every member object of that user, so a caller
+ * that does not read `online` should pick what it reads to skip those re-renders.
+ */
+export function useChannelMembersState(
+  channel: Channel,
+  pick?: ChannelMemberPick,
+): Record<string, ChannelMemberResponse>;
 export function useChannelMembersState(
   channel?: Channel,
+  pick?: ChannelMemberPick,
 ): Record<string, ChannelMemberResponse> | undefined;
-export function useChannelMembersState(channel?: Channel) {
-  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+export function useChannelMembersState(channel?: Channel, pick?: ChannelMemberPick) {
+  const membersSelector = useMemo(
+    () => (pick ? createPickedMembersSelector(pick) : selector),
+    [pick],
+  );
+  return useStateStore(channel?.state, membersSelector)?.members;
 }

package/src/components/ChannelList/hooks/useChannelOnlineMemberCount.ts

@@ -1,17 +1,15 @@
-import { Channel, EventTypes } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts';
-import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+import { useStateStore } from '../../../hooks/useStateStore';
 
-const selector = (channel: Channel) => {
-  return channel.state.watcher_count ?? 0;
-};
-
-const keys: EventTypes[] = ['user.watching.start', 'user.watching.stop'];
+const selector = (state: { watcherCount: number }) => ({ watcherCount: state.watcherCount });
 
+/**
+ * Returns the channel's online (watcher) count, sourced reactively from
+ * `channel.state`.
+ */
 export function useChannelOnlineMemberCount(channel: Channel): number;
 export function useChannelOnlineMemberCount(channel?: Channel): number | undefined;
 export function useChannelOnlineMemberCount(channel?: Channel) {
-  const { client } = useChatContext();
-  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+  return useStateStore(channel?.state, selector)?.watcherCount;
 }

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -4,76 +4,51 @@ import type { ChannelsContextValue } from '../../../contexts/channelsContext/Cha
 
 export const useCreateChannelsContext = ({
   additionalFlatListProps,
-  channelListInitialized,
-  channels,
-  error,
-  forceUpdate,
-  hasNextPage,
-  loadingChannels,
-  loadingNextPage,
+  getChannelActionItems,
   loadMoreThreshold,
   loadNextPage,
   maxUnreadCount,
+  mutedStatusPosition,
   numberOfSkeletons,
   onSelect,
-  getChannelActionItems,
-  swipeActionsEnabled,
-  refreshing,
+  paginator,
+  pinnedStatusPosition,
   refreshList,
   reloadList,
   setFlatListRef,
-  mutedStatusPosition,
-  pinnedStatusPosition,
-}: ChannelsContextValue) => {
-  const channelValueString = channels
-    ?.map(
-      (channel) =>
-        `${channel.data?.name ?? ''}${channel.id ?? ''}${
-          channel?.state?.unreadCount ?? ''
-        }${Object.values(channel.state.members)
-          .map((member) => member.user?.online)
-          .join()}`,
-    )
-    .join();
-  const channelsContext: ChannelsContextValue = useMemo(
+  swipeActionsEnabled,
+}: ChannelsContextValue) =>
+  useMemo<ChannelsContextValue>(
     () => ({
       additionalFlatListProps,
-      channelListInitialized,
-      channels,
-      error,
-      forceUpdate,
-      hasNextPage,
-      loadingChannels,
-      loadingNextPage,
+      getChannelActionItems,
       loadMoreThreshold,
       loadNextPage,
       maxUnreadCount,
+      mutedStatusPosition,
       numberOfSkeletons,
       onSelect,
-      getChannelActionItems,
-      swipeActionsEnabled,
-      refreshing,
+      paginator,
+      pinnedStatusPosition,
       refreshList,
       reloadList,
       setFlatListRef,
-      mutedStatusPosition,
-      pinnedStatusPosition,
+      swipeActionsEnabled,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      channelValueString,
-      error,
-      forceUpdate,
-      hasNextPage,
-      loadingChannels,
-      loadingNextPage,
-      channelListInitialized,
-      swipeActionsEnabled,
-      refreshing,
+      additionalFlatListProps,
+      getChannelActionItems,
+      loadMoreThreshold,
+      loadNextPage,
+      maxUnreadCount,
       mutedStatusPosition,
+      numberOfSkeletons,
+      onSelect,
+      paginator,
       pinnedStatusPosition,
+      refreshList,
+      reloadList,
+      setFlatListRef,
+      swipeActionsEnabled,
     ],
   );
-
-  return channelsContext;
-};

package/src/components/ChannelList/hooks/useMutedChannels.ts

@@ -1,18 +1,15 @@
-import { Channel, ChannelMute, EventTypes, StreamChat } from 'stream-chat';
+import type { ChannelMute, EventType, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
-import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+import { useSyncClientEvents } from '../../../hooks/useSyncClientEvents';
 
-const selector = (_channel: Channel, client: StreamChat) => client.mutedChannels;
-const keys: EventTypes[] = [
-  'health.check',
-  'notification.channel_mutes_updated',
-  'channel.muted',
-  'channel.unmuted',
-];
-export function useMutedChannels(channel: Channel): Array<ChannelMute>;
-export function useMutedChannels(channel?: Channel): Array<ChannelMute> | undefined;
-export function useMutedChannels(channel?: Channel) {
+const selector = (client: StreamChat) => client.mutedChannels;
+const keys: EventType[] = ['health.check', 'notification.channel_mutes_updated'];
+
+/**
+ * Returns the current user's muted channels.
+ */
+export const useMutedChannels = (): Array<ChannelMute> => {
   const { client } = useChatContext();
-  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
-}
+  return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });
+};

package/src/components/ChannelList/hooks/useMutedUsers.ts

@@ -1,19 +1,14 @@
-import { Channel, EventTypes, Mute, StreamChat } from 'stream-chat';
+import type { UserMuteResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
-import { useSyncClientEvents } from '../../../hooks/useSyncClientEvents';
+import { useStateStore } from '../../../hooks/useStateStore';
 
-const selector = (client: StreamChat) => client.mutedUsers;
-const keys: EventTypes[] = ['health.check', 'notification.mutes_updated'];
+const selector = (state: { mutedUsers: UserMuteResponse[] }) => ({ mutedUsers: state.mutedUsers });
 
-export function useMutedUsers(): Array<Mute>;
 /**
- *
- * @param @deprecated _channel - This parameter is deprecated because it is no longer necessary. It is kept for backwards compatibility only.
- * @returns
+ * Returns the current user's muted users, sourced reactively from `client.mutedUsersStore`.
  */
-export function useMutedUsers(_channel: Channel): Array<Mute> | undefined;
-export function useMutedUsers(_channel?: Channel): Array<Mute> {
+export function useMutedUsers(): UserMuteResponse[] {
   const { client } = useChatContext();
-  return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });
+  return useStateStore(client?.mutedUsersStore, selector)?.mutedUsers ?? [];
 }