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

package/src/components/ChannelDetails/__tests__/useChannelDetailsMembersPreview.test.tsx

@@ -0,0 +1,76 @@
+import { renderHook } from '@testing-library/react-native';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { useChannelDetailsMembersPreview } from '../hooks/useChannelDetailsMembersPreview';
+
+const buildChannel = ({
+  members,
+  memberCount,
+}: {
+  members: ChannelMemberResponse[];
+  memberCount?: number;
+}): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: memberCount == null ? {} : { member_count: memberCount },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: {
+      members: Object.fromEntries(
+        members.map((m) => [m.user?.id ?? m.user_id ?? '', m]).filter(([k]) => Boolean(k)),
+      ),
+    },
+  }) as unknown as Channel;
+
+const buildMember = (id: string, created_at?: string) =>
+  generateMember({ created_at, user: generateUser({ id, name: id }) });
+
+describe('useChannelDetailsMembersPreview', () => {
+  it('preserves the order of members from channel state', () => {
+    const members = [
+      buildMember('c', '2023-03-01T00:00:00.000Z'),
+      buildMember('a', '2023-01-01T00:00:00.000Z'),
+      buildMember('b', '2023-02-01T00:00:00.000Z'),
+    ];
+    const channel = buildChannel({ members });
+
+    const { result } = renderHook(() => useChannelDetailsMembersPreview(channel));
+
+    expect(result.current.visible.map((m) => m.user?.id)).toEqual(['c', 'a', 'b']);
+  });
+
+  it('limits visible members to max and sets hasMore', () => {
+    const members = Array.from({ length: 8 }, (_, i) =>
+      buildMember(`u-${i}`, `2023-01-0${i + 1}T00:00:00.000Z`),
+    );
+    const channel = buildChannel({ members, memberCount: 8 });
+
+    const { result } = renderHook(() => useChannelDetailsMembersPreview(channel, 5));
+
+    expect(result.current.visible).toHaveLength(5);
+    expect(result.current.visible.map((m) => m.user?.id)).toEqual([
+      'u-0',
+      'u-1',
+      'u-2',
+      'u-3',
+      'u-4',
+    ]);
+    expect(result.current.hasMore).toBe(true);
+    expect(result.current.total).toBe(8);
+  });
+
+  it('uses the loaded member count when member_count is unavailable', () => {
+    const members = [
+      buildMember('a', '2023-01-01T00:00:00.000Z'),
+      buildMember('b', '2023-02-01T00:00:00.000Z'),
+    ];
+    const channel = buildChannel({ members });
+
+    const { result } = renderHook(() => useChannelDetailsMembersPreview(channel));
+
+    expect(result.current.total).toBe(2);
+    expect(result.current.hasMore).toBe(false);
+    expect(result.current.visible).toHaveLength(2);
+  });
+});

package/src/components/ChannelDetails/__tests__/useEditChannelImage.test.tsx

@@ -0,0 +1,235 @@
+import React, { PropsWithChildren } from 'react';
+import { Alert } from 'react-native';
+
+import { act, renderHook } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { generateFileReference } from '../../../mock-builders/attachments';
+import { NativeHandlers } from '../../../native';
+import { useEditChannelImage } from '../hooks/useEditChannelImage';
+
+jest.spyOn(Alert, 'alert').mockImplementation(() => undefined);
+
+const buildChannel = (): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: { name: 'Test' },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: { members: {} },
+  }) as unknown as Channel;
+
+const wrap = ({ compressImageQuality }: { compressImageQuality?: number }) => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <TranslationProvider
+      value={{
+        t: ((key: string) => key) as never,
+        tDateTimeParser: ((input: unknown) => input) as never,
+        userLanguage: 'en',
+      }}
+    >
+      <ChannelDetailsContextProvider value={{ channel: buildChannel(), compressImageQuality }}>
+        {children}
+      </ChannelDetailsContextProvider>
+    </TranslationProvider>
+  );
+  return Wrapper;
+};
+
+describe('useEditChannelImage', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('takePhoto', () => {
+    it('forwards compressImageQuality and mediaType=image to NativeHandlers.takePhoto', async () => {
+      const file = generateFileReference();
+      jest.spyOn(NativeHandlers, 'takePhoto').mockResolvedValue(file);
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({ compressImageQuality: 0.5 }),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.takePhoto();
+      });
+
+      expect(NativeHandlers.takePhoto).toHaveBeenCalledTimes(1);
+      expect(NativeHandlers.takePhoto).toHaveBeenCalledWith({
+        compressImageQuality: 0.5,
+        mediaType: 'image',
+      });
+      expect(returned).toBe(file);
+    });
+
+    it('shows the permission alert and returns undefined when askToOpenSettings is true', async () => {
+      jest
+        .spyOn(NativeHandlers, 'takePhoto')
+        .mockResolvedValue({ askToOpenSettings: true } as never);
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.takePhoto();
+      });
+
+      expect(Alert.alert).toHaveBeenCalledTimes(1);
+      expect(Alert.alert).toHaveBeenCalledWith(
+        'Allow camera access in device settings',
+        'Device camera is used to take photos or videos.',
+        expect.any(Array),
+      );
+      expect(returned).toBeUndefined();
+    });
+
+    it('returns undefined when the user cancels', async () => {
+      jest.spyOn(NativeHandlers, 'takePhoto').mockResolvedValue({ cancelled: true } as never);
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.takePhoto();
+      });
+
+      expect(Alert.alert).not.toHaveBeenCalled();
+      expect(returned).toBeUndefined();
+    });
+  });
+
+  describe('pickImageFromNativePicker', () => {
+    it('requests a single image from NativeHandlers.pickImage', async () => {
+      const file = generateFileReference();
+      jest
+        .spyOn(NativeHandlers, 'pickImage')
+        .mockResolvedValue({ assets: [file], cancelled: false });
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      await act(async () => {
+        await result.current.pickImageFromNativePicker();
+      });
+
+      expect(NativeHandlers.pickImage).toHaveBeenCalledTimes(1);
+      expect(NativeHandlers.pickImage).toHaveBeenCalledWith({ maxNumberOfFiles: 1 });
+    });
+
+    it('compresses the picked asset and returns a file with the compressed uri', async () => {
+      const file = {
+        ...generateFileReference({ uri: 'file:///original' }),
+        height: 1000,
+        width: 1000,
+      };
+      jest
+        .spyOn(NativeHandlers, 'pickImage')
+        .mockResolvedValue({ assets: [file], cancelled: false });
+      const compressSpy = jest
+        .spyOn(NativeHandlers, 'compressImage')
+        .mockResolvedValue('file:///compressed');
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({ compressImageQuality: 0.5 }),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.pickImageFromNativePicker();
+      });
+
+      expect(compressSpy).toHaveBeenCalledWith({
+        compressImageQuality: 0.5,
+        height: 1000,
+        uri: 'file:///original',
+        width: 1000,
+      });
+      expect(returned).toEqual({ ...file, uri: 'file:///compressed' });
+    });
+
+    it('skips compression when compressImageQuality is undefined', async () => {
+      const file = {
+        ...generateFileReference({ uri: 'file:///original' }),
+        height: 1000,
+        width: 1000,
+      };
+      jest
+        .spyOn(NativeHandlers, 'pickImage')
+        .mockResolvedValue({ assets: [file], cancelled: false });
+      const compressSpy = jest.spyOn(NativeHandlers, 'compressImage');
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.pickImageFromNativePicker();
+      });
+
+      expect(compressSpy).not.toHaveBeenCalled();
+      expect(returned).toEqual({ ...file, uri: 'file:///original' });
+    });
+
+    it('shows the permission alert and returns undefined when askToOpenSettings is true', async () => {
+      jest
+        .spyOn(NativeHandlers, 'pickImage')
+        .mockResolvedValue({ askToOpenSettings: true } as never);
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.pickImageFromNativePicker();
+      });
+
+      expect(Alert.alert).toHaveBeenCalledTimes(1);
+      expect(Alert.alert).toHaveBeenCalledWith(
+        'Allow access to your Gallery',
+        'Device gallery permissions is used to take photos or videos.',
+        expect.any(Array),
+      );
+      expect(returned).toBeUndefined();
+    });
+
+    it('returns undefined when the user cancels', async () => {
+      jest.spyOn(NativeHandlers, 'pickImage').mockResolvedValue({ assets: [], cancelled: true });
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.pickImageFromNativePicker();
+      });
+
+      expect(Alert.alert).not.toHaveBeenCalled();
+      expect(returned).toBeUndefined();
+    });
+
+    it('returns undefined when no assets are returned', async () => {
+      jest.spyOn(NativeHandlers, 'pickImage').mockResolvedValue({ assets: [], cancelled: false });
+
+      const { result } = renderHook(() => useEditChannelImage(), {
+        wrapper: wrap({}),
+      });
+
+      let returned;
+      await act(async () => {
+        returned = await result.current.pickImageFromNativePicker();
+      });
+
+      expect(returned).toBeUndefined();
+    });
+  });
+});

package/src/components/ChannelDetails/__tests__/useUserActivityStatus.test.tsx

@@ -0,0 +1,69 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+import type { UserResponse } from 'stream-chat';
+
+import {
+  TranslationProvider,
+  type TranslationContextValue,
+} from '../../../contexts/translationContext/TranslationContext';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
+import { useUserActivityStatus } from '../hooks/useUserActivityStatus';
+
+let translators: TranslationContextValue;
+
+beforeAll(async () => {
+  const i18nInstance = new Streami18n();
+  translators = (await i18nInstance.getTranslators()) as unknown as TranslationContextValue;
+});
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <TranslationProvider value={translators}>{children}</TranslationProvider>
+);
+
+const userFor = (overrides: Partial<UserResponse> = {}): UserResponse =>
+  ({ id: 'u-1', ...overrides }) as UserResponse;
+
+describe('useUserActivityStatus', () => {
+  it('returns "Online" when the user is online', () => {
+    const { result } = renderHook(() => useUserActivityStatus(userFor({ online: true })), {
+      wrapper,
+    });
+    expect(result.current).toBe('Online');
+  });
+
+  it('returns "Offline" when the user is offline and has no last_active', () => {
+    const { result } = renderHook(() => useUserActivityStatus(userFor({ online: false })), {
+      wrapper,
+    });
+    expect(result.current).toBe('Offline');
+  });
+
+  it('returns "Offline" when no user is provided', () => {
+    const { result } = renderHook(() => useUserActivityStatus(undefined), { wrapper });
+    expect(result.current).toBe('Offline');
+  });
+
+  it('returns a relative "Last seen ..." string when offline with a valid last_active', () => {
+    jest.useFakeTimers().setSystemTime(new Date('2026-05-13T12:00:00Z'));
+    const tenMinutesAgo = new Date('2026-05-13T11:50:00Z').toISOString();
+
+    const { result } = renderHook(
+      () => useUserActivityStatus(userFor({ last_active: tenMinutesAgo, online: false })),
+      { wrapper },
+    );
+
+    expect(result.current).toMatch(/^Last seen /);
+    expect(result.current).toContain('minutes ago');
+
+    jest.useRealTimers();
+  });
+
+  it('falls back to "Offline" when last_active is unparseable', () => {
+    const { result } = renderHook(
+      () => useUserActivityStatus(userFor({ last_active: 'not-a-date' as never, online: false })),
+      { wrapper },
+    );
+    expect(result.current).toBe('Offline');
+  });
+});

package/src/components/ChannelDetails/components/ChannelDetailsActionItem.tsx

@@ -0,0 +1,129 @@
+import React, { useMemo } from 'react';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { IconProps } from '../../../icons/utils/base';
+import { primitives } from '../../../theme';
+
+export type ChannelDetailsActionItemProps = {
+  Icon: React.ComponentType<IconProps>;
+  label: string;
+  destructive?: boolean;
+  onPress?: () => void;
+  testID?: string;
+  trailing?: React.ReactNode;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsActionItem = ({
+  Icon,
+  destructive = false,
+  label,
+  onPress,
+  testID,
+  trailing,
+}: ChannelDetailsActionItemProps) => {
+  const {
+    theme: {
+      channelDetails: {
+        actionItem: {
+          container: containerOverride,
+          destructiveLabel: destructiveLabelOverride,
+          iconWrapper: iconWrapperOverride,
+          label: labelOverride,
+        },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+  const labelColor = destructive ? semantics.accentError : semantics.textPrimary;
+  const iconColor = destructive ? semantics.accentError : semantics.textPrimary;
+
+  const content = (
+    <View style={[styles.contentContainer, containerOverride]}>
+      <View style={[styles.iconWrapper, iconWrapperOverride]}>
+        <Icon height={20} stroke={iconColor} width={20} />
+      </View>
+      <Text
+        numberOfLines={1}
+        style={[
+          styles.label,
+          { color: labelColor },
+          labelOverride,
+          destructive ? destructiveLabelOverride : null,
+        ]}
+      >
+        {label}
+      </Text>
+      {trailing ? <View style={styles.trailing}>{trailing}</View> : null}
+    </View>
+  );
+
+  if (!onPress) {
+    return (
+      <View style={styles.row} testID={testID}>
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole='button'
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.row,
+        pressed ? { backgroundColor: semantics.backgroundUtilityPressed } : null,
+      ]}
+      testID={testID}
+    >
+      {content}
+    </Pressable>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        contentContainer: {
+          alignItems: 'center',
+          flex: 1,
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          minHeight: 48,
+          paddingHorizontal: primitives.spacingSm,
+          paddingVertical: primitives.spacingXs,
+        },
+        iconWrapper: {
+          alignItems: 'center',
+          height: 20,
+          justifyContent: 'center',
+          width: 20,
+        },
+        label: {
+          flex: 1,
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        row: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          minHeight: 48,
+          paddingHorizontal: primitives.spacingXxs,
+        },
+        trailing: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/ChannelDetailsActionsSection.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet, Switch, View } from 'react-native';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
+import { getOtherUserInDirectChannel } from '../../../hooks/actions/useChannelActions';
+import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
+import { primitives } from '../../../theme';
+import { useRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
+import { useIsChannelMuted } from '../../ChannelPreview/hooks/useIsChannelMuted';
+import { useUserMuteActive } from '../../Message/hooks/useUserMuteActive';
+import { useChannelDetailsActionItems } from '../hooks';
+
+const ChannelMuteToggleRow = ({ item }: { item: ChannelActionItem }) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelDetailsActionItem } = useComponentsContext();
+  const rtlMirrorSwitchStyle = useRtlMirrorSwitchStyle();
+  const { muted } = useIsChannelMuted(channel);
+  const switchColors = useSwitchColors();
+  const [isMuted, setIsMuted] = useState(muted);
+  const mutedRef = useRef(muted);
+
+  useEffect(() => {
+    mutedRef.current = muted;
+    setIsMuted(muted);
+  }, [muted]);
+
+  const handleValueChange = useCallback(
+    (value: boolean) => {
+      setIsMuted(value);
+      item.action({ onFailure: () => setIsMuted(mutedRef.current) });
+    },
+    [item],
+  );
+
+  const testID = `channel-details-action-${item.id}`;
+
+  return (
+    <ChannelDetailsActionItem
+      destructive={item.type === 'destructive'}
+      Icon={item.Icon}
+      label={item.label}
+      testID={testID}
+      trailing={
+        <Switch
+          {...switchColors}
+          onValueChange={handleValueChange}
+          style={rtlMirrorSwitchStyle}
+          testID={`${testID}-switch`}
+          value={isMuted}
+        />
+      }
+    />
+  );
+};
+
+const UserMuteToggleRow = ({ item }: { item: ChannelActionItem }) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelDetailsActionItem } = useComponentsContext();
+  const isDirect = useIsDirectChat(channel);
+  const rtlMirrorSwitchStyle = useRtlMirrorSwitchStyle();
+  const switchColors = useSwitchColors();
+  const otherUser = isDirect ? getOtherUserInDirectChannel(channel)?.user : undefined;
+  const userMuted = useUserMuteActive(otherUser);
+  const [isUserMuted, setIsUserMuted] = useState(userMuted);
+  const userMutedRef = useRef(userMuted);
+
+  useEffect(() => {
+    userMutedRef.current = userMuted;
+    setIsUserMuted(userMuted);
+  }, [userMuted]);
+
+  const handleValueChange = useCallback(
+    (value: boolean) => {
+      setIsUserMuted(value);
+      item.action({ onFailure: () => setIsUserMuted(userMutedRef.current) });
+    },
+    [item],
+  );
+
+  const testID = `channel-details-action-${item.id}`;
+
+  return (
+    <ChannelDetailsActionItem
+      destructive={item.type === 'destructive'}
+      Icon={item.Icon}
+      label={item.label}
+      testID={testID}
+      trailing={
+        <Switch
+          {...switchColors}
+          onValueChange={handleValueChange}
+          style={rtlMirrorSwitchStyle}
+          testID={`${testID}-switch`}
+          value={isUserMuted}
+        />
+      }
+    />
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsActionsSection = () => {
+  const {
+    theme: {
+      channelDetails: { sectionCard: sectionCardOverride },
+      semantics,
+    },
+  } = useTheme();
+  const { ChannelDetailsActionItem } = useComponentsContext();
+  const styles = useStyles();
+
+  const items = useChannelDetailsActionItems();
+
+  if (items.length === 0) return null;
+
+  return (
+    <View
+      style={[
+        styles.sectionCard,
+        { backgroundColor: semantics.backgroundCoreSurfaceCard },
+        sectionCardOverride,
+      ]}
+    >
+      {items.map((item) => {
+        if (item.id === 'mute') {
+          return <ChannelMuteToggleRow item={item} key={item.id} />;
+        }
+        if (item.id === 'muteUser') {
+          return <UserMuteToggleRow item={item} key={item.id} />;
+        }
+
+        return (
+          <ChannelDetailsActionItem
+            destructive={item.type === 'destructive'}
+            Icon={item.Icon}
+            key={item.id}
+            label={item.label}
+            onPress={() => item.action()}
+            testID={`channel-details-action-${item.id}`}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const useSwitchColors = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () => ({
+      thumbColor: semantics.controlToggleSwitchKnob,
+      trackColor: {
+        false: semantics.controlToggleSwitchBg,
+        true: semantics.controlToggleSwitchBgSelected,
+      },
+    }),
+    [semantics],
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        sectionCard: {
+          borderRadius: primitives.radiusLg,
+          overflow: 'hidden',
+          paddingVertical: primitives.spacingXs,
+        },
+      }),
+    [],
+  );
+};