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

package/src/components/Channel/Channel.tsx

@@ -3,13 +3,16 @@ import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native'
 
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
+
+import { lookup } from 'mime-types';
 import {
+  Channel as ChannelClass,
   ChannelState,
   Channel as ChannelType,
-  ConnectionChangeEvent,
   EventHandler,
   logChatPromiseExecution,
   MessageResponse,
+  Reaction,
   SendMessageAPIResponse,
   StreamChat,
   Event as StreamEvent,
@@ -72,8 +75,13 @@ import {
   WutReaction,
 } from '../../icons';
 import { FlatList as FlatListDefault } from '../../native';
+import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
+import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
+import { DBSyncManager } from '../../utils/DBSyncManager';
+import { dropPendingTasks, queueTask } from '../../utils/pendingTaskUtils';
+import { removeReactionFromLocalState } from '../../utils/removeReactionFromLocalState';
+import { generateRandomId, isLocalUrl, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
 import { AudioAttachment as AudioAttachmentDefault } from '../Attachment/AudioAttachment';
@@ -174,7 +182,7 @@ const throttleOptions = {
   trailing: true,
 };
 const debounceOptions = {
-  leading: true,
+  leading: false,
   trailing: true,
 };
 
@@ -196,7 +204,7 @@ export type ChannelPropsWithContext<
       | 'StickyHeader'
     >
   > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'enableOfflineSupport'> &
   Partial<
     Omit<
       InputMessageInputContextValue<StreamChatGenerics>,
@@ -422,6 +430,7 @@ const ChannelWithContext = <
     doUpdateMessageRequest,
     EmptyStateIndicator = EmptyStateIndicatorDefault,
     enableMessageGroupingByUser = true,
+    enableOfflineSupport,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
     FileAttachmentGroup = FileAttachmentGroupDefault,
@@ -673,14 +682,14 @@ const ChannelWithContext = <
   ).current;
 
   const copyMessagesState = useRef(
-    throttle(
+    debounce(
       () => {
         if (channel) {
           setMessages([...channel.state.messages]);
         }
       },
       newMessageStateUpdateThrottleInterval,
-      throttleOptions,
+      debounceOptions,
     ),
   ).current;
 
@@ -709,7 +718,7 @@ const ChannelWithContext = <
   ).current;
 
   const copyChannelState = useRef(
-    throttle(
+    debounce(
       () => {
         setLoading(false);
         if (channel) {
@@ -722,21 +731,12 @@ const ChannelWithContext = <
         }
       },
       stateUpdateThrottleInterval,
-      throttleOptions,
+      debounceOptions,
     ),
   ).current;
 
-  const connectionRecoveredHandler = () => {
-    if (channel && shouldSyncChannel) {
-      copyChannelState();
-      if (thread) {
-        setThreadMessages([...channel.state.threads[thread.id]]);
-      }
-    }
-  };
-
-  const connectionChangedHandler = (event: ConnectionChangeEvent) => {
-    if (event.online && shouldSyncChannel) {
+  const connectionChangedHandler = () => {
+    if (shouldSyncChannel) {
       resyncChannel();
     }
   };
@@ -777,8 +777,7 @@ const ChannelWithContext = <
        * The more complex sync logic around internet connectivity (NetInfo) is part of Chat.tsx
        * listen to client.connection.recovered and all channel events
        */
-      clientSubscriptions.push(client.on('connection.recovered', connectionRecoveredHandler));
-      clientSubscriptions.push(client.on('connection.changed', connectionChangedHandler));
+      clientSubscriptions.push(DBSyncManager.onSyncStatusChange(connectionChangedHandler));
       clientSubscriptions.push(
         client.on('channel.deleted', (event) => {
           if (event.cid === channel.cid) {
@@ -795,7 +794,7 @@ const ChannelWithContext = <
       clientSubscriptions.forEach((s) => s.unsubscribe());
       channelSubscriptions.forEach((s) => s.unsubscribe());
     };
-  }, [channelId, connectionChangedHandler, connectionRecoveredHandler, handleEvent]);
+  }, [channelId, connectionChangedHandler, handleEvent]);
 
   const channelQueryCallRef = useRef(
     async (
@@ -906,7 +905,6 @@ const ChannelWithContext = <
 
   const reloadThread = async () => {
     if (!channel || !thread?.id) return;
-
     setThreadLoadingMore(true);
     try {
       const parentID = thread.id;
@@ -1231,56 +1229,124 @@ const ChannelWithContext = <
     return preview;
   };
 
+  const uploadPendingAttachments = async (message: MessageResponse<StreamChatGenerics>) => {
+    const updatedMessage = { ...message };
+    if (updatedMessage.attachments?.length) {
+      for (let i = 0; i < updatedMessage.attachments?.length; i++) {
+        // TODO: abstract the following logic to a separate function for DRY within MessageInputContext
+        const attachment = updatedMessage.attachments[i];
+        const file = attachment.originalFile;
+        // check if image_url is not a remote url
+        if (
+          attachment.type === 'image' &&
+          file?.uri &&
+          attachment.image_url &&
+          isLocalUrl(attachment.image_url)
+        ) {
+          const filename = file.uri.replace(/^(file:\/\/|content:\/\/|assets-library:\/\/)/, '');
+          const contentType = lookup(filename) || 'multipart/form-data';
+
+          const uploadResponse = doImageUploadRequest
+            ? await doImageUploadRequest(file, channel)
+            : await channel.sendImage(file?.uri, filename, contentType);
+
+          attachment.image_url = uploadResponse.file;
+          delete attachment.originalFile;
+
+          dbApi.updateMessage({
+            message: { ...updatedMessage, cid: channel.cid },
+          });
+        }
+
+        if (
+          (attachment.type === 'file' ||
+            attachment.type === 'audio' ||
+            attachment.type === 'video') &&
+          attachment.asset_url &&
+          isLocalUrl(attachment.asset_url) &&
+          file?.uri
+        ) {
+          const response = doDocUploadRequest
+            ? await doDocUploadRequest(file, channel)
+            : await channel.sendFile(file.uri, file.name, file.type);
+          attachment.asset_url = response.file;
+          delete attachment.originalFile;
+          dbApi.updateMessage({
+            message: { ...updatedMessage, cid: channel.cid },
+          });
+        }
+      }
+    }
+
+    return updatedMessage;
+  };
+
   const sendMessageRequest = async (
     message: MessageResponse<StreamChatGenerics>,
     retrying?: boolean,
   ) => {
-    const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      __html,
-      attachments,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      created_at,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      html,
-      id,
-      mentioned_users,
-      parent_id,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      quoted_message,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      reactions,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      status,
-      text,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      type,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      updated_at,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      user,
-      ...extraFields
-    } = message;
-
-    const messageData = {
-      attachments,
-      id: retrying ? undefined : id,
-      mentioned_users: mentioned_users?.map((mentionedUser) => mentionedUser.id) || [],
-      parent_id,
-      text,
-      ...extraFields,
-    } as StreamMessage<StreamChatGenerics>;
-
     try {
-      let messageResponse = {} as SendMessageAPIResponse<StreamChatGenerics>;
+      const updatedMessage = await uploadPendingAttachments(message);
+      const {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        __html,
+        attachments,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        created_at,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        deleted_at,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        html,
+        id,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        latest_reactions,
+        mentioned_users,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        own_reactions,
+        parent_id,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        quoted_message,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        reaction_counts,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        reactions,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        status,
+        text,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        type,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        updated_at,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        user,
+        ...extraFields
+      } = updatedMessage;
+      if (!channel.id) return;
+
+      const messageData = {
+        attachments,
+        id,
+        mentioned_users: mentioned_users?.map((mentionedUser) => mentionedUser.id) || [],
+        parent_id,
+        text,
+        ...extraFields,
+      } as StreamMessage<StreamChatGenerics>;
 
+      let messageResponse = {} as SendMessageAPIResponse<StreamChatGenerics>;
       if (doSendMessageRequest) {
         messageResponse = await doSendMessageRequest(channel?.cid || '', messageData);
       } else if (channel) {
         messageResponse = await channel.sendMessage(messageData);
       }
+
       if (messageResponse.message) {
         messageResponse.message.status = MessageStatusTypes.RECEIVED;
+
+        if (enableOfflineSupport) {
+          dbApi.updateMessage({
+            message: { ...messageResponse.message, cid: channel.cid },
+          });
+        }
         if (retrying) {
           replaceMessage(message, messageResponse.message);
         } else {
@@ -1290,7 +1356,13 @@ const ChannelWithContext = <
     } catch (err) {
       console.log(err);
       message.status = MessageStatusTypes.FAILED;
-      updateMessage(message);
+      updateMessage({ ...message, cid: channel.cid });
+
+      if (enableOfflineSupport) {
+        dbApi.updateMessage({
+          message: { ...message, cid: channel.cid },
+        });
+      }
     }
   };
 
@@ -1315,6 +1387,16 @@ const ChannelWithContext = <
       messageInput: '',
     });
 
+    if (enableOfflineSupport) {
+      // While sending a message, we add the message to local db with failed status, so that
+      // if app gets closed before message gets sent and next time user opens the app
+      // then user can see that message in failed state and can retry.
+      // If succesfull, it will be updated with received status.
+      dbApi.upsertMessages({
+        messages: [{ ...messagePreview, cid: channel.cid, status: MessageStatusTypes.FAILED }],
+      });
+    }
+
     await sendMessageRequest(messagePreview);
   };
 
@@ -1327,6 +1409,7 @@ const ChannelWithContext = <
     };
 
     updateMessage(statusPendingMessage);
+
     await sendMessageRequest(statusPendingMessage, true);
   };
 
@@ -1469,6 +1552,127 @@ const ChannelWithContext = <
         setThreadMessages(channel.state.threads[thread.id] || []);
       }
     }
+
+    if (enableOfflineSupport) {
+      dbApi.deleteMessage({
+        id: message.id,
+      });
+    }
+  };
+
+  const sendReaction = async (type: string, messageId: string) => {
+    if (!channel?.id || !client.user) {
+      throw new Error('Channel has not been initialized');
+    }
+
+    const payload: Parameters<ChannelClass<StreamChatGenerics>['sendReaction']> = [
+      messageId,
+      {
+        type,
+      } as Reaction<StreamChatGenerics>,
+      { enforce_unique: enforceUniqueReaction },
+    ];
+
+    if (!enableOfflineSupport) {
+      await channel.sendReaction(...payload);
+      return;
+    }
+
+    addReactionToLocalState<StreamChatGenerics>({
+      channel,
+      enforceUniqueReaction,
+      messageId,
+      reactionType: type,
+      user: client.user,
+    });
+
+    setMessages(channel.state.messages);
+
+    await queueTask<StreamChatGenerics>({
+      client,
+      task: {
+        channelId: channel.id,
+        channelType: channel.type,
+        messageId,
+        payload,
+        type: 'send-reaction',
+      },
+    });
+  };
+  const deleteMessage: MessagesContextValue<StreamChatGenerics>['deleteMessage'] = async (
+    message,
+  ) => {
+    if (!channel.id) {
+      throw new Error('Channel has not been initialized yet');
+    }
+
+    if (!enableOfflineSupport) {
+      await client.deleteMessage(message.id);
+      return;
+    }
+
+    if (message.status === MessageStatusTypes.FAILED) {
+      dropPendingTasks({ messageId: message.id });
+      removeMessage(message);
+    } else {
+      updateMessage({
+        ...message,
+        cid: channel.cid,
+        deleted_at: new Date().toISOString(),
+        type: 'deleted',
+      });
+
+      const data = await queueTask<StreamChatGenerics>({
+        client,
+        task: {
+          channelId: channel.id,
+          channelType: channel.type,
+          messageId: message.id,
+          payload: [message.id],
+          type: 'delete-message',
+        },
+      });
+
+      if (data?.message) {
+        updateMessage({ ...data.message });
+      }
+    }
+  };
+
+  const deleteReaction: MessagesContextValue<StreamChatGenerics>['deleteReaction'] = async (
+    type: string,
+    messageId: string,
+  ) => {
+    if (!channel?.id || !client.user) {
+      throw new Error('Channel has not been initialized');
+    }
+
+    const payload: Parameters<ChannelClass['deleteReaction']> = [messageId, type];
+
+    if (!enableOfflineSupport) {
+      await channel.deleteReaction(...payload);
+      return;
+    }
+
+    removeReactionFromLocalState({
+      channel,
+      messageId,
+      reactionType: type,
+      user: client.user,
+    });
+
+    setMessages(channel.state.messages);
+
+    await queueTask({
+      client,
+      task: {
+        channelId: channel.id,
+        channelType: channel.type,
+        messageId,
+        payload,
+        type: 'delete-reaction',
+      },
+    });
   };
 
   /**
@@ -1654,6 +1858,8 @@ const ChannelWithContext = <
     channelId,
     DateHeader,
     deletedMessagesVisibilityType,
+    deleteMessage,
+    deleteReaction,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch,
     enableMessageGroupingByUser,
@@ -1713,6 +1919,7 @@ const ChannelWithContext = <
     retrySendMessage,
     ScrollToBottomButton,
     selectReaction,
+    sendReaction,
     setEditingState,
     setQuotedMessageState,
     supportedReactions,
@@ -1808,7 +2015,7 @@ export const Channel = <
 >(
   props: PropsWithChildren<ChannelProps<StreamChatGenerics>>,
 ) => {
-  const { client } = useChatContext<StreamChatGenerics>();
+  const { client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
   const shouldSyncChannel = props.thread?.id ? !!props.threadList : true;
@@ -1837,6 +2044,7 @@ export const Channel = <
     <ChannelWithContext<StreamChatGenerics>
       {...{
         client,
+        enableOfflineSupport,
         t,
       }}
       {...props}

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

@@ -17,6 +17,8 @@ export const useCreateMessagesContext = <
   channelId,
   DateHeader,
   deletedMessagesVisibilityType,
+  deleteMessage,
+  deleteReaction,
   disableTypingIndicator,
   dismissKeyboardOnMessageTouch,
   enableMessageGroupingByUser,
@@ -76,6 +78,7 @@ export const useCreateMessagesContext = <
   retrySendMessage,
   ScrollToBottomButton,
   selectReaction,
+  sendReaction,
   setEditingState,
   setQuotedMessageState,
   supportedReactions,
@@ -108,6 +111,8 @@ export const useCreateMessagesContext = <
       CardHeader,
       DateHeader,
       deletedMessagesVisibilityType,
+      deleteMessage,
+      deleteReaction,
       disableTypingIndicator,
       dismissKeyboardOnMessageTouch,
       enableMessageGroupingByUser,
@@ -167,6 +172,7 @@ export const useCreateMessagesContext = <
       retrySendMessage,
       ScrollToBottomButton,
       selectReaction,
+      sendReaction,
       setEditingState,
       setQuotedMessageState,
       supportedReactions,

package/src/components/ChannelList/ChannelList.tsx

@@ -242,7 +242,7 @@ export const ChannelList = <
   } = props;
 
   const [forceUpdate, setForceUpdate] = useState(0);
-  const { enableOfflineSupport, subscribeConnectionRecoveredCallback } = useChatContext();
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const {
     channels,
     error,
@@ -259,6 +259,7 @@ export const ChannelList = <
     enableOfflineSupport,
     filters,
     options,
+    setForceUpdate,
     sort,
   });
 
@@ -328,15 +329,6 @@ export const ChannelList = <
     });
   }, [channelIdsStr, staticChannelsActive]);
 
-  useEffect(() => {
-    const unsubscribe = subscribeConnectionRecoveredCallback(() => {
-      refreshList();
-      setForceUpdate((count) => count + 1);
-    });
-
-    return () => unsubscribe();
-  });
-
   const channelsContext = useCreateChannelsContext({
     additionalFlatListProps,
     channels,

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

@@ -64,7 +64,6 @@ describe('useChannelUpdated', () => {
             isOnline: true,
             mutedUsers: [],
             setActiveChannel: () => null,
-            subscribeConnectionRecoveredCallback: () => () => null,
           }}
         >
           <TestComponent />