stream-chat-react-native-core 5.5.1 → 5.6.0-beta.1

package/src/components/Chat/Chat.tsx

@@ -3,10 +3,9 @@ import { Image, Platform } from 'react-native';
 
 import Dayjs from 'dayjs';
 
-import type { Channel } from 'stream-chat';
+import type { Channel, StreamChat } from 'stream-chat';
 
 import { useAppSettings } from './hooks/useAppSettings';
-import { useConnectionRecovered } from './hooks/useConnectionRecovered';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -30,6 +29,7 @@ import init from '../../init';
 import { SDK } from '../../native';
 import { QuickSqliteClient } from '../../store/QuickSqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DBSyncManager } from '../../utils/DBSyncManager';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
@@ -197,10 +197,6 @@ const ChatWithContext = <
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
   const appSettings = useAppSettings(client, isOnline);
-  const { subscribeConnectionRecoveredCallback } = useConnectionRecovered<StreamChatGenerics>({
-    client,
-    enableOfflineSupport,
-  });
 
   const chatContext = useCreateChatContext({
     appSettings,
@@ -212,14 +208,14 @@ const ChatWithContext = <
     isOnline,
     mutedUsers,
     setActiveChannel,
-    subscribeConnectionRecoveredCallback,
   });
 
   useEffect(() => {
-    if (enableOfflineSupport) {
+    if (client.user?.id && enableOfflineSupport) {
       QuickSqliteClient.initializeDatabase();
+      DBSyncManager.init(client as unknown as StreamChat);
     }
-  }, []);
+  }, [client?.user?.id]);
 
   useSyncDatabase({
     client,

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

@@ -55,7 +55,7 @@ describe('Chat', () => {
     await waitFor(() => expect(netInfoFetch).toHaveBeenCalledTimes(1));
 
     const { connectionRecovering } = context;
-    act(() => dispatchConnectionChangedEvent(chatClient));
+    act(() => dispatchConnectionChangedEvent(chatClient, false));
     await waitFor(() => {
       expect(context.connectionRecovering).toStrictEqual(!connectionRecovering);
       expect(context.isOnline).toBeFalsy();

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

@@ -15,7 +15,6 @@ export const useCreateChatContext = <
   isOnline,
   mutedUsers,
   setActiveChannel,
-  subscribeConnectionRecoveredCallback,
 }: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
   const clientValues = client
@@ -36,7 +35,6 @@ export const useCreateChatContext = <
       isOnline,
       mutedUsers,
       setActiveChannel,
-      subscribeConnectionRecoveredCallback,
     }),
     [channelId, clientValues, connectionRecovering, isOnline, mutedUsersLength],
   );

package/src/components/Message/Message.tsx

@@ -123,6 +123,8 @@ export type MessagePropsWithContext<
   Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
+    | 'sendReaction'
+    | 'deleteMessage'
     | 'dismissKeyboardOnMessageTouch'
     | 'forceAlignMessages'
     | 'handleBlock'
@@ -145,6 +147,7 @@ export type MessagePropsWithContext<
     | 'onPressMessage'
     | 'OverlayReactionList'
     | 'removeMessage'
+    | 'deleteReaction'
     | 'retrySendMessage'
     | 'selectReaction'
     | 'setEditingState'
@@ -217,7 +220,9 @@ const MessageWithContext = <
   const isMessageTypeDeleted = props.message.type === 'deleted';
 
   const {
+    sendReaction,
     channel,
+    deleteMessage: deleteMessageFromContext,
     disabled,
     dismissKeyboard,
     dismissKeyboardOnMessageTouch,
@@ -256,6 +261,7 @@ const MessageWithContext = <
     OverlayReactionList,
     preventPress,
     removeMessage,
+    deleteReaction,
     retrySendMessage,
     selectReaction,
     setData,
@@ -460,14 +466,15 @@ const MessageWithContext = <
   } = useMessageActionHandlers({
     channel,
     client,
+    deleteMessage: deleteMessageFromContext,
+    deleteReaction,
     enforceUniqueReaction,
     message,
-    removeMessage,
     retrySendMessage,
+    sendReaction,
     setEditingState,
     setQuotedMessageState,
     supportedReactions,
-    updateMessage,
   });
 
   const {
@@ -486,6 +493,8 @@ const MessageWithContext = <
   } = useMessageActions({
     channel,
     client,
+    deleteMessage: deleteMessageFromContext,
+    deleteReaction,
     enforceUniqueReaction,
     handleBlock,
     handleCopy,
@@ -504,6 +513,7 @@ const MessageWithContext = <
     removeMessage,
     retrySendMessage,
     selectReaction,
+    sendReaction,
     setEditingState,
     setOverlay,
     setQuotedMessageState,
@@ -722,6 +732,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     chatContext: { mutedUsers: prevMutedUsers },
     goToMessage: prevGoToMessage,
+    groupStyles: prevGroupStyles,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
     lastReceivedId: prevLastReceivedId,
@@ -733,6 +744,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     chatContext: { mutedUsers: nextMutedUsers },
     goToMessage: nextGoToMessage,
+    groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
     lastReceivedId: nextLastReceivedId,
     members: nextMembers,
@@ -761,6 +773,10 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 
   if (goToMessageChangedAndMatters) return false;
 
+  const groupStylesEqual =
+    prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
+  if (!groupStylesEqual) return false;
+
   const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
   const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
 

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -21,6 +21,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Eye } from '../../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 type MessageFooterComponentProps = {
@@ -109,7 +110,7 @@ const MessageFooterWithContext = <
     );
   }
 
-  if (lastGroupMessage === false) {
+  if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
     return null;
   }
 

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -1,4 +1,4 @@
-import type { MessageResponse, Reaction } from 'stream-chat';
+import type { MessageResponse } from 'stream-chat';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
@@ -9,29 +9,29 @@ import type {
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { MessageStatusTypes } from '../../../utils/utils';
 
 export const useMessageActionHandlers = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel,
   client,
-  enforceUniqueReaction,
+  deleteMessage,
+  deleteReaction,
   message,
-  removeMessage,
   retrySendMessage,
+  sendReaction,
   setEditingState,
   setQuotedMessageState,
   supportedReactions,
-  updateMessage,
 }: Pick<
   MessagesContextValue<StreamChatGenerics>,
-  | 'removeMessage'
+  | 'sendReaction'
+  | 'deleteMessage'
+  | 'deleteReaction'
   | 'retrySendMessage'
   | 'setEditingState'
   | 'setQuotedMessageState'
   | 'supportedReactions'
-  | 'updateMessage'
 > &
   Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
@@ -48,12 +48,7 @@ export const useMessageActionHandlers = <
   );
 
   const handleDeleteMessage = async () => {
-    if (message.status === MessageStatusTypes.FAILED) {
-      removeMessage(message);
-    } else {
-      const data = await client.deleteMessage(message.id);
-      updateMessage(data.message);
-    }
+    await deleteMessage(message as MessageResponse<StreamChatGenerics>);
   };
 
   const handleToggleMuteUser = async () => {
@@ -128,15 +123,9 @@ export const useMessageActionHandlers = <
     try {
       if (channel && messageId) {
         if (ownReaction) {
-          await channel.deleteReaction(messageId, reactionType);
+          await deleteReaction(reactionType, messageId);
         } else {
-          await channel.sendReaction(
-            messageId,
-            {
-              type: reactionType,
-            } as Reaction<StreamChatGenerics>,
-            { enforce_unique: enforceUniqueReaction },
-          );
+          await sendReaction(reactionType, messageId);
         }
       }
     } catch (err) {

package/src/components/Message/hooks/useMessageActions.tsx

@@ -26,17 +26,19 @@ import {
 } from '../../../icons';
 import { setClipboardString } from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { removeReservedFields } from '../../../utils/removeReservedFields';
 import { MessageStatusTypes } from '../../../utils/utils';
 
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
-import { removeReservedFields } from '../utils/removeReservedFields';
 
 export const useMessageActions = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel,
   client,
+  deleteMessage: deleteMessageFromContext,
+  deleteReaction,
   enforceUniqueReaction,
   handleBlock,
   handleCopy,
@@ -52,17 +54,18 @@ export const useMessageActions = <
   message,
   onThreadSelect,
   openThread,
-  removeMessage,
   retrySendMessage,
   selectReaction,
+  sendReaction,
   setEditingState,
   setOverlay,
   setQuotedMessageState,
   supportedReactions,
   t,
-  updateMessage,
 }: Pick<
   MessagesContextValue<StreamChatGenerics>,
+  | 'deleteMessage'
+  | 'sendReaction'
   | 'handleBlock'
   | 'handleCopy'
   | 'handleDelete'
@@ -75,6 +78,7 @@ export const useMessageActions = <
   | 'handleReaction'
   | 'handleThreadReply'
   | 'removeMessage'
+  | 'deleteReaction'
   | 'retrySendMessage'
   | 'setEditingState'
   | 'setQuotedMessageState'
@@ -107,14 +111,15 @@ export const useMessageActions = <
   } = useMessageActionHandlers({
     channel,
     client,
+    deleteMessage: deleteMessageFromContext,
+    deleteReaction,
     enforceUniqueReaction,
     message,
-    removeMessage,
     retrySendMessage,
+    sendReaction,
     setEditingState,
     setQuotedMessageState,
     supportedReactions,
-    updateMessage,
   });
 
   const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -3,6 +3,7 @@ import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
+import { ChatContextValue, useChatContext } from '../../contexts';
 import {
   FileUpload,
   MessageInputContextValue,
@@ -126,7 +127,8 @@ type FileUploadPreviewPropsWithContext<
   MessageInputContextValue<StreamChatGenerics>,
   'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'>;
+  Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 const FileUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -135,6 +137,7 @@ const FileUploadPreviewWithContext = <
 ) => {
   const {
     AudioAttachment,
+    enableOfflineSupport,
     FileAttachmentIcon,
     fileUploads,
     removeFile,
@@ -211,7 +214,7 @@ const FileUploadPreviewWithContext = <
   } = useTheme();
 
   const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
 
     const lastIndexOfDot = item.file.name.lastIndexOf('.');
 
@@ -389,6 +392,7 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
   const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
@@ -403,6 +407,7 @@ export const FileUploadPreview = <
         setFileUploads,
         uploadFile,
       }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -11,6 +11,7 @@ import {
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
+import { ChatContextValue, useChatContext } from '../../contexts';
 import {
   ImageUpload,
   MessageInputContextValue,
@@ -78,7 +79,8 @@ type ImageUploadPreviewPropsWithContext<
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
   'imageUploads' | 'removeImage' | 'uploadImage'
->;
+> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 export type ImageUploadPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -91,7 +93,7 @@ const ImageUploadPreviewWithContext = <
 >(
   props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { imageUploads, removeImage, uploadImage } = props;
+  const { enableOfflineSupport, imageUploads, removeImage, uploadImage } = props;
 
   const {
     theme: {
@@ -129,7 +131,7 @@ const ImageUploadPreviewWithContext = <
   };
 
   const renderItem = ({ index, item }: ImageUploadPreviewItem) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
     const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
 
     return (
@@ -224,11 +226,13 @@ export const ImageUploadPreview = <
 >(
   props: ImageUploadPreviewProps<StreamChatGenerics>,
 ) => {
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedImageUploadPreviewWithContext
       {...{ imageUploads, removeImage, uploadImage }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/components/MessageInput/MessageInput.tsx

@@ -5,6 +5,7 @@ import type { UserResponse } from 'stream-chat';
 
 import { useCountdown } from './hooks/useCountdown';
 
+import { ChatContextValue, useChatContext } from '../../contexts';
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import {
   ChannelContextValue,
@@ -78,7 +79,8 @@ const styles = StyleSheet.create({
 
 type MessageInputPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled' | 'members' | 'watchers'> &
+> = Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
+  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled' | 'members' | 'watchers'> &
   Pick<
     MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
@@ -159,6 +161,7 @@ const MessageInputWithContext = <
     InputEditingStateHeader,
     InputGiphySearch,
     InputReplyStateHeader,
+    isOnline,
     isValidMessage,
     maxNumberOfFiles,
     members,
@@ -526,7 +529,7 @@ const MessageInputWithContext = <
                 ) : null}
                 {fileUploads.length ? <FileUploadPreview /> : null}
                 {giphyActive ? (
-                  <InputGiphySearch />
+                  <InputGiphySearch disabled={!isOnline} />
                 ) : (
                   <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
                     <AutoCompleteInput<StreamChatGenerics>
@@ -540,7 +543,11 @@ const MessageInputWithContext = <
                 {cooldownRemainingSeconds ? (
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (
-                  <SendButton disabled={disabled || sending.current || !isValidMessage()} />
+                  <SendButton
+                    disabled={
+                      disabled || sending.current || !isValidMessage() || (giphyActive && !isOnline)
+                    }
+                  />
                 )}
               </View>
             </>
@@ -598,6 +605,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     fileUploads: prevFileUploads,
     giphyActive: prevGiphyActive,
     imageUploads: prevImageUploads,
+    isOnline: prevIsOnline,
     isValidMessage: prevIsValidMessage,
     mentionedUsers: prevMentionedUsers,
     quotedMessage: prevQuotedMessage,
@@ -616,6 +624,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     fileUploads: nextFileUploads,
     giphyActive: nextGiphyActive,
     imageUploads: nextImageUploads,
+    isOnline: nextIsOnline,
     isValidMessage: nextIsValidMessage,
     mentionedUsers: nextMentionedUsers,
     quotedMessage: nextQuotedMessage,
@@ -661,6 +670,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const showMoreOptionsEqual = prevShowMoreOptions === nextShowMoreOptions;
   if (!showMoreOptionsEqual) return false;
 
+  const isOnlineEqual = prevIsOnline === nextIsOnline;
+  if (!isOnlineEqual) return false;
+
   const isValidMessageEqual = prevIsValidMessage() === nextIsValidMessage();
   if (!isValidMessageEqual) return false;
 
@@ -719,6 +731,7 @@ export const MessageInput = <
 >(
   props: MessageInputProps<StreamChatGenerics>,
 ) => {
+  const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
   const { disabled = false, members, watchers } = useChannelContext<StreamChatGenerics>();
@@ -809,6 +822,7 @@ export const MessageInput = <
         InputEditingStateHeader,
         InputGiphySearch,
         InputReplyStateHeader,
+        isOnline,
         isValidMessage,
         maxNumberOfFiles,
         members,

package/src/components/MessageInput/SendButton.tsx

@@ -38,7 +38,7 @@ const SendButtonWithContext = <
       style={[sendButton]}
       testID='send-button'
     >
-      {giphyActive && <Search pathFill={accent_blue} />}
+      {giphyActive && <Search pathFill={disabled ? grey_gainsboro : accent_blue} />}
       {!giphyActive && disabled && <SendRight pathFill={grey_gainsboro} />}
       {!giphyActive && !disabled && <SendUp pathFill={accent_blue} />}
     </TouchableOpacity>

package/src/components/index.ts

@@ -72,7 +72,6 @@ export * from './Chat/Chat';
 export * from './Chat/hooks/useCreateChatContext';
 export * from './Chat/hooks/useIsOnline';
 export * from './Chat/hooks/useMutedUsers';
-export * from './Chat/hooks/useConnectionRecovered';
 export * from './Chat/hooks/useSyncDatabase';
 
 export * from './ImageGallery/ImageGallery';
@@ -109,7 +108,7 @@ export * from './Message/MessageSimple/MessageTextContainer';
 export * from './Message/MessageSimple/ReactionList';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';
-export * from './Message/utils/removeReservedFields';
+export * from '../utils/removeReservedFields';
 
 export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import type { ImageProps } from 'react-native';
 
-import type { AppSettingsAPIResponse, Channel, EventHandler, Mute, StreamChat } from 'stream-chat';
+import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -44,7 +44,6 @@ export type ChatContextValue<
    * @overrideType Function
    */
   setActiveChannel: (newChannel?: Channel<StreamChatGenerics>) => void;
-  subscribeConnectionRecoveredCallback: (callback: EventHandler<StreamChatGenerics>) => () => void;
   /**
    * Instance of channel object from stream-chat package.
    *