stream-chat-react-native-core 5.6.0-beta.0 → 5.6.0-beta.2

package/src/components/Channel/Channel.tsx

@@ -79,7 +79,6 @@ import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 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';
@@ -182,7 +181,7 @@ const throttleOptions = {
   trailing: true,
 };
 const debounceOptions = {
-  leading: false,
+  leading: true,
   trailing: true,
 };
 
@@ -682,14 +681,14 @@ const ChannelWithContext = <
   ).current;
 
   const copyMessagesState = useRef(
-    debounce(
+    throttle(
       () => {
         if (channel) {
           setMessages([...channel.state.messages]);
         }
       },
       newMessageStateUpdateThrottleInterval,
-      debounceOptions,
+      throttleOptions,
     ),
   ).current;
 
@@ -718,7 +717,7 @@ const ChannelWithContext = <
   ).current;
 
   const copyChannelState = useRef(
-    debounce(
+    throttle(
       () => {
         setLoading(false);
         if (channel) {
@@ -731,7 +730,7 @@ const ChannelWithContext = <
         }
       },
       stateUpdateThrottleInterval,
-      debounceOptions,
+      throttleOptions,
     ),
   ).current;
 
@@ -1193,6 +1192,13 @@ const ChannelWithContext = <
     text,
     ...extraFields
   }: Partial<StreamMessage<StreamChatGenerics>>) => {
+    // Exclude following properties from message.user within message preview,
+    // since they could be long arrays and have no meaning as sender of message.
+    // Storing such large value within user's table may cause sqlite queries to crash.
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { channel_mutes, devices, mutes, ...messageUser } = client.user;
+
     const preview = {
       __html: text,
       attachments,
@@ -1210,7 +1216,7 @@ const ChannelWithContext = <
       type: 'regular',
       user: {
         id: client.userID,
-        ...client.user,
+        ...messageUser,
       },
       ...extraFields,
     } as unknown as MessageResponse<StreamChatGenerics>;
@@ -1233,7 +1239,6 @@ const ChannelWithContext = <
     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
@@ -1270,6 +1275,9 @@ const ChannelWithContext = <
             ? 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 },
@@ -1588,7 +1596,7 @@ const ChannelWithContext = <
 
     setMessages(channel.state.messages);
 
-    await queueTask<StreamChatGenerics>({
+    await DBSyncManager.queueTask<StreamChatGenerics>({
       client,
       task: {
         channelId: channel.id,
@@ -1612,7 +1620,7 @@ const ChannelWithContext = <
     }
 
     if (message.status === MessageStatusTypes.FAILED) {
-      dropPendingTasks({ messageId: message.id });
+      DBSyncManager.dropPendingTasks({ messageId: message.id });
       removeMessage(message);
     } else {
       updateMessage({
@@ -1622,7 +1630,7 @@ const ChannelWithContext = <
         type: 'deleted',
       });
 
-      const data = await queueTask<StreamChatGenerics>({
+      const data = await DBSyncManager.queueTask<StreamChatGenerics>({
         client,
         task: {
           channelId: channel.id,
@@ -1663,7 +1671,7 @@ const ChannelWithContext = <
 
     setMessages(channel.state.messages);
 
-    await queueTask({
+    await DBSyncManager.queueTask<StreamChatGenerics>({
       client,
       task: {
         channelId: channel.id,

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

@@ -2,6 +2,8 @@ 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';
 
@@ -48,7 +50,7 @@ export const usePaginatedChannels = <
   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());
@@ -99,17 +101,17 @@ export const usePaginatedChannels = <
     };
 
     try {
-      const activeChannelIds = [];
+      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, {
-        // @ts-ignore
-        skipInitialization: activeChannelIds,
+        skipInitialization: enableOfflineSupport ? activeChannelIds : activeChannels.current,
       });
       if (isQueryStale() || !isMountedRef.current) {
         return;

package/src/components/Chat/Chat.tsx

@@ -196,7 +196,7 @@ const ChatWithContext = <
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
-  const appSettings = useAppSettings(client, isOnline);
+  const appSettings = useAppSettings(client, isOnline, enableOfflineSupport);
 
   const chatContext = useCreateChatContext({
     appSettings,

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -21,6 +21,7 @@ describe('useAppSettings', () => {
           userID: 'some-user-id',
         } as unknown as StreamChat,
         isOnline,
+        false,
       );
 
       return <Text>{JSON.stringify(appSettings)}</Text>;

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

@@ -1,23 +1,38 @@
 import { useEffect, useRef, useState } from 'react';
 
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from 'stream-chat-react-native';
 
+import * as dbApi from '../../../store/apis';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const useAppSettings = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   client: StreamChat<StreamChatGenerics>,
-  isOnline: boolean,
+  isOnline: boolean | null,
+  enableOfflineSupport: boolean,
 ): AppSettingsAPIResponse | null => {
   const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
   const isMounted = useRef(true);
 
   useEffect(() => {
-    async function getAppSettings() {
+    async function enforeAppSettings() {
+      if (!client.userID) return;
+
+      if (!isOnline && enableOfflineSupport) {
+        const appSettings = dbApi.getAppSettings({ currentUserId: client.userID });
+        setAppSettings(appSettings);
+        return;
+      }
+
       try {
         const appSettings = await client.getAppSettings();
         if (isMounted.current) {
           setAppSettings(appSettings);
+          enableOfflineSupport &&
+            dbApi.upsertAppSettings({
+              appSettings,
+              currentUserId: client.userID as string,
+            });
         }
       } catch (error: unknown) {
         if (error instanceof Error) {
@@ -26,9 +41,7 @@ export const useAppSettings = <
       }
     }
 
-    if (isOnline && client.userID) {
-      getAppSettings();
-    }
+    enforeAppSettings();
 
     return () => {
       isMounted.current = false;

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

@@ -22,7 +22,7 @@ export const useIsOnline = <
   client: StreamChat<StreamChatGenerics>,
   closeConnectionOnBackground = true,
 ) => {
-  const [isOnline, setIsOnline] = useState(true);
+  const [isOnline, setIsOnline] = useState<boolean | null>(null);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
   const isMounted = useIsMountedRef();
   const clientExists = !!client;

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { act } from 'react-test-renderer';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import {
   ImageGalleryContext,
@@ -45,7 +45,7 @@ const getComponent = (props: Partial<ImageGalleryContextValue>) => (
 );
 
 describe('ImageGallery', () => {
-  it('render image gallery component', () => {
+  it('render image gallery component', async () => {
     const { queryAllByA11yLabel } = render(
       getComponent({
         messages: [
@@ -59,11 +59,14 @@ describe('ImageGallery', () => {
         ] as unknown as MessageType<DefaultStreamChatGenerics>[],
       }),
     );
-    expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
-    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
+      expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+    });
   });
 
-  it('handle handleLoad function when video item present and payload duration is available', () => {
+  it('handle handleLoad function when video item present and payload duration is available', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -86,10 +89,13 @@ describe('ImageGallery', () => {
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
-    expect(videoDurationComponent.children[0]).toBe('00:10');
+
+    await waitFor(() => {
+      expect(videoDurationComponent.children[0]).toBe('00:10');
+    });
   });
 
-  it('handle handleLoad function when video item present and payload duration is undefined', () => {
+  it('handle handleLoad function when video item present and payload duration is undefined', async () => {
     const { getByA11yLabel } = render(
       getComponent({
         messages: [
@@ -109,10 +115,12 @@ describe('ImageGallery', () => {
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
-    expect(videoDurationComponent.children[0]).toBe('00:00');
+    await waitFor(() => {
+      expect(videoDurationComponent.children[0]).toBe('00:00');
+    });
   });
 
-  it('handle handleProgress function when video item present and payload is well defined', () => {
+  it('handle handleProgress function when video item present and payload is well defined', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -143,10 +151,12 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
 
-    expect(progressDurationComponent.children[0]).toBe('00:03');
+    await waitFor(() => {
+      expect(progressDurationComponent.children[0]).toBe('00:03');
+    });
   });
 
-  it('handle handleProgress function when video item present and payload is not defined', () => {
+  it('handle handleProgress function when video item present and payload is not defined', async () => {
     const { getByA11yLabel } = render(
       getComponent({
         messages: [
@@ -171,10 +181,12 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
 
-    expect(progressDurationComponent.children[0]).toBe('00:00');
+    await waitFor(() => {
+      expect(progressDurationComponent.children[0]).toBe('00:00');
+    });
   });
 
-  it('handle handleEnd function when video item present', () => {
+  it('handle handleEnd function when video item present', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -198,7 +210,9 @@ describe('ImageGallery', () => {
     });
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
-    expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
-    expect(progressDurationComponent.children[0]).toBe('00:10');
+    await waitFor(() => {
+      expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
+      expect(progressDurationComponent.children[0]).toBe('00:10');
+    });
   });
 });

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -97,10 +97,13 @@ describe('ImageGalleryFooter', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Left element')).toHaveLength(1);
-    expect(queryAllByText('Right element')).toHaveLength(1);
-    expect(queryAllByText('Center element')).toHaveLength(1);
-    expect(queryAllByText('Video Control element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Left element')).toHaveLength(1);
+      expect(queryAllByText('Right element')).toHaveLength(1);
+      expect(queryAllByText('Center element')).toHaveLength(1);
+      expect(queryAllByText('Video Control element')).toHaveLength(1);
+    });
   });
 
   it('render image gallery footer component with custom component footer Grid Icon and Share Icon component', async () => {
@@ -147,8 +150,11 @@ describe('ImageGalleryFooter', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Share Icon element')).toHaveLength(1);
-    expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Share Icon element')).toHaveLength(1);
+      expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+    });
   });
 
   it('should trigger the share button onPress Handler', async () => {

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -90,9 +90,12 @@ describe('ImageGalleryHeader', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Left element')).toHaveLength(1);
-    expect(queryAllByText('Right element')).toHaveLength(1);
-    expect(queryAllByText('Center element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Left element')).toHaveLength(1);
+      expect(queryAllByText('Right element')).toHaveLength(1);
+      expect(queryAllByText('Center element')).toHaveLength(1);
+    });
   });
 
   it('render image gallery header component with custom Close Icon component', async () => {
@@ -132,7 +135,9 @@ describe('ImageGalleryHeader', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Close Icon element')).toHaveLength(1);
+    await waitFor(() => {
+      expect(queryAllByText('Close Icon element')).toHaveLength(1);
+    });
   });
 
   it('should trigger the hideOverlay function on button onPress', async () => {

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

@@ -26,11 +26,11 @@ 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,

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -128,7 +128,7 @@ type FileUploadPreviewPropsWithContext<
   'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads'
 > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'> &
-  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline' | 'enableOfflineSupport'>;
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 const FileUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -140,7 +140,6 @@ const FileUploadPreviewWithContext = <
     enableOfflineSupport,
     FileAttachmentIcon,
     fileUploads,
-    isOnline,
     removeFile,
     setFileUploads,
     uploadFile,
@@ -215,7 +214,7 @@ const FileUploadPreviewWithContext = <
   } = useTheme();
 
   const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state, isOnline, enableOfflineSupport);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
 
     const lastIndexOfDot = item.file.name.lastIndexOf('.');
 
@@ -393,7 +392,7 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
   const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
@@ -408,7 +407,7 @@ export const FileUploadPreview = <
         setFileUploads,
         uploadFile,
       }}
-      {...{ enableOfflineSupport, isOnline }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -80,7 +80,7 @@ type ImageUploadPreviewPropsWithContext<
   MessageInputContextValue<StreamChatGenerics>,
   'imageUploads' | 'removeImage' | 'uploadImage'
 > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline' | 'enableOfflineSupport'>;
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 export type ImageUploadPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -93,7 +93,7 @@ const ImageUploadPreviewWithContext = <
 >(
   props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, imageUploads, isOnline, removeImage, uploadImage } = props;
+  const { enableOfflineSupport, imageUploads, removeImage, uploadImage } = props;
 
   const {
     theme: {
@@ -131,7 +131,7 @@ const ImageUploadPreviewWithContext = <
   };
 
   const renderItem = ({ index, item }: ImageUploadPreviewItem) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state, isOnline, enableOfflineSupport);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
     const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
 
     return (
@@ -202,40 +202,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const {
-    enableOfflineSupport: prevEnableOfflineSupport,
-    imageUploads: prevImageUploads,
-    isOnline: prevIsOnline,
-  } = prevProps;
-  const {
-    enableOfflineSupport: nextEnableOfflineSupport,
-    imageUploads: nextImageUploads,
-    isOnline: nextIsOnline,
-  } = nextProps;
-
-  const isOnlineEqual = prevIsOnline === nextIsOnline;
-
-  if (!isOnlineEqual) {
-    return false;
-  }
-
-  const enableOfflineSupportEqual = prevEnableOfflineSupport === nextEnableOfflineSupport;
-
-  if (!enableOfflineSupportEqual) {
-    return false;
-  }
+  const { imageUploads: prevImageUploads } = prevProps;
+  const { imageUploads: nextImageUploads } = nextProps;
 
-  const imageUploadsEqual =
+  return (
     prevImageUploads.length === nextImageUploads.length &&
     prevImageUploads.every(
       (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,
-    );
-
-  if (!imageUploadsEqual) {
-    return false;
-  }
-
-  return true;
+    )
+  );
 };
 
 const MemoizedImageUploadPreviewWithContext = React.memo(
@@ -251,13 +226,13 @@ export const ImageUploadPreview = <
 >(
   props: ImageUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedImageUploadPreviewWithContext
       {...{ imageUploads, removeImage, uploadImage }}
-      {...{ enableOfflineSupport, isOnline }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/components/index.ts

@@ -108,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

@@ -36,7 +36,7 @@ export type ChatContextValue<
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
   ImageComponent: React.ComponentType<ImageProps>;
-  isOnline: boolean;
+  isOnline: boolean | null;
   mutedUsers: Mute<StreamChatGenerics>[];
   /**
    * @param newChannel Channel to set as active.