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

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,12 @@ 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 { 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';
@@ -196,7 +203,7 @@ export type ChannelPropsWithContext<
       | 'StickyHeader'
     >
   > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'enableOfflineSupport'> &
   Partial<
     Omit<
       InputMessageInputContextValue<StreamChatGenerics>,
@@ -422,6 +429,7 @@ const ChannelWithContext = <
     doUpdateMessageRequest,
     EmptyStateIndicator = EmptyStateIndicatorDefault,
     enableMessageGroupingByUser = true,
+    enableOfflineSupport,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
     FileAttachmentGroup = FileAttachmentGroupDefault,
@@ -726,17 +734,8 @@ const ChannelWithContext = <
     ),
   ).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 +776,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 +793,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 +904,6 @@ const ChannelWithContext = <
 
   const reloadThread = async () => {
     if (!channel || !thread?.id) return;
-
     setThreadLoadingMore(true);
     try {
       const parentID = thread.id;
@@ -1231,56 +1228,126 @@ 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++) {
+        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;
+          if (response.thumb_url) {
+            attachment.thumb_url = response.thumb_url;
+          }
+          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 +1357,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 +1388,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 +1410,7 @@ const ChannelWithContext = <
     };
 
     updateMessage(statusPendingMessage);
+
     await sendMessageRequest(statusPendingMessage, true);
   };
 
@@ -1469,6 +1553,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 DBSyncManager.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) {
+      DBSyncManager.dropPendingTasks({ messageId: message.id });
+      removeMessage(message);
+    } else {
+      updateMessage({
+        ...message,
+        cid: channel.cid,
+        deleted_at: new Date().toISOString(),
+        type: 'deleted',
+      });
+
+      const data = await DBSyncManager.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 DBSyncManager.queueTask<StreamChatGenerics>({
+      client,
+      task: {
+        channelId: channel.id,
+        channelType: channel.type,
+        messageId,
+        payload,
+        type: 'delete-reaction',
+      },
+    });
   };
 
   /**
@@ -1654,6 +1859,8 @@ const ChannelWithContext = <
     channelId,
     DateHeader,
     deletedMessagesVisibilityType,
+    deleteMessage,
+    deleteReaction,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch,
     enableMessageGroupingByUser,
@@ -1713,6 +1920,7 @@ const ChannelWithContext = <
     retrySendMessage,
     ScrollToBottomButton,
     selectReaction,
+    sendReaction,
     setEditingState,
     setQuotedMessageState,
     supportedReactions,
@@ -1808,7 +2016,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 +2045,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 />

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -3,12 +3,14 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
 import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
 import { getChannelsForFilterSort } from '../../../store/apis/getChannelsForFilterSort';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { ONE_SECOND_IN_MS } from '../../../utils/date';
+import { DBSyncManager } from '../../../utils/DBSyncManager';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
 const waitSeconds = (seconds: number) =>
@@ -21,6 +23,7 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
     enableOfflineSupport: boolean;
     filters: ChannelFilters<StreamChatGenerics>;
     options: ChannelOptions;
+    setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
     sort: ChannelSort<StreamChatGenerics>;
   };
 
@@ -41,13 +44,13 @@ export const usePaginatedChannels = <
   enableOfflineSupport,
   filters = {},
   options = DEFAULT_OPTIONS,
+  setForceUpdate,
   sort = {},
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
   const [channels, setChannels] = useState<Channel<StreamChatGenerics>[] | null>(null);
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
   const activeChannels = useActiveChannelsRefContext();
-
   const [error, setError] = useState<Error>();
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
@@ -98,17 +101,33 @@ export const usePaginatedChannels = <
     };
 
     try {
+      const activeChannelIds: string[] = [];
+      for (const cid in client.activeChannels) {
+        if (client.activeChannels[cid].id) {
+          // @ts-ignore
+          activeChannelIds.push(client.activeChannels[cid].id);
+        }
+      }
+
+      // TODO: Think about the implications of this.
       const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {
-        skipInitialization: activeChannels.current,
+        skipInitialization: enableOfflineSupport ? activeChannelIds : activeChannels.current,
       });
-
       if (isQueryStale() || !isMountedRef.current) {
         return;
       }
+
       const newChannels =
         queryType === 'loadChannels' && !staticChannelsActive && channels
           ? [...channels, ...channelQueryResponse]
-          : channelQueryResponse;
+          : channelQueryResponse.map((c) => {
+              const existingChannel = client.activeChannels[c.cid];
+              if (existingChannel) {
+                return existingChannel;
+              }
+
+              return c;
+            });
 
       setChannels(newChannels);
       setStaticChannelsActive(false);
@@ -177,33 +196,62 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    const loadChannels = () => {
+    const loadOfflineChannels = () => {
       if (!client?.user?.id) return;
-      if (enableOfflineSupport) {
-        try {
-          const channelsFromDB = getChannelsForFilterSort({
-            currentUserId: client.user.id,
-            filters,
-            sort,
-          });
-
-          if (channelsFromDB) {
-            setChannels(
-              client.hydrateActiveChannels(channelsFromDB, {
-                offlineMode: true,
-              }),
-            );
-            setStaticChannelsActive(true);
-          }
-        } catch (e) {
-          console.warn('Failed to get channels from database: ', e);
+
+      try {
+        const channelsFromDB = getChannelsForFilterSort({
+          currentUserId: client.user.id,
+          filters,
+          sort,
+        });
+
+        if (channelsFromDB) {
+          setChannels(
+            client.hydrateActiveChannels(channelsFromDB, {
+              offlineMode: true,
+            }),
+          );
+          setStaticChannelsActive(true);
         }
+      } catch (e) {
+        console.warn('Failed to get channels from database: ', e);
       }
 
-      reloadList();
+      setActiveQueryType(null);
     };
 
-    loadChannels();
+    let listener: ReturnType<typeof DBSyncManager.onSyncStatusChange>;
+    if (enableOfflineSupport) {
+      // Any time DB is synced, we need to update the UI with local DB channels first,
+      // and then call queryChannels to ensure any new channels are added to UI.
+      listener = DBSyncManager.onSyncStatusChange((syncStatus) => {
+        if (syncStatus) {
+          loadOfflineChannels();
+          reloadList();
+        }
+      });
+      // On start, load the channels from local db.
+      loadOfflineChannels();
+
+      // If db is already synced (sync api and pending api calls), then
+      // right away call queryChannels.
+      const dbSyncStatus = DBSyncManager.getSyncStatus();
+      if (dbSyncStatus) {
+        reloadList();
+      }
+    } else {
+      listener = client.on('connection.changed', async (event) => {
+        if (event.online) {
+          await refreshList();
+          setForceUpdate((u) => u + 1);
+        }
+      });
+
+      reloadList();
+    }
+
+    return () => listener?.unsubscribe?.();
   }, [filterStr, sortStr]);
 
   return {
@@ -211,7 +259,9 @@ export const usePaginatedChannels = <
     error,
     hasNextPage,
     loadingChannels:
-      activeQueryType === 'queryLocalDB' ? true : activeQueryType === 'reload' && channels === null,
+      activeQueryType === 'queryLocalDB'
+        ? true
+        : (activeQueryType === 'reload' || activeQueryType === null) && channels === null,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
     refreshing: activeQueryType === 'refresh',