stream-chat-react-native-core 9.0.0-beta.14 → 9.0.0-beta.16

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
+import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
+
+const rightActionsProbe = {
+  items: [] as Array<{ action: () => void; id: string }>,
+};
+
+const mockSwipableWrapper = jest.fn(
+  ({
+    children,
+    swipableProps,
+  }: React.PropsWithChildren<{
+    swipableProps?: { renderRightActions?: (...args: never[]) => void };
+  }>) => {
+    const rightActions = swipableProps?.renderRightActions?.({} as never, {} as never);
+    return (
+      <>
+        {children}
+        {rightActions}
+      </>
+    );
+  },
+);
+
+jest.mock('../../../contexts', () => ({
+  useTheme: () => ({
+    theme: {
+      semantics: {
+        accentPrimary: '#00f',
+        backgroundCoreSurface: '#fff',
+        textOnAccent: '#000',
+        textPrimary: '#111',
+      },
+    },
+  }),
+}));
+
+jest.mock('../../../contexts/swipeableContext/SwipeRegistryContext', () => ({
+  useSwipeRegistryContext: () => ({
+    closeAll: jest.fn(),
+  }),
+}));
+
+jest.mock('../../UIComponents', () => ({
+  BottomSheetModal: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  RightActions: ({ items }: { items: Array<{ action: () => void; id: string }> }) => {
+    rightActionsProbe.items = items;
+    return null;
+  },
+  SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args),
+}));
+
+describe('ChannelSwipableWrapper', () => {
+  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    rightActionsProbe.items = [];
+  });
+
+  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
+    const muteChannel = jest.fn();
+    const unmuteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const items: ChannelActionItem[] = [
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'mute',
+        label: 'Mute User',
+        placement: 'sheet',
+        type: 'standard',
+      },
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'archive',
+        label: 'Archive Chat',
+        placement: 'sheet',
+        type: 'standard',
+      },
+    ];
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel,
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items,
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(unmuteChannel).not.toHaveBeenCalled();
+  });
+
+  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
+    const muteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const muteItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'mute',
+      label: 'Mute Group',
+      placement: 'swipe',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+    const archiveItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'archive',
+      label: 'Archive Group',
+      placement: 'both',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel: jest.fn(),
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, archiveItem]);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items: [archiveItem],
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  AccessibilityInfo,
   AppState,
   AppStateStatus,
   Dimensions,
@@ -39,7 +40,7 @@ export class KeyboardCompatibleView extends React.Component<
     KeyboardAvoidingViewProps,
     'behavior' | 'enabled' | 'keyboardVerticalOffset'
   > = {
-    behavior: Platform.OS === 'ios' ? 'padding' : 'position',
+    behavior: 'padding',
     enabled: true,
     keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
@@ -62,35 +63,40 @@ export class KeyboardCompatibleView extends React.Component<
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics) {
+  async _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): Promise<number> {
     const frame = this._frame;
-    /**
-     * With iOS 14 & Reduce Motion > Prefer Cross-Fade Transitions enabled, the keyboard position
-     * height is reported differently (0 instead of Y position value) which caused the view to take full height
-     * of the screen.
-     */
-    if (!frame || !keyboardFrame || keyboardFrame.screenY === 0) {
+    if (!frame || !keyboardFrame) {
+      return 0;
+    }
+
+    if (
+      Platform.OS === 'ios' &&
+      keyboardFrame.screenY === 0 &&
+      (await AccessibilityInfo.prefersCrossFadeTransitions())
+    ) {
       return 0;
     }
 
     const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
-    const relativeHeight = frame.y + frame.height - keyboardY;
 
-    /**
-     * When the StatusBar is translucent there is an issue
-     * where the relative keyboard height is returned incorrectly
-     * instead of 0 when closed.
-     */
+    if (this.props.behavior === 'height') {
+      return Math.max(this.state.bottom + frame.y + frame.height - keyboardY, 0);
+    }
+
+    // Calculate the displacement needed for the view such that it
+    // no longer overlaps with the keyboard
+    const relativeHeight = Math.max(frame.y + frame.height - keyboardY, 0);
+
     if (Platform.OS === 'android') {
       const barHeights = Dimensions.get('screen').height - Dimensions.get('window').height;
-      if (relativeHeight <= Math.max(barHeights, StatusBar.currentHeight ?? 0)) {
+      const systemInsetFloor = Math.max(barHeights, StatusBar.currentHeight ?? 0);
+
+      if (relativeHeight <= systemInsetFloor) {
         return 0;
       }
     }
 
-    // Calculate the displacement needed for the view such that it
-    // no longer overlaps with the keyboard
-    return Math.max(relativeHeight, 0);
+    return relativeHeight;
   }
 
   _onKeyboardChange: KeyboardEventListener = (event) => {
@@ -98,7 +104,12 @@ export class KeyboardCompatibleView extends React.Component<
     this._updateBottomIfNecessary();
   };
 
-  _onLayout: (event: LayoutChangeEvent) => void = (event) => {
+  _onKeyboardHide: KeyboardEventListener = () => {
+    this._keyboardEvent = null;
+    this._updateBottomIfNecessary();
+  };
+
+  _onLayout: (event: LayoutChangeEvent) => void = async (event) => {
     event.persist();
 
     const oldFrame = this._frame;
@@ -110,7 +121,7 @@ export class KeyboardCompatibleView extends React.Component<
 
     // update bottom height for the first time or when the height is changed
     if (!oldFrame || oldFrame.height !== this._frame.height) {
-      this._updateBottomIfNecessary();
+      await this._updateBottomIfNecessary();
     }
 
     if (this.props.onLayout) {
@@ -127,14 +138,14 @@ export class KeyboardCompatibleView extends React.Component<
     }
   };
 
-  _updateBottomIfNecessary = () => {
+  _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
       this._setBottom(0);
       return;
     }
 
     const { duration, easing, endCoordinates } = this._keyboardEvent;
-    const height = this._relativeKeyboardHeight(endCoordinates);
+    const height = await this._relativeKeyboardHeight(endCoordinates);
 
     if (this._bottom === height) {
       return;
@@ -142,7 +153,8 @@ export class KeyboardCompatibleView extends React.Component<
 
     this._setBottom(height);
 
-    if (duration && easing) {
+    const enabled = this.props.enabled ?? true;
+    if (enabled && duration && easing) {
       LayoutAnimation.configureNext({
         // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
         duration: duration > 10 ? duration : 10,
@@ -169,11 +181,12 @@ export class KeyboardCompatibleView extends React.Component<
   setKeyboardListeners = () => {
     if (Platform.OS === 'ios') {
       this._subscriptions = [
-        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Keyboard.addListener('keyboardWillHide', this._onKeyboardHide),
+        Keyboard.addListener('keyboardWillShow', this._onKeyboardChange),
       ];
     } else {
       this._subscriptions = [
-        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
+        Keyboard.addListener('keyboardDidHide', this._onKeyboardHide),
         Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
       ];
     }
@@ -218,6 +231,11 @@ export class KeyboardCompatibleView extends React.Component<
   }
 
   componentDidMount() {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     this._appStateSubscription = AppState.addEventListener('change', this._handleAppStateChange);
     this.setKeyboardListeners();
   }

package/src/components/KeyboardCompatibleView/KeyboardControllerAvoidingView.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 
 import {
   Keyboard,
-  Platform,
   KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
 } from 'react-native';
 
@@ -51,12 +50,7 @@ export const KeyboardCompatibleView = (props: KeyboardCompatibleViewProps) => {
       </KeyboardProvider>
     );
   }
-  const compatibleBehavior =
-    behavior === 'translate-with-padding'
-      ? Platform.OS === 'ios'
-        ? 'padding'
-        : 'position'
-      : behavior;
+  const compatibleBehavior = behavior === 'translate-with-padding' ? 'padding' : behavior;
 
   return (
     <KeyboardCompatibleViewDefault behavior={compatibleBehavior} {...rest}>

package/src/components/Message/utils/messageActions.ts

@@ -90,7 +90,7 @@ export const messageActions = ({
     actions.push(copyMessage);
   }
 
-  if (ownCapabilities.readEvents && !error && !isThreadMessage) {
+  if (ownCapabilities.readEvents && !error && !isThreadMessage && !isMyMessage) {
     actions.push(markUnread);
   }
 

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -125,7 +125,9 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
 
   const onSelectReaction = useStableCallback((reactionType: string) => {
-    setSelectedReaction(reactionType);
+    setSelectedReaction((currentReaction) =>
+      currentReaction === reactionType ? undefined : reactionType,
+    );
   });
 
   useEffect(() => {

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -100,14 +100,21 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
-  it('changes selected reaction when a reaction button is pressed', () => {
+  it('toggles the selected reaction when a reaction button is pressed twice', () => {
     const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    let reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
 
     fireEvent.press(reactionButtons[1]);
 
     expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+
+    fireEvent.press(reactionButtons[1]);
+
+    reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
   it('renders reactions list', () => {

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -242,8 +242,10 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
         KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidHide', keyboardDidHide),
       );
     } else {
-      listeners.push(Keyboard.addListener('keyboardDidShow', keyboardDidShowRN));
-      listeners.push(Keyboard.addListener('keyboardDidHide', keyboardDidHide));
+      if (Platform.OS === 'ios') {
+        listeners.push(Keyboard.addListener('keyboardWillShow', keyboardDidShowRN));
+        listeners.push(Keyboard.addListener('keyboardWillHide', keyboardDidHide));
+      }
     }
 
     return () => listeners.forEach((l) => l.remove());

package/src/icons/index.ts

@@ -34,6 +34,7 @@ export * from './clock';
 export * from './Unknown';
 export * from './unpin';
 export * from './video-fill';
+export * from './video';
 export * from './user-add';
 export * from './user-remove';
 export * from './filetype-video-xl';

package/src/store/OfflineDB.ts

@@ -67,6 +67,8 @@ export class OfflineDB extends AbstractOfflineDB {
 
   addPendingTask = api.addPendingTask;
 
+  updatePendingTask = api.updatePendingTask;
+
   deletePendingTask = api.deletePendingTask;
 
   deleteReaction = api.deleteReaction;

package/src/store/apis/__tests__/updatePendingTask.test.ts

@@ -0,0 +1,66 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { addPendingTask, getPendingTasks, updatePendingTask } from '..';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { BetterSqlite } from '../../../test-utils/BetterSqlite';
+import { SqliteClient } from '../../SqliteClient';
+
+describe('updatePendingTask', () => {
+  beforeEach(async () => {
+    await SqliteClient.initializeDatabase();
+    await BetterSqlite.openDB();
+  });
+
+  afterEach(() => {
+    BetterSqlite.dropAllTables();
+    BetterSqlite.closeDB();
+    jest.clearAllMocks();
+  });
+
+  it('should replace an existing pending task row by id without changing its createdAt ordering', async () => {
+    const channelId = uuidv4();
+    const originalMessage = generateMessage({
+      cid: `messaging:${channelId}`,
+      id: uuidv4(),
+      text: 'original text',
+    });
+
+    await addPendingTask({
+      channelId,
+      channelType: 'messaging',
+      messageId: originalMessage.id,
+      payload: [originalMessage, {}],
+      type: 'send-message',
+    });
+
+    const [originalRow] = await BetterSqlite.selectFromTable('pendingTasks');
+    const [originalTask] = await getPendingTasks({ messageId: originalMessage.id });
+
+    const editedMessage = {
+      ...originalMessage,
+      text: 'edited text',
+    };
+
+    await updatePendingTask({
+      id: originalTask.id,
+      task: {
+        channelId,
+        channelType: 'messaging',
+        messageId: originalMessage.id,
+        payload: [editedMessage, {}],
+        type: 'send-message',
+      },
+    });
+
+    const [updatedRow] = await BetterSqlite.selectFromTable('pendingTasks');
+    const [updatedTask] = await getPendingTasks({ messageId: originalMessage.id });
+
+    expect(updatedRow.id).toBe(originalRow.id);
+    expect(updatedRow.createdAt).toBe(originalRow.createdAt);
+    expect(updatedRow.type).toBe('send-message');
+    expect(JSON.parse(updatedRow.payload)[0].text).toBe('edited text');
+    expect(updatedTask.id).toBe(originalTask.id);
+    expect(updatedTask.type).toBe('send-message');
+    expect(updatedTask.payload[0].text).toBe('edited text');
+  });
+});

package/src/store/apis/index.ts

@@ -13,6 +13,7 @@ export * from './getLastSyncedAt';
 export * from './getMembers';
 export * from './getReads';
 export * from './updateMessage';
+export * from './updatePendingTask';
 export * from './updateReaction';
 export * from './insertReaction';
 export * from './deleteReaction';

package/src/store/apis/updatePendingTask.ts

@@ -0,0 +1,24 @@
+import type { DBUpdatePendingTaskType } from 'stream-chat';
+
+import { mapTaskToStorable } from '../mappers/mapTaskToStorable';
+import { createUpdateQuery } from '../sqlite-utils/createUpdateQuery';
+import { SqliteClient } from '../SqliteClient';
+
+export const updatePendingTask = async ({ id, task }: DBUpdatePendingTaskType) => {
+  const storableTask = mapTaskToStorable(task);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { createdAt, id: taskId, ...nextTask } = storableTask;
+
+  const query = createUpdateQuery('pendingTasks', nextTask, {
+    id,
+  });
+
+  SqliteClient.logger?.('info', 'updatePendingTask', {
+    id,
+    task: nextTask,
+  });
+
+  await SqliteClient.executeSql.apply(null, query);
+
+  return [query];
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.14"
+  "version": "9.0.0-beta.16"
 }