stream-chat-react-native-core 9.3.1 → 9.4.0-beta.10

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

@@ -185,6 +185,72 @@ export type Theme = {
       standardText: TextStyle;
     };
   };
+  channelDetails: {
+    container: ViewStyle;
+    scrollContent: ViewStyle;
+    header: {
+      container: ViewStyle;
+      title: TextStyle;
+    };
+    profile: {
+      container: ViewStyle;
+      heading: ViewStyle;
+      subtitle: TextStyle;
+      title: TextStyle;
+    };
+    sectionCard: ViewStyle;
+    actionItem: {
+      container: ViewStyle;
+      destructiveLabel: TextStyle;
+      iconWrapper: ViewStyle;
+      label: TextStyle;
+      trailingValue: TextStyle;
+    };
+    memberSection: {
+      confirmButton: ViewStyle;
+      footer: ViewStyle;
+      header: ViewStyle;
+      headerTitle: TextStyle;
+      viewAllLabel: TextStyle;
+    };
+    memberItem: {
+      container: ViewStyle;
+      name: TextStyle;
+      role: TextStyle;
+      status: TextStyle;
+    };
+    memberActionsSheet: {
+      actionsList: ViewStyle;
+      container: ViewStyle;
+      header: ViewStyle;
+    };
+    editImageSheet: {
+      actionsList: ViewStyle;
+      container: ViewStyle;
+      header: ViewStyle;
+      headerTitle: TextStyle;
+    };
+    modal: {
+      body: ViewStyle;
+      header: ViewStyle;
+      headerTitle: TextStyle;
+      root: ViewStyle;
+    };
+    addMembers: {
+      searchResultItem: {
+        alreadyMemberInfo: ViewStyle;
+        memberLabel: TextStyle;
+        userName: TextStyle;
+        userRow: ViewStyle;
+      };
+    };
+    editChannel: {
+      avatarSection: ViewStyle;
+      container: ViewStyle;
+      nameInput: ViewStyle;
+      uploadButton: ViewStyle;
+    };
+  };
   channelListSkeleton: {
     animationTime: number;
     avatar: ViewStyle;
@@ -210,17 +276,37 @@ export type Theme = {
     textContainer: ViewStyle;
     timestamp: ViewStyle;
   };
+  memberListSkeleton: {
+    animationTime: number;
+    avatar: ViewStyle;
+    container: ViewStyle;
+    content: ViewStyle;
+    subtitle: ViewStyle;
+    textContainer: ViewStyle;
+    title: ViewStyle;
+  };
+  userListSkeleton: {
+    animationTime: number;
+    avatar: ViewStyle;
+    container: ViewStyle;
+    content: ViewStyle;
+    subtitle: ViewStyle;
+    textContainer: ViewStyle;
+    title: ViewStyle;
+  };
   channelPreview: {
     container: ViewStyle;
     contentContainer: ViewStyle;
     date: TextStyle;
     mutedStatus: IconProps;
+    pinnedStatus: IconProps;
     messageDeliveryStatus: {
       container: ViewStyle;
       text: TextStyle;
       checkAllIcon: IconProps;
       checkIcon: IconProps;
       timeIcon: IconProps;
+      username: TextStyle;
     };
     lowerRow: ViewStyle;
     title: TextStyle;
@@ -250,6 +336,10 @@ export type Theme = {
     container: ViewStyle;
     text: TextStyle;
   };
+  emptySearchResult: {
+    container: ViewStyle;
+    text: TextStyle;
+  };
   emptyStateIndicator: {
     channelContainer: ViewStyle;
     channelDetails: TextStyle;
@@ -990,6 +1080,10 @@ export type Theme = {
     };
   };
   screenPadding: number;
+  selectionCircle: {
+    circle: ViewStyle;
+    circleSelected: ViewStyle;
+  };
   spinner: ViewStyle;
   thread: {
     newThread: {
@@ -1138,6 +1232,72 @@ export const defaultTheme: Theme = {
       standardText: {},
     },
   },
+  channelDetails: {
+    container: {},
+    scrollContent: {},
+    header: {
+      container: {},
+      title: {},
+    },
+    profile: {
+      container: {},
+      heading: {},
+      subtitle: {},
+      title: {},
+    },
+    sectionCard: {},
+    actionItem: {
+      container: {},
+      destructiveLabel: {},
+      iconWrapper: {},
+      label: {},
+      trailingValue: {},
+    },
+    memberSection: {
+      confirmButton: {},
+      footer: {},
+      header: {},
+      headerTitle: {},
+      viewAllLabel: {},
+    },
+    memberItem: {
+      container: {},
+      name: {},
+      role: {},
+      status: {},
+    },
+    memberActionsSheet: {
+      actionsList: {},
+      container: {},
+      header: {},
+    },
+    editImageSheet: {
+      actionsList: {},
+      container: {},
+      header: {},
+      headerTitle: {},
+    },
+    modal: {
+      body: {},
+      header: {},
+      headerTitle: {},
+      root: {},
+    },
+    addMembers: {
+      searchResultItem: {
+        alreadyMemberInfo: {},
+        memberLabel: {},
+        userName: {},
+        userRow: {},
+      },
+    },
+    editChannel: {
+      avatarSection: {},
+      container: {},
+      nameInput: {},
+      uploadButton: {},
+    },
+  },
   channelListSkeleton: {
     animationTime: 1000, // in milliseconds
     avatar: {},
@@ -1163,6 +1323,24 @@ export const defaultTheme: Theme = {
     textContainer: {},
     timestamp: {},
   },
+  memberListSkeleton: {
+    animationTime: 1000, // in milliseconds
+    avatar: {},
+    container: {},
+    content: {},
+    subtitle: {},
+    textContainer: {},
+    title: {},
+  },
+  userListSkeleton: {
+    animationTime: 1000, // in milliseconds
+    avatar: {},
+    container: {},
+    content: {},
+    subtitle: {},
+    textContainer: {},
+    title: {},
+  },
   channelPreview: {
     container: {},
     contentContainer: {},
@@ -1179,8 +1357,10 @@ export const defaultTheme: Theme = {
       checkAllIcon: {},
       checkIcon: {},
       timeIcon: {},
+      username: {},
     },
     mutedStatus: {},
+    pinnedStatus: {},
     lowerRow: {},
     title: {},
     unreadContainer: {},
@@ -1203,6 +1383,10 @@ export const defaultTheme: Theme = {
     container: {},
     text: {},
   },
+  emptySearchResult: {
+    container: {},
+    text: {},
+  },
   emptyStateIndicator: {
     channelContainer: {},
     channelDetails: {},
@@ -1921,6 +2105,10 @@ export const defaultTheme: Theme = {
     },
   },
   screenPadding: 16,
+  selectionCircle: {
+    circle: {},
+    circleSelected: {},
+  },
   spinner: {},
   thread: {
     newThread: {

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

@@ -0,0 +1,149 @@
+import React, { PropsWithChildren } from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+import type { Channel, ChannelMute, Mute } from 'stream-chat';
+
+import { ChatProvider } from '../../contexts/chatContext/ChatContext';
+import { useChannelMuteActive } from '../useChannelMuteActive';
+
+const CURRENT_USER_ID = 'current-user-id';
+const OTHER_USER_ID = 'other-user-id';
+const THIRD_USER_ID = 'third-user-id';
+const CHANNEL_CID = 'messaging:test';
+
+const createClient = ({
+  mutedChannels = [],
+  mutedUsers = [],
+}: { mutedChannels?: ChannelMute[]; mutedUsers?: Mute[] } = {}) =>
+  ({
+    mutedChannels,
+    mutedUsers,
+    on: jest.fn(() => ({ unsubscribe: jest.fn() })),
+    userID: CURRENT_USER_ID,
+  }) as never;
+
+const createChannel = (
+  client: ReturnType<typeof createClient>,
+  { isDirect = true, cid = CHANNEL_CID }: { isDirect?: boolean; cid?: string } = {},
+) =>
+  ({
+    cid,
+    getClient: () => client,
+    on: jest.fn(() => ({ unsubscribe: jest.fn() })),
+    state: {
+      members: isDirect
+        ? {
+            current: { user: { id: CURRENT_USER_ID } },
+            other: { user: { id: OTHER_USER_ID } },
+          }
+        : {
+            current: { user: { id: CURRENT_USER_ID } },
+            other1: { user: { id: OTHER_USER_ID } },
+            other2: { user: { id: THIRD_USER_ID } },
+          },
+    },
+  }) as unknown as Channel;
+
+const mutedChannelEntry = (cid: string) => ({ channel: { cid } }) as unknown as ChannelMute;
+
+const mutedUserEntry = (userId: string) =>
+  ({ target: { id: userId }, user: { id: CURRENT_USER_ID } }) as unknown as Mute;
+
+const createWrapper =
+  (client: unknown) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+
+describe('useChannelMuteActive', () => {
+  describe('direct chat (2 members)', () => {
+    it('returns false when neither channel nor other user is muted', () => {
+      const client = createClient();
+      const channel = createChannel(client);
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(false);
+    });
+
+    it('returns true when the channel is muted but the user is not', () => {
+      const client = createClient({ mutedChannels: [mutedChannelEntry(CHANNEL_CID)] });
+      const channel = createChannel(client);
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(true);
+    });
+
+    it('returns true when the other user is muted but the channel is not', () => {
+      const client = createClient({ mutedUsers: [mutedUserEntry(OTHER_USER_ID)] });
+      const channel = createChannel(client);
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(true);
+    });
+
+    it('returns true when both the channel and the other user are muted', () => {
+      const client = createClient({
+        mutedChannels: [mutedChannelEntry(CHANNEL_CID)],
+        mutedUsers: [mutedUserEntry(OTHER_USER_ID)],
+      });
+      const channel = createChannel(client);
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(true);
+    });
+
+    it('ignores mutes targeting an unrelated user', () => {
+      const client = createClient({ mutedUsers: [mutedUserEntry('unrelated-user')] });
+      const channel = createChannel(client);
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(false);
+    });
+
+    it('ignores mutes targeting an unrelated channel', () => {
+      const client = createClient({ mutedChannels: [mutedChannelEntry('messaging:other')] });
+      const channel = createChannel(client);
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(false);
+    });
+  });
+
+  describe('group chat (3+ members)', () => {
+    it('returns true when the channel is muted (even if a member is also muted)', () => {
+      const client = createClient({
+        mutedChannels: [mutedChannelEntry(CHANNEL_CID)],
+        mutedUsers: [mutedUserEntry(OTHER_USER_ID)],
+      });
+      const channel = createChannel(client, { isDirect: false });
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(true);
+    });
+
+    it('returns false when only a member is muted but the channel is not', () => {
+      const client = createClient({ mutedUsers: [mutedUserEntry(OTHER_USER_ID)] });
+      const channel = createChannel(client, { isDirect: false });
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(false);
+    });
+
+    it('returns false when nothing is muted', () => {
+      const client = createClient();
+      const channel = createChannel(client, { isDirect: false });
+      const { result } = renderHook(() => useChannelMuteActive(channel), {
+        wrapper: createWrapper(client),
+      });
+      expect(result.current).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,73 @@
+import { renderHook } from '@testing-library/react-native';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { useChannelMembersState } from '../../components/ChannelList/hooks/useChannelMembersState';
+import { useIsChannelMember } from '../useIsChannelMember';
+
+jest.mock('../../components/ChannelList/hooks/useChannelMembersState');
+
+const mockedUseChannelMembersState = useChannelMembersState as jest.MockedFunction<
+  typeof useChannelMembersState
+>;
+
+const CURRENT_USER_ID = 'current-user-id';
+const OTHER_USER_ID = 'other-user-id';
+
+const channel = {} as Channel;
+
+const setMembers = (members: Record<string, ChannelMemberResponse>) => {
+  mockedUseChannelMembersState.mockReturnValue(members);
+};
+
+describe('useIsChannelMember', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns true when the user is a member of the channel', () => {
+    setMembers({
+      [CURRENT_USER_ID]: { user: { id: CURRENT_USER_ID } },
+      [OTHER_USER_ID]: { user: { id: OTHER_USER_ID } },
+    });
+
+    const { result } = renderHook(() => useIsChannelMember(channel, OTHER_USER_ID));
+
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false when the user is not a member of the channel', () => {
+    setMembers({
+      [CURRENT_USER_ID]: { user: { id: CURRENT_USER_ID } },
+    });
+
+    const { result } = renderHook(() => useIsChannelMember(channel, 'unknown-user-id'));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns false when no userId is provided', () => {
+    setMembers({
+      [CURRENT_USER_ID]: { user: { id: CURRENT_USER_ID } },
+    });
+
+    const { result } = renderHook(() => useIsChannelMember(channel));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns false when the channel has no members', () => {
+    setMembers({});
+
+    const { result } = renderHook(() => useIsChannelMember(channel, OTHER_USER_ID));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('passes the channel through to useChannelMembersState', () => {
+    setMembers({});
+
+    renderHook(() => useIsChannelMember(channel, OTHER_USER_ID));
+
+    expect(mockedUseChannelMembersState).toHaveBeenCalledWith(channel);
+  });
+});