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

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

@@ -2,13 +2,13 @@ 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 +21,7 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
     enableOfflineSupport: boolean;
     filters: ChannelFilters<StreamChatGenerics>;
     options: ChannelOptions;
+    setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
     sort: ChannelSort<StreamChatGenerics>;
   };
 
@@ -41,12 +42,12 @@ 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);
@@ -98,17 +99,33 @@ export const usePaginatedChannels = <
     };
 
     try {
+      const activeChannelIds = [];
+      for (const cid in client.activeChannels) {
+        if (client.activeChannels[cid].id) {
+          activeChannelIds.push(client.activeChannels[cid].id);
+        }
+      }
+
+      // TODO: Think about the implications of this.
       const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {
-        skipInitialization: activeChannels.current,
+        // @ts-ignore
+        skipInitialization: activeChannelIds,
       });
-
       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 +194,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 +257,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',

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

@@ -37,6 +37,8 @@ export const useMessageActions = <
 >({
   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>, 'isOnline' | 'enableOfflineSupport'>;
 
 const FileUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -135,8 +137,10 @@ const FileUploadPreviewWithContext = <
 ) => {
   const {
     AudioAttachment,
+    enableOfflineSupport,
     FileAttachmentIcon,
     fileUploads,
+    isOnline,
     removeFile,
     setFileUploads,
     uploadFile,
@@ -211,7 +215,7 @@ const FileUploadPreviewWithContext = <
   } = useTheme();
 
   const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state);
+    const indicatorType = getIndicatorTypeForFileState(item.state, isOnline, enableOfflineSupport);
 
     const lastIndexOfDot = item.file.name.lastIndexOf('.');
 
@@ -389,6 +393,7 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
+  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
   const { fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
   const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
@@ -403,6 +408,7 @@ export const FileUploadPreview = <
         setFileUploads,
         uploadFile,
       }}
+      {...{ enableOfflineSupport, isOnline }}
       {...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>, 'isOnline' | '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, isOnline, 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, isOnline, enableOfflineSupport);
     const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
 
     return (
@@ -200,15 +202,40 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { imageUploads: prevImageUploads } = prevProps;
-  const { imageUploads: nextImageUploads } = nextProps;
+  const {
+    enableOfflineSupport: prevEnableOfflineSupport,
+    imageUploads: prevImageUploads,
+    isOnline: prevIsOnline,
+  } = prevProps;
+  const {
+    enableOfflineSupport: nextEnableOfflineSupport,
+    imageUploads: nextImageUploads,
+    isOnline: nextIsOnline,
+  } = nextProps;
 
-  return (
+  const isOnlineEqual = prevIsOnline === nextIsOnline;
+
+  if (!isOnlineEqual) {
+    return false;
+  }
+
+  const enableOfflineSupportEqual = prevEnableOfflineSupport === nextEnableOfflineSupport;
+
+  if (!enableOfflineSupportEqual) {
+    return false;
+  }
+
+  const imageUploadsEqual =
     prevImageUploads.length === nextImageUploads.length &&
     prevImageUploads.every(
       (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,
-    )
-  );
+    );
+
+  if (!imageUploadsEqual) {
+    return false;
+  }
+
+  return true;
 };
 
 const MemoizedImageUploadPreviewWithContext = React.memo(
@@ -224,11 +251,13 @@ export const ImageUploadPreview = <
 >(
   props: ImageUploadPreviewProps<StreamChatGenerics>,
 ) => {
+  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
   const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedImageUploadPreviewWithContext
       {...{ imageUploads, removeImage, uploadImage }}
+      {...{ enableOfflineSupport, isOnline }}
       {...props}
     />
   );