stream-chat-react-native-core 9.1.2-beta.2 → 9.1.2-beta.4

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { Platform } from 'react-native';
 
-import { Channel, OfflineDBState, SdkIdentifier } from 'stream-chat';
+import { Channel, OfflineDBState } from 'stream-chat';
 
 import { useClientMutedUsers } from './hooks';
 import { useAppSettings } from './hooks/useAppSettings';
@@ -187,10 +187,9 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
   useEffect(() => {
     if (client) {
-      const sdkName = (((NativeHandlers.SDK
-        ? NativeHandlers.SDK.replace('stream-chat-', '')
-        : 'react-native') as 'react-native' | 'expo') +
-        `-${Platform.OS as 'ios' | 'android'}`) as SdkIdentifier['name'];
+      const sdkName = (
+        NativeHandlers.SDK ? NativeHandlers.SDK.replace('stream-chat-', '') : 'react-native'
+      ) as 'react-native' | 'expo';
       client.sdkIdentifier = {
         name: sdkName,
         version,

package/src/components/ui/GiphyChip.tsx

@@ -27,7 +27,7 @@ export const GiphyChip = () => {
 
   const onPressHandler = () => {
     textComposer.clearCommand();
-    messageComposer?.restore();
+    // messageComposer?.restore();
   };
 
   return (

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -51,7 +51,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type LocalMessageInputContext = {
   closeAttachmentPicker: () => void;
-  inputBoxRef: React.RefObject<TextInput | null>;
+  inputBoxRef: React.RefObject<InputBoxRef | null>;
   openAttachmentPicker: () => void;
   /**
    * Function for picking a photo from native image picker and uploading it.
@@ -62,7 +62,7 @@ export type LocalMessageInputContext = {
   /**
    * Ref callback to set reference on input box
    */
-  setInputBoxRef: Ref<TextInput> | undefined;
+  setInputBoxRef: Ref<InputBoxRef> | undefined;
   /**
    * Function for taking a photo and uploading it
    */
@@ -77,6 +77,11 @@ export type LocalMessageInputContext = {
   stopVoiceRecording: () => Promise<void>;
 };
 
+export type InputBoxRef = TextInput & {
+  clearState: () => void;
+  restoreState: (text: string) => void;
+};
+
 export type InputMessageInputContextValue = {
   /**
    * Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the
@@ -215,7 +220,7 @@ export const MessageInputProvider = ({
   const { clearEditingState } = useMessageComposerAPIContext();
   const { thread } = useThreadContext();
   const { t } = useTranslationContext();
-  const inputBoxRef = useRef<TextInput | null>(null);
+  const inputBoxRef = useRef<InputBoxRef | null>(null);
 
   const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
 
@@ -368,14 +373,18 @@ export const MessageInputProvider = ({
   }, [closePicker, attachmentPickerStore]);
 
   const sendMessage = useStableCallback(async () => {
-    if (inputBoxRef.current) {
-      inputBoxRef.current.clear();
-    }
+    const textToRestore = messageComposer.textComposer.text;
+    let compositionAccepted = false;
+
+    inputBoxRef.current?.clearState();
 
     try {
       const composition = await messageComposer.compose();
 
-      if (!composition || !composition.message) return;
+      if (!composition || !composition.message) {
+        inputBoxRef.current?.restoreState(textToRestore);
+        return;
+      }
 
       const { localMessage, message, sendOptions } = composition;
       const linkInfos = parseLinksFromText(localMessage.text);
@@ -386,9 +395,12 @@ export const MessageInputProvider = ({
           t('Sending links is not allowed in this conversation'),
         );
 
+        inputBoxRef.current?.restoreState(textToRestore);
         return;
       }
 
+      compositionAccepted = true;
+
       // MODERATION: This is for the case where the message is of type 'error' and if you try to edit it, it will throw an error.
       if (editedMessage && editedMessage.type !== 'error') {
         try {
@@ -425,11 +437,14 @@ export const MessageInputProvider = ({
         }
       }
     } catch (error) {
+      if (!compositionAccepted) {
+        inputBoxRef.current?.restoreState(textToRestore);
+      }
       console.error('Error while sending message:', error);
     }
   });
 
-  const setInputBoxRef = useStableCallback((ref: TextInput | null) => {
+  const setInputBoxRef = useStableCallback((ref: InputBoxRef | null) => {
     inputBoxRef.current = ref;
     if (value.setInputRef) {
       value.setInputRef(ref);

package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx

@@ -22,6 +22,7 @@ import {
   MessageInputProvider,
   useMessageInputContext,
 } from '../MessageInputContext';
+import type { InputBoxRef } from '../MessageInputContext';
 
 const Wrapper = ({
   messageComposerContextValue,
@@ -98,6 +99,53 @@ describe("MessageInputContext's sendMessage", () => {
     });
   });
 
+  it('should restore input state if composition is discarded', async () => {
+    const sendMessageMock = jest.fn();
+    const clearState = jest.fn();
+    const restoreState = jest.fn();
+    const initialProps = {
+      sendMessage: sendMessageMock,
+    };
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps,
+      wrapper: (props) => (
+        <Wrapper
+          client={chatClient}
+          messageComposerContextValue={{ channel }}
+          props={{ ...props, ...initialProps }}
+        />
+      ),
+    });
+
+    const text = 'Hello there';
+    const inputRef = {
+      clearState,
+      restoreState,
+    } as unknown as InputBoxRef;
+    (result.current.setInputBoxRef as (ref: InputBoxRef | null) => void)(inputRef);
+
+    await act(async () => {
+      await channel.messageComposer.textComposer.handleChange({
+        selection: {
+          end: text.length,
+          start: text.length,
+        },
+        text,
+      });
+    });
+
+    jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue(undefined);
+
+    await act(async () => {
+      await result.current.sendMessage();
+    });
+
+    expect(clearState).toHaveBeenCalledTimes(1);
+    expect(restoreState).toHaveBeenCalledWith(text);
+    expect(sendMessageMock).not.toHaveBeenCalled();
+  });
+
   it('should get into the catch block if the sendMessage throws an error', async () => {
     const sendMessageMock = jest.fn();
     sendMessageMock.mockRejectedValue(new Error('Error sending message'));

package/src/contexts/messageInputContext/__tests__/useIsCommandDisabled.test.tsx

@@ -0,0 +1,110 @@
+import { act, cleanup, renderHook } from '@testing-library/react-native';
+import type { CommandSuggestion, MessageComposerState } from 'stream-chat';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { useIsCommandDisabled } from '../hooks/useIsCommandDisabled';
+import { useMessageComposer } from '../hooks/useMessageComposer';
+
+jest.mock('../hooks/useMessageComposer', () => ({
+  useMessageComposer: jest.fn(),
+}));
+
+type TestMessageComposerStateStore = {
+  getLatestValue: () => MessageComposerState;
+  partialNext: (nextValue: Partial<MessageComposerState>) => void;
+  subscribeWithSelector: (
+    selector: (state: MessageComposerState) => Record<string, unknown>,
+    onStoreChange: () => void,
+  ) => () => void;
+};
+
+const createMessageComposerState = (): TestMessageComposerStateStore => {
+  let value: MessageComposerState = {
+    draftId: null,
+    editedMessage: null,
+    id: 'composer-id',
+    pollId: null,
+    quotedMessage: null,
+    showReplyInChannel: false,
+  };
+  const subscribers = new Set<() => void>();
+
+  return {
+    getLatestValue: () => value,
+    partialNext: (nextValue) => {
+      value = { ...value, ...nextValue };
+      subscribers.forEach((subscriber) => subscriber());
+    },
+    subscribeWithSelector: (_selector, onStoreChange) => {
+      subscribers.add(onStoreChange);
+      return () => {
+        subscribers.delete(onStoreChange);
+      };
+    },
+  };
+};
+
+const command = {
+  id: 'ban',
+  name: 'ban',
+  set: 'moderation_set',
+} as CommandSuggestion;
+
+describe('useIsCommandDisabled', () => {
+  const mockUseMessageComposer = useMessageComposer as jest.MockedFunction<
+    typeof useMessageComposer
+  >;
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    cleanup();
+  });
+
+  it('recalculates when quoted message existence changes', () => {
+    const state = createMessageComposerState();
+    const messageComposer = {
+      isCommandDisabled: jest.fn(() => !!state.getLatestValue().quotedMessage),
+      state,
+    } as unknown as ReturnType<typeof useMessageComposer>;
+
+    mockUseMessageComposer.mockReturnValue(messageComposer);
+
+    const { result } = renderHook(() => useIsCommandDisabled(command));
+
+    expect(result.current).toBe(false);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      state.partialNext({ quotedMessage: generateMessage({ id: 'quoted-message' }) });
+    });
+
+    expect(result.current).toBe(true);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not recalculate when quoted message changes but existence does not', () => {
+    const state = createMessageComposerState();
+    const messageComposer = {
+      isCommandDisabled: jest.fn(() => !!state.getLatestValue().quotedMessage),
+      state,
+    } as unknown as ReturnType<typeof useMessageComposer>;
+
+    mockUseMessageComposer.mockReturnValue(messageComposer);
+
+    const { result } = renderHook(() => useIsCommandDisabled(command));
+
+    act(() => {
+      state.partialNext({ quotedMessage: generateMessage({ id: 'first-quoted-message' }) });
+    });
+
+    expect(result.current).toBe(true);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(2);
+
+    act(() => {
+      state.partialNext({ quotedMessage: generateMessage({ id: 'second-quoted-message' }) });
+    });
+
+    expect(result.current).toBe(true);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(2);
+  });
+});

package/src/contexts/messageInputContext/hooks/useIsCommandDisabled.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import type { CommandSuggestion, MessageComposerState } from 'stream-chat';
+
+import { useMessageComposer } from './useMessageComposer';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const hasQuotedMessageSelector = (state: MessageComposerState) => ({
+  hasQuotedMessage: !!state.quotedMessage,
+});
+
+export const useIsCommandDisabled = (command: CommandSuggestion) => {
+  const messageComposer = useMessageComposer();
+  const { hasQuotedMessage } = useStateStore(messageComposer.state, hasQuotedMessageSelector);
+
+  return useMemo(
+    () => messageComposer.isCommandDisabled(command),
+    // isCommandDisabled reads quotedMessage through the composer state getter.
+    // Keep this dependency scoped to quote presence, not quote object identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [command, hasQuotedMessage, messageComposer],
+  );
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.1.2-beta.2"
+  "version": "9.1.2-beta.4"
 }