stream-chat-react-native-core 4.4.0 → 4.5.0-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/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,
         });

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -13,13 +13,15 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
+import { Warning } from '../../icons/Warning';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
+import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 
 const FILE_PREVIEW_HEIGHT = 60;
+const WARNING_ICON_SIZE = 16;
 
 const styles = StyleSheet.create({
   dismiss: {
@@ -59,8 +61,55 @@ const styles = StyleSheet.create({
     marginLeft: 8,
     marginRight: 8,
   },
+  unsupportedFile: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+  },
+  unsupportedFileText: {
+    fontSize: 16,
+  },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginTop: 4,
+  },
 });
 
+const UnsupportedFileTypeOrFileSizeIndicator = ({
+  indicatorType,
+  item,
+}: {
+  indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes];
+  item: FileUpload;
+}) => {
+  const {
+    theme: {
+      colors: { accent_red, grey },
+      messageInput: {
+        fileUploadPreview: { fileSizeText },
+      },
+    },
+  } = useTheme();
+
+  const { t } = useTranslationContext();
+  return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
+    <View style={styles.unsupportedFile}>
+      <Warning
+        height={WARNING_ICON_SIZE}
+        pathFill={accent_red}
+        style={styles.warningIconStyle}
+        width={WARNING_ICON_SIZE}
+      />
+      <Text style={[styles.unsupportedFileText, { color: grey }]}>
+        {t('File type not supported')}
+      </Text>
+    </View>
+  ) : (
+    <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
+      {getFileSizeDisplayText(item.file.size)}
+    </Text>
+  );
+};
+
 type FileUploadPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
@@ -81,14 +130,13 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey, grey_whisper, overlay },
+      colors: { black, grey_whisper, overlay },
       messageInput: {
         fileUploadPreview: {
           dismiss,
           fileContainer,
           fileContentContainer,
           filenameText,
-          fileSizeText,
           fileTextContainer,
           flatList,
         },
@@ -97,12 +145,7 @@ const FileUploadPreviewWithContext = <
   } = useTheme();
 
   const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
-    const indicatorType =
-      item.state === FileState.UPLOADING
-        ? ProgressIndicatorTypes.IN_PROGRESS
-        : item.state === FileState.UPLOAD_FAILED
-        ? ProgressIndicatorTypes.RETRY
-        : undefined;
+    const indicatorType = getIndicatorTypeForFileState(item.state);
 
     return (
       <>
@@ -110,7 +153,6 @@ const FileUploadPreviewWithContext = <
           action={() => {
             uploadFile({ newFile: item });
           }}
-          active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
           style={styles.overlay}
           type={indicatorType}
         >
@@ -150,9 +192,12 @@ const FileUploadPreviewWithContext = <
                 >
                   {item.file.name || ''}
                 </Text>
-                <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-                  {getFileSizeDisplayText(item.file.size)}
-                </Text>
+                {indicatorType !== null && (
+                  <UnsupportedFileTypeOrFileSizeIndicator
+                    indicatorType={indicatorType}
+                    item={item}
+                  />
+                )}
               </View>
             </View>
           </View>
@@ -235,6 +280,7 @@ export const FileUploadPreview = <
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
   const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
+
   const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (