stream-chat-react-native-core 9.5.0-beta.7 → 9.5.0-beta.8

package/src/contexts/channelEditDetailsContext/ChannelEditDetailsContext.tsx

@@ -1,46 +1,129 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
-import { Channel } from 'stream-chat';
-
-import { EditChannelDetailsStore } from '../../state-store/edit-channel-details-store';
+import { NotificationTargetProvider } from '../../components/Notifications/NotificationTargetContext';
+import { useChannelActions } from '../../hooks/actions/useChannelActions';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import {
+  EditChannelDetailsStore,
+  isImageEdited,
+  isNameEdited,
+} from '../../state-store/edit-channel-details-store';
+import type { File, GlobalFileUploadRequest } from '../../types/types';
+import { useChannelDetailsContext } from '../channelDetailsContext/channelDetailsContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export type ChannelEditDetailsContextValue = {
   store: EditChannelDetailsStore;
+  /**
+   * Saves the edited channel details (name and/or image). Resolves once every
+   * update succeeds and rejects if any of them fail.
+   */
+  submit: () => Promise<void>;
+  /**
+   * Compress image with quality (from 0 to 1, where 1 is best quality) applied
+   * to the channel image picked during editing.
+   */
+  compressImageQuality?: number;
+  /** Override the upload request used to upload the channel image. */
+  doFileUploadRequest?: GlobalFileUploadRequest;
 };
 
+/**
+ * Props for the {@link ChannelEditDetailsProvider} that seed the edit flow
+ * configuration into the context.
+ */
+export type ChannelEditDetailsProviderProps = PropsWithChildren<{
+  /**
+   * Compress image with quality (from 0 to 1, where 1 is best quality) applied
+   * to the channel image picked during editing.
+   */
+  compressImageQuality?: number;
+  /** Override the upload request used to upload the channel image. */
+  doFileUploadRequest?: GlobalFileUploadRequest;
+}>;
+
 export const ChannelEditDetailsContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelEditDetailsContextValue,
 );
 
 /**
- * Creates and provides an {@link EditChannelDetailsStore} snapshotted from the
- * given channel. Mount this once per edit session — the store captures the
- * channel's name/image at construction and does not track later WebSocket
- * updates, so an inbound `channel.updated` does not clobber in-progress edits.
- *
- * @experimental This API is experimental and is subject to change.
+ * Builds the {@link ChannelEditDetailsContextValue}. Rendered inside the
+ * {@link NotificationTargetProvider} so that notifications emitted by `submit`
+ * (via {@link useChannelActions}) resolve to the channel edit details host.
  */
-export const ChannelEditDetailsProvider = ({
-  channel,
+const ChannelEditDetailsContextProviderInner = ({
   children,
-}: PropsWithChildren<{ channel: Channel }>) => {
+  compressImageQuality,
+  doFileUploadRequest,
+}: ChannelEditDetailsProviderProps) => {
+  const { channel } = useChannelDetailsContext();
+  const { updateImage, updateName } = useChannelActions(channel);
   const [store] = useState(() => new EditChannelDetailsStore(channel));
 
+  const submit = useStableCallback(async () => {
+    const state = store.state.getLatestValue();
+    const { currentName, updatedImage } = state;
+    const errors: unknown[] = [];
+    const onFailure = (error: unknown) => errors.push(error);
+    const tasks: Promise<void>[] = [];
+    if (isNameEdited(state)) {
+      tasks.push(updateName(currentName, { onFailure }));
+    }
+    if (isImageEdited(state)) {
+      tasks.push(updateImage(updatedImage as File | null, { onFailure }, doFileUploadRequest));
+    }
+    await Promise.all(tasks);
+    if (errors.length > 0) {
+      throw new AggregateError(errors, 'Failed to update channel details');
+    }
+  });
+
+  const value = useMemo(
+    () => ({
+      compressImageQuality,
+      doFileUploadRequest,
+      store,
+      submit,
+    }),
+    [compressImageQuality, doFileUploadRequest, store, submit],
+  );
+
   return (
-    <ChannelEditDetailsContext.Provider value={{ store }}>
+    <ChannelEditDetailsContext.Provider value={value}>
       {children}
     </ChannelEditDetailsContext.Provider>
   );
 };
 
 /**
- * @experimental This API is experimental and is subject to change.
+ * Creates and provides an {@link EditChannelDetailsStore} snapshotted from the
+ * channel in the {@link ChannelDetailsContext}. Mount this once per edit session — the store captures the
+ * channel's name/image at construction and does not track later WebSocket
+ * updates, so an inbound `channel.updated` does not clobber in-progress edits.
  */
+export const ChannelEditDetailsProvider = ({
+  children,
+  compressImageQuality,
+  doFileUploadRequest,
+}: ChannelEditDetailsProviderProps) => {
+  const { channel } = useChannelDetailsContext();
+
+  return (
+    <NotificationTargetProvider
+      hostId={`channel-edit-details:${channel.cid}`}
+      panel='channel-details'
+    >
+      <ChannelEditDetailsContextProviderInner
+        compressImageQuality={compressImageQuality}
+        doFileUploadRequest={doFileUploadRequest}
+      >
+        {children}
+      </ChannelEditDetailsContextProviderInner>
+    </NotificationTargetProvider>
+  );
+};
+
 export const useChannelEditDetailsContext = () => {
   const contextValue = useContext(
     ChannelEditDetailsContext,

package/src/contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext.tsx

@@ -6,11 +6,7 @@ import { useChatContext } from '..';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export type ChannelFileAttachmentListContextValue = {
-  channel: Channel;
   searchSource: MessageSearchSource;
 };
 
@@ -18,15 +14,13 @@ export const ChannelFileAttachmentListContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelFileAttachmentListContextValue,
 );
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const ChannelFileAttachmentListProvider = ({
   channel,
   children,
-}: PropsWithChildren<{ channel: Channel }>) => {
+  searchSource: searchSourceProp,
+}: PropsWithChildren<{ channel: Channel; searchSource?: MessageSearchSource }>) => {
   const { client } = useChatContext();
-  const [searchSource] = useState(() => {
+  const [defaultSearchSource] = useState(() => {
     const source = new MessageSearchSource(client, {
       allowEmptySearchString: true,
       pageSize: 25,
@@ -41,17 +35,15 @@ export const ChannelFileAttachmentListProvider = ({
     source.activate();
     return source;
   });
+  const searchSource = searchSourceProp ?? defaultSearchSource;
 
   return (
-    <ChannelFileAttachmentListContext.Provider value={{ channel, searchSource }}>
+    <ChannelFileAttachmentListContext.Provider value={{ searchSource }}>
       {children}
     </ChannelFileAttachmentListContext.Provider>
   );
 };
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const useChannelFileAttachmentListContext = () => {
   const contextValue = useContext(
     ChannelFileAttachmentListContext,

package/src/contexts/channelMediaListContext/ChannelMediaListContext.tsx

@@ -6,11 +6,7 @@ import { useChatContext } from '..';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export type ChannelMediaListContextValue = {
-  channel: Channel;
   searchSource: MessageSearchSource;
 };
 
@@ -18,15 +14,13 @@ export const ChannelMediaListContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelMediaListContextValue,
 );
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const ChannelMediaListProvider = ({
   channel,
   children,
-}: PropsWithChildren<{ channel: Channel }>) => {
+  searchSource: searchSourceProp,
+}: PropsWithChildren<{ channel: Channel; searchSource?: MessageSearchSource }>) => {
   const { client } = useChatContext();
-  const [searchSource] = useState(() => {
+  const [defaultSearchSource] = useState(() => {
     const source = new MessageSearchSource(client, {
       allowEmptySearchString: true,
       pageSize: 25,
@@ -42,17 +36,15 @@ export const ChannelMediaListProvider = ({
     source.activate();
     return source;
   });
+  const searchSource = searchSourceProp ?? defaultSearchSource;
 
   return (
-    <ChannelMediaListContext.Provider value={{ channel, searchSource }}>
+    <ChannelMediaListContext.Provider value={{ searchSource }}>
       {children}
     </ChannelMediaListContext.Provider>
   );
 };
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const useChannelMediaListContext = () => {
   const contextValue = useContext(
     ChannelMediaListContext,

package/src/contexts/channelMemberListContext/ChannelMemberListContext.tsx

@@ -5,11 +5,7 @@ import { Channel, ChannelMemberSearchSource } from 'stream-chat';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export type ChannelMemberListContextValue = {
-  channel: Channel;
   searchSource: ChannelMemberSearchSource;
 };
 
@@ -17,14 +13,12 @@ export const ChannelMemberListContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelMemberListContextValue,
 );
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const ChannelMemberListProvider = ({
   channel,
   children,
-}: PropsWithChildren<{ channel: Channel }>) => {
-  const [searchSource] = useState(() => {
+  searchSource: searchSourceProp,
+}: PropsWithChildren<{ channel: Channel; searchSource?: ChannelMemberSearchSource }>) => {
+  const [defaultSearchSource] = useState(() => {
     const source = new ChannelMemberSearchSource(
       channel,
       {
@@ -46,17 +40,15 @@ export const ChannelMemberListProvider = ({
     source.activate();
     return source;
   });
+  const searchSource = searchSourceProp ?? defaultSearchSource;
 
   return (
-    <ChannelMemberListContext.Provider value={{ channel, searchSource }}>
+    <ChannelMemberListContext.Provider value={{ searchSource }}>
       {children}
     </ChannelMemberListContext.Provider>
   );
 };
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const useChannelMemberListContext = () => {
   const contextValue = useContext(
     ChannelMemberListContext,

package/src/contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext.tsx

@@ -6,11 +6,7 @@ import { useChatContext } from '..';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export type ChannelPinnedMessageListContextValue = {
-  channel: Channel;
   searchSource: MessageSearchSource;
 };
 
@@ -18,15 +14,13 @@ export const ChannelPinnedMessageListContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelPinnedMessageListContextValue,
 );
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const ChannelPinnedMessageListProvider = ({
   channel,
   children,
-}: PropsWithChildren<{ channel: Channel }>) => {
+  searchSource: searchSourceProp,
+}: PropsWithChildren<{ channel: Channel; searchSource?: MessageSearchSource }>) => {
   const { client } = useChatContext();
-  const [searchSource] = useState(() => {
+  const [defaultSearchSource] = useState(() => {
     const source = new MessageSearchSource(
       client,
       { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
@@ -46,17 +40,15 @@ export const ChannelPinnedMessageListProvider = ({
     source.activate();
     return source;
   });
+  const searchSource = searchSourceProp ?? defaultSearchSource;
 
   return (
-    <ChannelPinnedMessageListContext.Provider value={{ channel, searchSource }}>
+    <ChannelPinnedMessageListContext.Provider value={{ searchSource }}>
       {children}
     </ChannelPinnedMessageListContext.Provider>
   );
 };
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const useChannelPinnedMessageListContext = () => {
   const contextValue = useContext(
     ChannelPinnedMessageListContext,

package/src/contexts/componentsContext/defaultComponents.ts

@@ -32,7 +32,10 @@ import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/A
 import { InputView } from '../../components/AutoCompleteInput/InputView';
 import { ChannelDetailsContent } from '../../components/ChannelDetails/ChannelDetails';
 import {
-  ChannelAddMembers,
+  ChannelAddMembersButton,
+  ChannelAddMembersForm,
+  ChannelAddMembersFormContent,
+  ChannelAddMembersFormHeader,
   ChannelDetailsActionsSection,
   ChannelDetailsActionItem,
   ChannelDetailsMemberSection,
@@ -40,7 +43,9 @@ import {
   ChannelDetailsProfile,
   ChannelDetailsEditButton,
   ChannelDetailsNavHeader,
-  ChannelEditDetails,
+  ChannelEditDetailsForm,
+  ChannelEditDetailsFormContent,
+  ChannelEditDetailsFormHeader,
   ChannelEditImageSheet,
   ChannelEditName,
   ChannelMemberActionsSheet,
@@ -52,6 +57,8 @@ import {
   MediaList,
   PinnedMessageItem,
   PinnedMessageList,
+  RoleItem,
+  RoleList,
 } from '../../components/ChannelDetails/components';
 import { ChannelListFooterLoadingIndicator } from '../../components/ChannelList/ChannelListFooterLoadingIndicator';
 import { ChannelListHeaderErrorIndicator } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
@@ -319,7 +326,10 @@ const components = {
   ChannelDetailsHeader,
 
   // Channel Details Screen
-  ChannelAddMembers,
+  ChannelAddMembersButton,
+  ChannelAddMembersForm,
+  ChannelAddMembersFormContent,
+  ChannelAddMembersFormHeader,
   ChannelDetailsActionsSection,
   ChannelDetailsActionItem,
   ChannelDetailsMemberSection,
@@ -328,12 +338,16 @@ const components = {
   ChannelDetailsContent,
   ChannelDetailsEditButton,
   ChannelDetailsNavHeader,
-  ChannelEditDetails,
+  ChannelEditDetailsForm,
+  ChannelEditDetailsFormContent,
+  ChannelEditDetailsFormHeader,
   ChannelEditImageSheet,
   ChannelEditName,
   ChannelMemberActionsSheet,
   ChannelMemberItem,
   ChannelMemberList,
+  RoleItem,
+  RoleList,
   FileAttachmentItem,
   FileAttachmentList,
   MediaItem,

package/src/contexts/themeContext/utils/theme.ts

@@ -207,6 +207,7 @@ export type Theme = {
       trailingValue: TextStyle;
     };
     memberSection: {
+      addButtonWrapper: ViewStyle;
       confirmButton: ViewStyle;
       footer: ViewStyle;
       header: ViewStyle;
@@ -216,9 +217,19 @@ export type Theme = {
     memberItem: {
       container: ViewStyle;
       name: TextStyle;
-      role: TextStyle;
       status: TextStyle;
     };
+    roleList: {
+      container: ViewStyle;
+    };
+    roleItem: {
+      container: ViewStyle;
+      ownerBackgroundColor: string;
+      ownerColor: string;
+      roleBackgroundColor: string;
+      roleColor: string;
+      text: TextStyle;
+    };
     memberList: {
       container: ViewStyle;
       list: ViewStyle;
@@ -1322,6 +1333,7 @@ export const defaultTheme: Theme = {
       trailingValue: {},
     },
     memberSection: {
+      addButtonWrapper: {},
       confirmButton: {},
       footer: {},
       header: {},
@@ -1331,9 +1343,19 @@ export const defaultTheme: Theme = {
     memberItem: {
       container: {},
       name: {},
-      role: {},
       status: {},
     },
+    roleList: {
+      container: {},
+    },
+    roleItem: {
+      container: {},
+      ownerBackgroundColor: '',
+      ownerColor: '',
+      roleBackgroundColor: '',
+      roleColor: '',
+      text: {},
+    },
     memberList: {
       container: {},
       list: {},

package/src/hooks/__tests__/useCanAddMembersToChannel.test.tsx

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { useCanAddMembersToChannel } from '../useCanAddMembersToChannel';
+import { useChannelOwnCapabilities } from '../useChannelOwnCapabilities';
+
+jest.mock('../useChannelOwnCapabilities');
+
+const mockedUseChannelOwnCapabilities = useChannelOwnCapabilities as jest.MockedFunction<
+  typeof useChannelOwnCapabilities
+>;
+
+const channel = {} as Channel;
+
+describe('useCanAddMembersToChannel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns true when the user can update channel members', () => {
+    mockedUseChannelOwnCapabilities.mockReturnValue(['update-channel-members']);
+
+    const { result } = renderHook(() => useCanAddMembersToChannel(channel));
+
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false when the update-channel-members capability is missing', () => {
+    mockedUseChannelOwnCapabilities.mockReturnValue([]);
+
+    const { result } = renderHook(() => useCanAddMembersToChannel(channel));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns false when there is no channel', () => {
+    mockedUseChannelOwnCapabilities.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useCanAddMembersToChannel());
+
+    expect(result.current).toBe(false);
+  });
+});

package/src/hooks/__tests__/useCanEditChannel.test.tsx

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { useCanEditChannel } from '../useCanEditChannel';
+import { useChannelOwnCapabilities } from '../useChannelOwnCapabilities';
+
+jest.mock('../useChannelOwnCapabilities');
+
+const mockedUseChannelOwnCapabilities = useChannelOwnCapabilities as jest.MockedFunction<
+  typeof useChannelOwnCapabilities
+>;
+
+const channel = {} as Channel;
+
+describe('useCanEditChannel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns true when the user can update the channel', () => {
+    mockedUseChannelOwnCapabilities.mockReturnValue(['update-channel']);
+
+    const { result } = renderHook(() => useCanEditChannel(channel));
+
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false when the update-channel capability is missing', () => {
+    mockedUseChannelOwnCapabilities.mockReturnValue([]);
+
+    const { result } = renderHook(() => useCanEditChannel(channel));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns false when there is no channel', () => {
+    mockedUseChannelOwnCapabilities.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useCanEditChannel());
+
+    expect(result.current).toBe(false);
+  });
+});

package/src/hooks/index.ts

@@ -6,9 +6,12 @@ export * from './useChannelName';
 export * from './useChannelImage';
 export * from './useChannelMembershipState';
 export * from './useChannelOwnCapabilities';
+export * from './useCanEditChannel';
+export * from './useCanAddMembersToChannel';
 export * from './useChannelMuteActive';
 export * from './useIsDirectChat';
 export * from './useIsChannelMember';
+export * from './useSelectedChannelState';
 export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';

package/src/hooks/useCanAddMembersToChannel.ts

@@ -0,0 +1,9 @@
+import type { Channel } from 'stream-chat';
+
+import { useChannelOwnCapabilities } from './useChannelOwnCapabilities';
+
+/**
+ * Whether the current user can add members to the channel.
+ */
+export const useCanAddMembersToChannel = (channel?: Channel) =>
+  useChannelOwnCapabilities(channel)?.includes('update-channel-members') ?? false;

package/src/hooks/useCanEditChannel.ts

@@ -0,0 +1,9 @@
+import type { Channel } from 'stream-chat';
+
+import { useChannelOwnCapabilities } from './useChannelOwnCapabilities';
+
+/**
+ * Whether the current user can update (edit) the channel.
+ */
+export const useCanEditChannel = (channel?: Channel) =>
+  useChannelOwnCapabilities(channel)?.includes('update-channel') ?? false;

package/src/hooks/useIsDirectChat.ts

@@ -5,13 +5,13 @@ import type { Channel } from 'stream-chat';
 import { useChannelMembersState } from '../components/ChannelList/hooks/useChannelMembersState';
 import { useChatContext } from '../contexts';
 
-export const useIsDirectChat = (channel: Channel) => {
+export const useIsDirectChat = (channel?: Channel) => {
   const { client } = useChatContext();
   const ownUserId = client.userID;
   const members = useChannelMembersState(channel);
 
   const otherMembers = useMemo(
-    () => Object.values(members).filter((member) => member.user?.id !== ownUserId),
+    () => Object.values(members ?? {}).filter((member) => member.user?.id !== ownUserId),
     [members, ownUserId],
   );