stream-chat-react-native-core 7.0.1 → 7.1.0

package/src/__tests__/offline-support/optimistic-update.js

@@ -7,11 +7,12 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { Channel } from '../../components/Channel/Channel';
 import { Chat } from '../../components/Chat/Chat';
-import { MessagesContext } from '../../contexts';
+import { MessageInputContext, MessagesContext } from '../../contexts';
 import { deleteMessageApi } from '../../mock-builders/api/deleteMessage';
 import { deleteReactionApi } from '../../mock-builders/api/deleteReaction';
 import { erroredDeleteApi, erroredPostApi } from '../../mock-builders/api/error';
 import { getOrCreateChannelApi } from '../../mock-builders/api/getOrCreateChannel';
+import { sendMessageApi } from '../../mock-builders/api/sendMessage';
 import { sendReactionApi } from '../../mock-builders/api/sendReaction';
 import { useMockedApis } from '../../mock-builders/api/useMockedApis';
 import dispatchConnectionChangedEvent from '../../mock-builders/event/connectionChanged';
@@ -112,6 +113,7 @@ export const OptimisticUpdates = () => {
         channels: [channelResponse],
         isLatestMessagesSet: true,
       });
+      chatClient.wsConnection = { isHealthy: true, onlineStatusChanged: jest.fn() };
     });
 
     afterEach(() => {
@@ -177,7 +179,7 @@ export const OptimisticUpdates = () => {
         });
       });
 
-      it('pending task should be cleared if deleteMessage request is succesful', async () => {
+      it('pending task should be cleared if deleteMessage request is successful', async () => {
         const message = generateMessage();
         render(
           <Chat client={chatClient} enableOfflineSupport>
@@ -237,7 +239,7 @@ export const OptimisticUpdates = () => {
         });
       });
 
-      it('pending task should be cleared if sendReaction request is succesful', async () => {
+      it('pending task should be cleared if sendReaction request is successful', async () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
@@ -264,6 +266,69 @@ export const OptimisticUpdates = () => {
       });
     });
 
+    describe('send message', () => {
+      it('pending task should exist if sendMessage request fails', async () => {
+        const newMessage = generateMessage();
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel channel={channel} initialValue={newMessage.text}>
+              <CallbackEffectWithContext
+                callback={async ({ sendMessage }) => {
+                  useMockedApis(chatClient, [erroredPostApi()]);
+                  try {
+                    await sendMessage({ customMessageData: newMessage });
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const pendingTaskType = pendingTasksRows?.[0]?.type;
+          const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
+          expect(pendingTaskType).toBe('send-message');
+          expect(pendingTaskPayload[0].id).toEqual(newMessage.id);
+          expect(pendingTaskPayload[0].text).toEqual(newMessage.text);
+        });
+      });
+
+      it('pending task should be cleared if sendMessage request is successful', async () => {
+        const newMessage = generateMessage();
+
+        // initialValue is needed as a prop to trick the message input ctx into thinking
+        // we are sending a message.
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel channel={channel} initialValue={newMessage.text}>
+              <CallbackEffectWithContext
+                callback={async ({ sendMessage }) => {
+                  useMockedApis(chatClient, [sendMessageApi(newMessage)]);
+                  await sendMessage({ customMessageData: newMessage });
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          expect(pendingTasksRows.length).toBe(0);
+        });
+      });
+    });
+
     describe('delete reaction', () => {
       it('pending task should exist if deleteReaction request fails', async () => {
         const reaction = generateReaction();
@@ -298,7 +363,7 @@ export const OptimisticUpdates = () => {
         });
       });
 
-      it('pending task should be cleared if deleteReaction request is succesful', async () => {
+      it('pending task should be cleared if deleteReaction request is successful', async () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
@@ -326,52 +391,97 @@ export const OptimisticUpdates = () => {
       });
     });
 
-    it('pending task should be executed after connection is recovered', async () => {
-      const message = channel.state.messages[0];
-      const reaction = generateReaction();
-
-      render(
-        <Chat client={chatClient} enableOfflineSupport>
-          <Channel channel={channel} initialValue={message.text}>
-            <CallbackEffectWithContext
-              callback={async ({ deleteMessage, sendReaction }) => {
-                useMockedApis(chatClient, [erroredDeleteApi()]);
-                try {
-                  await deleteMessage(reaction);
-                } catch (e) {
-                  // do nothing
-                }
-
-                useMockedApis(chatClient, [erroredPostApi()]);
-                try {
-                  await sendReaction(reaction.type, message.id);
-                } catch (e) {
-                  // do nothing
-                }
-              }}
-              context={MessagesContext}
-            >
-              <View testID='children' />
-            </CallbackEffectWithContext>
-          </Channel>
-        </Chat>,
-      );
-      await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+    describe('pending task execution', () => {
+      it('pending task should be executed after connection is recovered', async () => {
+        const message = channel.state.messages[0];
+        const reaction = generateReaction();
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel channel={channel} initialValue={message.text}>
+              <CallbackEffectWithContext
+                callback={async ({ deleteMessage, sendReaction }) => {
+                  useMockedApis(chatClient, [erroredDeleteApi()]);
+                  try {
+                    await deleteMessage(message);
+                  } catch (e) {
+                    // do nothing
+                  }
+
+                  useMockedApis(chatClient, [erroredPostApi()]);
+                  try {
+                    await sendReaction(reaction.type, message.id);
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessagesContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+
+          expect(pendingTasksRows.length).toBe(2);
+        });
+
+        const deleteMessageSpy = jest.spyOn(chatClient, '_deleteMessage').mockImplementation();
+        const sendReactionSpy = jest.spyOn(channel, '_sendReaction').mockImplementation();
 
-      await waitFor(async () => {
-        const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
 
-        expect(pendingTasksRows.length).toBe(2);
+        await waitFor(() => {
+          expect(deleteMessageSpy).toHaveBeenCalled();
+          expect(sendReactionSpy).toHaveBeenCalled();
+        });
       });
 
-      jest.spyOn(chatClient, 'deleteMessage').mockImplementation();
-      jest.spyOn(channel, 'sendReaction').mockImplementation();
+      // This is a separate test so CallbackEffectWithContext does not need to be modified in order
+      // to accept multiple contexts. It can be improved in the future.
+      it('send message pending task should be executed after connection is recovered', async () => {
+        const newMessage = generateMessage();
 
-      act(() => dispatchConnectionChangedEvent(chatClient, true));
+        // initialValue is needed as a prop to trick the message input ctx into thinking
+        // we are sending a message.
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel channel={channel} initialValue={newMessage.text}>
+              <CallbackEffectWithContext
+                callback={async ({ sendMessage }) => {
+                  useMockedApis(chatClient, [erroredPostApi()]);
+                  try {
+                    await sendMessage({ customMessageData: newMessage });
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+
+          expect(pendingTasksRows.length).toBe(1);
+        });
 
-      await waitFor(() => {
-        expect(chatClient.deleteMessage).toHaveBeenCalled();
-        expect(channel.sendReaction).toHaveBeenCalled();
+        const sendMessageSpy = jest.spyOn(channel, '_sendMessage').mockImplementation();
+
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        await waitFor(() => {
+          expect(sendMessageSpy).toHaveBeenCalled();
+        });
       });
     });
   });

package/src/components/Channel/Channel.tsx

@@ -95,9 +95,7 @@ import * as dbApi from '../../store/apis';
 import { ChannelUnreadState, FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
-import { DBSyncManager } from '../../utils/DBSyncManager';
 import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand';
-import { removeReactionFromLocalState } from '../../utils/removeReactionFromLocalState';
 import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
   defaultEmojiSearchIndex,
@@ -260,7 +258,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'StickyHeader'
     >
   > &
-  Pick<ChatContextValue, 'client' | 'enableOfflineSupport'> &
+  Pick<ChatContextValue, 'client' | 'enableOfflineSupport' | 'isOnline'> &
   Partial<
     Omit<
       InputMessageInputContextValue,
@@ -672,6 +670,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     UploadProgressIndicator = UploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
     VideoThumbnail = VideoThumbnailDefault,
+    isOnline,
   } = props;
 
   const { thread: threadProps, threadInstance } = threadFromProps;
@@ -1039,14 +1038,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     syncingChannelRef.current = true;
     setError(false);
 
-    if (channelMessagesState?.messages) {
-      await channel?.watch({
-        messages: {
-          limit: channelMessagesState.messages.length + 30,
-        },
-      });
-    }
-
     const parseMessage = (message: LocalMessage) =>
       ({
         ...message,
@@ -1056,6 +1047,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       }) as unknown as MessageResponse;
 
     try {
+      if (channelMessagesState?.messages) {
+        await channel?.watch({
+          messages: {
+            limit: channelMessagesState.messages.length + 30,
+          },
+        });
+      }
+
       if (!thread) {
         copyChannelState();
 
@@ -1102,12 +1101,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     };
     let connectionChangedSubscription: ReturnType<ChannelType['on']>;
 
-    if (enableOfflineSupport) {
-      connectionChangedSubscription = DBSyncManager.onSyncStatusChange((statusChanged) => {
-        if (statusChanged) {
-          connectionChangedHandler();
-        }
-      });
+    if (enableOfflineSupport && client.offlineDb) {
+      connectionChangedSubscription = client.offlineDb.syncManager.onSyncStatusChange(
+        (statusChanged) => {
+          if (statusChanged) {
+            connectionChangedHandler();
+          }
+        },
+      );
     } else {
       connectionChangedSubscription = client.on('connection.changed', (event) => {
         if (event.online) {
@@ -1118,8 +1119,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     return () => {
       connectionChangedSubscription.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enableOfflineSupport, shouldSyncChannel]);
+  }, [enableOfflineSupport, client, shouldSyncChannel]);
 
   // In case the channel is disconnected which may happen when channel is deleted,
   // underlying js client throws an error. Following function ensures that Channel component
@@ -1346,7 +1346,33 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const sendMessageRequest = useStableCallback(
     async (message: MessageResponse, retrying?: boolean) => {
+      let failedMessageUpdated = false;
+      const handleFailedMessage = async () => {
+        if (!failedMessageUpdated) {
+          const updatedMessage = {
+            ...message,
+            cid: channel.cid,
+            status: MessageStatusTypes.FAILED,
+          };
+          updateMessage(updatedMessage);
+          threadInstance?.upsertReplyLocally?.({ message: updatedMessage });
+          optimisticallyUpdatedNewMessages.delete(message.id);
+
+          if (enableOfflineSupport) {
+            await dbApi.updateMessage({
+              message: updatedMessage,
+            });
+          }
+
+          failedMessageUpdated = true;
+        }
+      };
+
       try {
+        if (!isOnline) {
+          await handleFailedMessage();
+        }
+
         const updatedMessage = await uploadPendingAttachments(message);
         const extraFields = omit(updatedMessage, [
           '__html',
@@ -1386,39 +1412,33 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
         } as StreamMessage;
 
         let messageResponse = {} as SendMessageAPIResponse;
+
         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 (messageResponse?.message) {
+          const newMessageResponse = {
+            ...messageResponse.message,
+            status: MessageStatusTypes.RECEIVED,
+          };
 
           if (enableOfflineSupport) {
             await dbApi.updateMessage({
-              message: { ...messageResponse.message, cid: channel.cid },
+              message: { ...newMessageResponse, cid: channel.cid },
             });
           }
           if (retrying) {
-            replaceMessage(message, messageResponse.message);
+            replaceMessage(message, newMessageResponse);
           } else {
-            updateMessage(messageResponse.message, {}, true);
+            updateMessage(newMessageResponse, {}, true);
           }
         }
       } catch (err) {
         console.log(err);
-        message.status = MessageStatusTypes.FAILED;
-        const updatedMessage = { ...message, cid: channel.cid };
-        updateMessage(updatedMessage);
-        threadInstance?.upsertReplyLocally?.({ message: updatedMessage });
-        optimisticallyUpdatedNewMessages.delete(message.id);
-
-        if (enableOfflineSupport) {
-          await dbApi.updateMessage({
-            message: { ...message, cid: channel.cid },
-          });
-        }
+        await handleFailedMessage();
       }
     },
   );
@@ -1512,10 +1532,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
         }
       }
 
-      if (enableOfflineSupport) {
-        await dbApi.deleteMessage({
-          id: message.id,
-        });
+      if (client.offlineDb) {
+        await client.offlineDb.handleRemoveMessage({ messageId: message.id });
       }
     },
   );
@@ -1533,79 +1551,49 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       { enforce_unique: enforceUniqueReaction },
     ];
 
-    if (!enableOfflineSupport) {
-      await channel.sendReaction(...payload);
-      return;
-    }
+    if (enableOfflineSupport) {
+      await addReactionToLocalState({
+        channel,
+        enforceUniqueReaction,
+        messageId,
+        reactionType: type,
+        user: client.user,
+      });
 
-    addReactionToLocalState({
-      channel,
-      enforceUniqueReaction,
-      messageId,
-      reactionType: type,
-      user: client.user,
-    });
+      copyMessagesStateFromChannel(channel);
+    }
 
-    copyMessagesStateFromChannel(channel);
+    const sendReactionResponse = await channel.sendReaction(...payload);
 
-    const sendReactionResponse = await DBSyncManager.queueTask({
-      client,
-      task: {
-        channelId: channel.id,
-        channelType: channel.type,
-        messageId,
-        payload,
-        type: 'send-reaction',
-      },
-    });
     if (sendReactionResponse?.message) {
       threadInstance?.upsertReplyLocally?.({ message: sendReactionResponse.message });
     }
   });
 
   const deleteMessage: MessagesContextValue['deleteMessage'] = useStableCallback(
-    async (message) => {
+    async (message, hardDelete = false) => {
       if (!channel.id) {
         throw new Error('Channel has not been initialized yet');
       }
 
-      if (!enableOfflineSupport) {
-        if (message.status === MessageStatusTypes.FAILED) {
-          await removeMessage(message);
-          return;
-        }
-        await client.deleteMessage(message.id);
+      if (message.status === MessageStatusTypes.FAILED) {
+        await removeMessage(message);
         return;
       }
+      const updatedMessage = {
+        ...message,
+        cid: channel.cid,
+        deleted_at: new Date(),
+        type: 'deleted' as MessageLabel,
+      };
+      updateMessage(updatedMessage);
 
-      if (message.status === MessageStatusTypes.FAILED) {
-        await DBSyncManager.dropPendingTasks({ messageId: message.id });
-        await removeMessage(message);
-      } else {
-        const updatedMessage = {
-          ...message,
-          cid: channel.cid,
-          deleted_at: new Date(),
-          type: 'deleted' as MessageLabel,
-        };
-        updateMessage(updatedMessage);
-
-        threadInstance?.upsertReplyLocally({ message: updatedMessage });
-
-        const data = await DBSyncManager.queueTask({
-          client,
-          task: {
-            channelId: channel.id,
-            channelType: channel.type,
-            messageId: message.id,
-            payload: [message.id],
-            type: 'delete-message',
-          },
-        });
+      threadInstance?.upsertReplyLocally({ message: updatedMessage });
 
-        if (data?.message) {
-          updateMessage({ ...data.message });
-        }
+      const data = await client.deleteMessage(message.id, hardDelete);
+
+      if (data?.message) {
+        updateMessage({ ...data.message });
       }
     },
   );
@@ -1618,30 +1606,18 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
       const payload: Parameters<ChannelClass['deleteReaction']> = [messageId, type];
 
-      if (!enableOfflineSupport) {
-        await channel.deleteReaction(...payload);
-        return;
-      }
-
-      removeReactionFromLocalState({
-        channel,
-        messageId,
-        reactionType: type,
-        user: client.user,
-      });
+      if (enableOfflineSupport) {
+        channel.state.removeReaction({
+          created_at: '',
+          message_id: messageId,
+          type,
+          updated_at: '',
+        });
 
-      copyMessagesStateFromChannel(channel);
+        copyMessagesStateFromChannel(channel);
+      }
 
-      await DBSyncManager.queueTask({
-        client,
-        task: {
-          channelId: channel.id,
-          channelType: channel.type,
-          messageId,
-          payload,
-          type: 'delete-reaction',
-        },
-      });
+      await channel.deleteReaction(...payload);
     },
   );
 
@@ -2050,7 +2026,7 @@ export type ChannelProps = Partial<Omit<ChannelPropsWithContext, 'channel' | 'th
  * @example ./Channel.md
  */
 export const Channel = (props: PropsWithChildren<ChannelProps>) => {
-  const { client, enableOfflineSupport, isMessageAIGenerated } = useChatContext();
+  const { client, enableOfflineSupport, isOnline, isMessageAIGenerated } = useChatContext();
   const { t } = useTranslationContext();
 
   const threadFromProps = props?.thread;
@@ -2082,6 +2058,7 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
       shouldSyncChannel={shouldSyncChannel}
       {...{
         isMessageAIGenerated,
+        isOnline,
         setThreadMessages,
         thread,
         threadMessages,

package/src/components/ChannelList/ChannelList.tsx

@@ -19,7 +19,6 @@ import {
   ChannelsProvider,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { upsertCidsForQuery } from '../../store/apis/upsertCidsForQuery';
 import type { ChannelListEventListenerOptions } from '../../types/types';
 import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
@@ -321,7 +320,7 @@ export const ChannelList = (props: ChannelListProps) => {
   ]);
 
   useEffect(() => {
-    channelManager.setOptions({ abortInFlightQuery: true, lockChannelOrder });
+    channelManager.setOptions({ abortInFlightQuery: false, lockChannelOrder });
   }, [channelManager, lockChannelOrder]);
 
   useEffect(() => {
@@ -343,7 +342,6 @@ export const ChannelList = (props: ChannelListProps) => {
     refreshing,
     refreshList,
     reloadList,
-    staticChannelsActive,
   } = usePaginatedChannels({
     channelManager,
     enableOfflineSupport,
@@ -358,26 +356,6 @@ export const ChannelList = (props: ChannelListProps) => {
     setChannels: channelManager.setChannels,
   });
 
-  const channelIdsStr = channels?.reduce((acc, channel) => `${acc}${channel.cid}`, '');
-
-  useEffect(() => {
-    if (
-      channels == null ||
-      !channelListInitialized ||
-      staticChannelsActive ||
-      !enableOfflineSupport
-    ) {
-      return;
-    }
-
-    upsertCidsForQuery({
-      cids: channels.map((c) => c.cid),
-      filters,
-      sort,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelIdsStr, staticChannelsActive]);
-
   const channelsContext = useCreateChannelsContext({
     additionalFlatListProps,
     channelListInitialized,