stream-chat-react-native-core 4.4.0 → 4.5.1-beta.1

package/src/components/Attachment/Card.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Image,
   ImageStyle,
-  Linking,
   StyleProp,
   StyleSheet,
   Text,
@@ -14,6 +13,8 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
+import { useGoToURL } from './hooks/useGoToURL';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -67,17 +68,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const goToURL = (url?: string) => {
-  if (!url) return;
-  Linking.canOpenURL(url).then((supported) => {
-    if (supported) {
-      Linking.openURL(url);
-    } else {
-      console.log(`Don't know how to open URI: ${url}`);
-    }
-  });
-};
-
 export type CardPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Attachment<StreamChatGenerics> &
@@ -149,7 +139,9 @@ const CardWithContext = <
 
   const uri = image_url || thumb_url;
 
-  const defaultOnPress = () => goToURL(og_scrape_url || uri);
+  const [error, openURL] = useGoToURL(og_scrape_url || uri);
+
+  const defaultOnPress = () => !error && openURL && openURL();
 
   return (
     <TouchableOpacity

package/src/components/Attachment/FileAttachment.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Linking,
   StyleProp,
   StyleSheet,
   Text,
@@ -12,6 +11,8 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
+import { useGoToURL } from './hooks/useGoToURL';
+
 import { AttachmentActions as AttachmentActionsDefault } from '../../components/Attachment/AttachmentActions';
 import { FileIcon as FileIconDefault } from '../../components/Attachment/FileIcon';
 import {
@@ -94,7 +95,9 @@ const FileAttachmentWithContext = <
     },
   } = useTheme();
 
-  const defaultOnPress = () => goToURL(attachment.asset_url);
+  const [error, openURL] = useGoToURL(attachment.asset_url);
+
+  const defaultOnPress = () => !error && openURL && openURL();
 
   return (
     <TouchableOpacity
@@ -190,15 +193,4 @@ export const getFileSizeDisplayText = (size?: number | string) => {
   return `${Math.floor(Math.floor(size / 10000) / 100)} MB`;
 };
 
-export const goToURL = (url?: string) => {
-  if (!url) return;
-  Linking.canOpenURL(url).then((supported) => {
-    if (supported) {
-      Linking.openURL(url);
-    } else {
-      console.log(`Don't know how to open URI: ${url}`);
-    }
-  });
-};
-
 FileAttachment.displayName = 'FileAttachment{messageSimple{file}}';

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import { Linking } from 'react-native';
+
+import { act, renderHook } from '@testing-library/react-hooks';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -15,6 +18,7 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
+import { useGoToURL } from '../hooks/useGoToURL';
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
@@ -120,4 +124,39 @@ describe('Attachment', () => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });
+
+  it('should open the URL in the browser', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(true));
+
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(false));
+
+    const { result, waitFor } = renderHook(() => useGoToURL('www.google.com'));
+
+    const [error, openURL] = result.current;
+
+    await act(openURL);
+
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(error).not.toBeTruthy();
+      expect(Linking.openURL).toHaveBeenCalled();
+    });
+  });
+
+  it('should open the URL in the browser when no url', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(false));
+
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(true));
+
+    const { result, waitForNextUpdate } = await renderHook(() => useGoToURL());
+    const [error, openURL] = result.current;
+
+    act(openURL);
+
+    await waitForNextUpdate(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(error).toBeTruthy();
+      expect(Linking.openURL).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/Attachment/hooks/useGoToURL.ts

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { Linking } from 'react-native';
+
+export type UseGoToURLType = (url?: string) => [boolean, () => Promise<void>];
+
+export const useGoToURL: UseGoToURLType = (url?: string) => {
+  const [error, setError] = useState<boolean>(false);
+
+  let finalUrl = url as string;
+  const pattern = new RegExp(/^\S+:\/\//);
+
+  if (!pattern.test(finalUrl)) {
+    finalUrl = 'http://' + url;
+  }
+
+  const openURL = () =>
+    Linking.canOpenURL(finalUrl).then((supported) => {
+      if (supported) {
+        Linking.openURL(finalUrl);
+      } else {
+        setError(true);
+        console.log(`Don't know how to open URI: ${finalUrl}`);
+      }
+    });
+
+  return [error, openURL];
+};

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   BackHandler,
   Dimensions,
@@ -200,13 +200,7 @@ export const AttachmentPicker = React.forwardRef(
     const [hasNextPage, setHasNextPage] = useState(true);
     const [loadingPhotos, setLoadingPhotos] = useState(false);
     const [photos, setPhotos] = useState<Asset[]>([]);
-
-    const hideAttachmentPicker = () => {
-      setSelectedPicker(undefined);
-      if ((ref as React.MutableRefObject<BottomSheet>)?.current) {
-        (ref as React.MutableRefObject<BottomSheet>).current.close();
-      }
-    };
+    const bottomSheetCloseOnKeyboardShowTimeout = useRef<NodeJS.Timeout>();
 
     const getMorePhotos = async () => {
       if (hasNextPage && !loadingPhotos && currentIndex > -1 && selectedPicker === 'images') {
@@ -248,6 +242,20 @@ export const AttachmentPicker = React.forwardRef(
     }, [selectedPicker]);
 
     useEffect(() => {
+      const hideAttachmentPicker = () => {
+        if (bottomSheetCloseOnKeyboardShowTimeout.current) {
+          clearTimeout(bottomSheetCloseOnKeyboardShowTimeout.current);
+        }
+        setSelectedPicker(undefined);
+        // This short timeout is to prevent a race condition
+        // where the close function is called during the point when a internal container layout happens within the bottomsheet due to keyboard affecting the layout
+        // If the container layout measures a shorter height than previous but if the close snapped to the previous height's position, the bottom sheet will show up
+        // this short delay ensures that close function is always called after a container layout due to keyboard change
+        bottomSheetCloseOnKeyboardShowTimeout.current = setTimeout(
+          () => (ref as React.MutableRefObject<BottomSheet | undefined>).current?.close(),
+          150,
+        );
+      };
       const keyboardSubscription =
         Platform.OS === 'ios'
           ? Keyboard.addListener('keyboardWillShow', hideAttachmentPicker)
@@ -265,6 +273,9 @@ export const AttachmentPicker = React.forwardRef(
         } else {
           Keyboard.removeListener('keyboardDidShow', hideAttachmentPicker);
         }
+        if (bottomSheetCloseOnKeyboardShowTimeout.current) {
+          clearTimeout(bottomSheetCloseOnKeyboardShowTimeout.current);
+        }
       };
     }, []);
 
@@ -326,35 +337,24 @@ export const AttachmentPicker = React.forwardRef(
           : statusBarHeight
         : 0;
 
-    const initialSnapPoint = useMemo(
-      () =>
-        attachmentPickerBottomSheetHeight ?? Platform.OS === 'android'
-          ? 308 +
-            (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) -
-            handleHeight
-          : 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment),
-      [
-        attachmentPickerBottomSheetHeight,
-        androidBottomBarHeightAdjustment,
-        fullScreenHeight,
-        handleHeight,
-        screenHeight,
-      ],
-    );
+    const initialSnapPoint =
+      attachmentPickerBottomSheetHeight ?? Platform.OS === 'android'
+        ? 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) - handleHeight
+        : 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment);
 
-    const finalSnapPoint = useMemo(
-      () =>
-        Platform.OS === 'android'
-          ? fullScreenHeight - topInset - handleHeight
-          : fullScreenHeight - topInset,
-      [fullScreenHeight, handleHeight, topInset],
-    );
+    const finalSnapPoint =
+      Platform.OS === 'android'
+        ? fullScreenHeight - topInset - handleHeight
+        : fullScreenHeight - topInset;
 
     /**
      * Snap points changing cause a rerender of the position,
      * this is an issue if you are calling close on the bottom sheet.
      */
-    const snapPoints = [initialSnapPoint, finalSnapPoint];
+    const snapPoints = useMemo(
+      () => [initialSnapPoint, finalSnapPoint],
+      [initialSnapPoint, finalSnapPoint],
+    );
 
     return (
       <>
@@ -370,7 +370,7 @@ export const AttachmentPicker = React.forwardRef(
           }
           handleHeight={handleHeight}
           index={-1}
-          onChange={(index: number) => setCurrentIndex(index)}
+          onChange={setCurrentIndex}
           ref={ref}
           snapPoints={snapPoints}
         >

package/src/components/Channel/Channel.tsx

@@ -1606,7 +1606,7 @@ const ChannelWithContext = <
     watchers,
   });
 
-  const inputMessageInputContext = useCreateInputMessageInputContext({
+  const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
     autoCompleteSuggestionsLimit,

package/src/components/Channel/hooks/useCreatePaginatedMessageListContext.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { reduceMessagesToString } from '../../../utils/utils';
 
 export const useCreatePaginatedMessageListContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -18,14 +19,7 @@ export const useCreatePaginatedMessageListContext = <
 }: PaginatedMessageListContextValue<StreamChatGenerics> & {
   channelId?: string;
 }) => {
-  const messagesUpdated = messages
-    .map(
-      ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
-        `${deleted_at}${
-          latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at?.toISOString?.() || updated_at}`,
-    )
-    .join();
+  const messagesStr = reduceMessagesToString(messages);
 
   const paginatedMessagesContext: PaginatedMessageListContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -38,7 +32,7 @@ export const useCreatePaginatedMessageListContext = <
       setLoadingMore,
       setLoadingMoreRecent,
     }),
-    [channelId, hasMore, loadingMoreRecent, loadingMore, messagesUpdated],
+    [channelId, hasMore, loadingMoreRecent, loadingMore, messagesStr],
   );
 
   return paginatedMessagesContext;

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { reduceMessagesToString } from '../../../utils/utils';
 
 export const useCreateThreadContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -19,14 +20,7 @@ export const useCreateThreadContext = <
 }: ThreadContextValue<StreamChatGenerics>) => {
   const threadId = thread?.id;
   const threadReplyCount = thread?.reply_count;
-  const threadMessagesUpdated = threadMessages
-    .map(
-      ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
-        `${deleted_at}${
-          latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at.toISOString()}`,
-    )
-    .join();
+  const threadMessagesStr = reduceMessagesToString(threadMessages);
 
   const threadContext: ThreadContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -46,7 +40,7 @@ export const useCreateThreadContext = <
       threadHasMore,
       threadId,
       threadLoadingMore,
-      threadMessagesUpdated,
+      threadMessagesStr,
       threadReplyCount,
     ],
   );

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -55,6 +55,7 @@ describe('useChannelUpdated', () => {
       render(
         <ChatContext.Provider
           value={{
+            appSettings: null,
             client: mockClient,
             connectionRecovering: false,
             isOnline: true,

package/src/components/Chat/Chat.tsx

@@ -5,6 +5,7 @@ import Dayjs from 'dayjs';
 
 import type { Channel } from 'stream-chat';
 
+import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -161,7 +162,10 @@ const ChatWithContext = <
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
+  const appSettings = useAppSettings(client, isOnline);
+
   const chatContext = useCreateChatContext({
+    appSettings,
     channel,
     client,
     connectionRecovering,

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { StreamChat } from 'stream-chat';
+
+import { useAppSettings } from '../useAppSettings';
+
+describe('useAppSettings', () => {
+  it('will return a settings object if the backend call is successful', async () => {
+    const TestComponent = () => {
+      const isOnline = true;
+      const appSettings = useAppSettings(
+        {
+          getAppSettings: jest.fn().mockReturnValue(
+            Promise.resolve({
+              auto_translation_enabled: true,
+            }),
+          ),
+        } as unknown as StreamChat,
+        isOnline,
+      );
+
+      return <Text>{JSON.stringify(appSettings)}</Text>;
+    };
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(JSON.stringify({ auto_translation_enabled: true }))).toBeTruthy();
+    });
+  });
+});

package/src/components/Chat/hooks/useAppSettings.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from 'stream-chat-react-native';
+
+export const useAppSettings = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  client: StreamChat<StreamChatGenerics>,
+  isOnline: boolean,
+): AppSettingsAPIResponse | null => {
+  const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    async function getAppSettings() {
+      try {
+        const appSettings = await client.getAppSettings();
+        if (isMounted.current) {
+          setAppSettings(appSettings);
+        }
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          console.error(`An error occurred while getting app settings: ${error}`);
+        }
+      }
+    }
+
+    if (isOnline) {
+      getAppSettings();
+    }
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [client, isOnline]);
+
+  return appSettings;
+};

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -6,6 +6,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const useCreateChatContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  appSettings,
   channel,
   client,
   connectionRecovering,
@@ -21,6 +22,7 @@ export const useCreateChatContext = <
 
   const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
     () => ({
+      appSettings,
       channel,
       client,
       connectionRecovering,

package/src/components/Message/Message.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -52,21 +52,34 @@ import {
 } from '../MessageList/hooks/useMessageList';
 import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 
+export type TouchableEmitter =
+  | 'card'
+  | 'fileAttachment'
+  | 'gallery'
+  | 'giphy'
+  | 'message'
+  | 'messageContent'
+  | 'messageReplies'
+  | 'reactionList'
+  | 'textLink';
+
+export type TextMentionTouchableHandlerPayload<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  emitter: 'textMention';
+  additionalInfo?: { user?: UserResponse<StreamChatGenerics> };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
-  emitter?:
-    | 'card'
-    | 'fileAttachment'
-    | 'gallery'
-    | 'giphy'
-    | 'message'
-    | 'messageContent'
-    | 'messageReplies'
-    | 'reactionList'
-    | 'textLink'
-    | 'textMention';
   event?: GestureResponderEvent;
-};
+} & (
+  | {
+      additionalInfo?: Record<string, unknown>;
+      emitter?: TouchableEmitter;
+    }
+  | TextMentionTouchableHandlerPayload
+);
 
 export type MessageTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -595,45 +608,40 @@ const MessageWithContext = <
     onlyEmojis,
     onOpenThread,
     onPress: (payload) => {
-      onPressProp
-        ? onPressProp({
-            actionHandlers,
-            defaultHandler: payload.defaultHandler || onPress,
-            emitter: payload.emitter || 'message',
-            event: payload.event,
-            message,
-          })
-        : onPressMessageProp
-        ? onPressMessageProp({
-            actionHandlers,
-            defaultHandler: payload.defaultHandler || onPress,
-            emitter: payload.emitter || 'message',
-            event: payload.event,
-            message,
-          })
-        : payload.defaultHandler
-        ? payload.defaultHandler()
-        : onPress();
+      const onPressArgs = {
+        actionHandlers,
+        additionalInfo: payload.additionalInfo,
+        defaultHandler: payload.defaultHandler || onPress,
+        emitter: payload.emitter || 'message',
+        event: payload.event,
+        message,
+      };
+
+      const handleOnPress = () => {
+        if (onPressProp) return onPressProp(onPressArgs);
+        if (onPressMessageProp) return onPressMessageProp(onPressArgs);
+        if (payload.defaultHandler) return payload.defaultHandler();
+
+        return onPress();
+      };
+
+      handleOnPress();
     },
     onPressIn:
       onPressInProp || onPressInMessageProp
         ? (payload) => {
-            onPressInProp
-              ? onPressInProp({
-                  actionHandlers,
-                  defaultHandler: payload.defaultHandler,
-                  emitter: payload.emitter || 'message',
-                  event: payload.event,
-                  message,
-                })
-              : onPressInMessageProp &&
-                onPressInMessageProp({
-                  actionHandlers,
-                  defaultHandler: payload.defaultHandler,
-                  emitter: payload.emitter || 'message',
-                  event: payload.event,
-                  message,
-                });
+            const onPressInArgs = {
+              actionHandlers,
+              defaultHandler: payload.defaultHandler,
+              emitter: payload.emitter || 'message',
+              event: payload.event,
+              message,
+            };
+            const handleOnpressIn = () => {
+              if (onPressInProp) return onPressInProp(onPressInArgs);
+              if (onPressInMessageProp) return onPressInMessageProp(onPressInArgs);
+            };
+            handleOnpressIn();
           }
         : null,
     otherAttachments: attachments.other,

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -17,6 +17,8 @@ import {
   State,
 } from 'simple-markdown';
 
+import type { UserResponse } from 'stream-chat';
+
 import { parseLinksFromText } from './parseLinks';
 
 import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
@@ -147,10 +149,16 @@ export const renderText = <
     },
   };
 
-  const onLink = (url: string) =>
-    onLinkParams
+  const onLink = (url: string) => {
+    const pattern = new RegExp(/^\S+:\/\//);
+    if (!pattern.test(url)) {
+      url = 'http://' + url;
+    }
+
+    return onLinkParams
       ? onLinkParams(url)
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
+  };
 
   const link: ReactNodeOutput = (node, output, { ...state }) => {
     const onPress = (event: GestureResponderEvent) => {
@@ -205,9 +213,16 @@ export const renderText = <
   const match: MatchFunction = (source) => regEx.exec(source);
 
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
+    /**removes the @ prefix of username */
+    const userName = node.content[0]?.content?.substring(1);
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
+          additionalInfo: {
+            user: mentioned_users?.find(
+              (user: UserResponse<StreamChatGenerics>) => userName === user.name,
+            ),
+          },
           emitter: 'textMention',
           event,
         });