stream-chat-react-native-core 5.27.0-beta.9 → 5.27.1-beta.1

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -112,10 +112,10 @@ const ChannelPreviewMessengerWithContext = <
     onSelect,
     PreviewAvatar = ChannelAvatar,
     PreviewMessage = ChannelPreviewMessage,
+    PreviewMutedStatus = ChannelPreviewMutedStatus,
     PreviewStatus = ChannelPreviewStatus,
     PreviewTitle = ChannelPreviewTitle,
     PreviewUnreadCount = ChannelPreviewUnreadCount,
-    PreviewMutedStatus = ChannelPreviewMutedStatus,
     unread,
   } = props;
   const { vw } = useViewport();

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -55,8 +55,8 @@ export const ChannelPreviewStatus = <
       ) : null}
       <Text style={[styles.date, { color: grey }, date]}>
         {formatLatestMessageDate && latestMessageDate
-          ? formatLatestMessageDate(latestMessageDate)
-          : latestMessagePreview.created_at}
+          ? formatLatestMessageDate(latestMessageDate).toString()
+          : latestMessagePreview.created_at.toString()}
       </Text>
     </View>
   );

package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 import truncate from 'lodash/truncate';
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -60,15 +60,16 @@ describe('ChannelPreviewMessenger', () => {
     const onSelect = jest.fn();
     await initializeChannel(generateChannelResponse());
 
-    const { getByTestId } = render(
+    render(
       getComponent({
         onSelect,
         watchers: {},
       }),
     );
 
-    await waitFor(() => getByTestId('channel-preview-button'));
-    fireEvent.press(getByTestId('channel-preview-button'));
+    await waitFor(() => screen.getByTestId('channel-preview-button'));
+
+    fireEvent(screen.getByTestId('channel-preview-button'), 'onPress');
 
     await waitFor(() => {
       expect(onSelect).toHaveBeenCalledTimes(1);
@@ -84,8 +85,8 @@ describe('ChannelPreviewMessenger', () => {
         },
       }),
     );
-    const { queryByText } = render(getComponent());
-    await waitFor(() => queryByText(channelName));
+    render(getComponent());
+    await waitFor(() => screen.queryByText(channelName));
   });
 
   it('should render comma separated names of other members, if channel has no name', async () => {
@@ -99,17 +100,17 @@ describe('ChannelPreviewMessenger', () => {
       }),
     );
 
-    const { queryByText } = render(getComponent());
+    render(getComponent());
     const expectedDisplayName = `${m1.user.name}, ${m2.user.name}, ${m3.user.name}`;
 
-    await waitFor(() => queryByText(expectedDisplayName));
+    await waitFor(() => screen.queryByText(expectedDisplayName));
   });
 
   it('should render latest message, truncated to length given by latestMessageLength', async () => {
     const message = generateMessage();
     await initializeChannel(generateChannelResponse());
 
-    const { queryByText } = render(
+    render(
       getComponent({
         latestMessage: message,
         latestMessageLength: 6,
@@ -117,6 +118,6 @@ describe('ChannelPreviewMessenger', () => {
     );
 
     const expectedMessagePreview = truncate(message.text, { length: 6 });
-    await waitFor(() => queryByText(expectedMessagePreview));
+    await waitFor(() => screen.queryByText(expectedMessagePreview));
   });
 });

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayName.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { render, screen, waitFor } from '@testing-library/react-native';
 
 import type { DefaultStreamChatGenerics } from 'src/types/types';
 import type { Channel, ChannelMemberResponse, DefaultGenerics, StreamChat } from 'stream-chat';
@@ -40,10 +40,10 @@ describe('useChannelPreviewDisplayName', () => {
       return <Text>{channelDisplayName}</Text>;
     };
 
-    const { getByText } = render(<TestComponent />);
+    render(<TestComponent />);
 
     await waitFor(() => {
-      expect(getByText(channelName)).toBeTruthy();
+      expect(screen.getByText(channelName)).toBeTruthy();
     });
   });
 

package/src/components/ChannelPreview/hooks/__tests__/useLatestMessagePreview.test.tsx

@@ -1,9 +1,6 @@
 import React, { FC } from 'react';
 
-import { renderHook } from '@testing-library/react-hooks/native';
-import { waitFor } from '@testing-library/react-native';
-
-import type { DefaultStreamChatGenerics } from 'src/types/types';
+import { renderHook, waitFor } from '@testing-library/react-native';
 
 import type { DefaultGenerics, MessageResponse, StreamChat } from 'stream-chat';
 
@@ -21,6 +18,7 @@ import {
 
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { useLatestMessagePreview } from '../useLatestMessagePreview';
 

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

@@ -1,74 +1,152 @@
-import type { Event } from 'stream-chat';
+import { DefaultStreamChatGenerics } from 'src/types/types';
+import type { Event, StreamChat } from 'stream-chat';
 
 import { deleteChannel } from '../../../store/apis/deleteChannel';
 import { deleteMember } from '../../../store/apis/deleteMember';
 import { deleteMessagesForChannel } from '../../../store/apis/deleteMessagesForChannel';
 import { updateMessage } from '../../../store/apis/updateMessage';
 import { upsertChannelData } from '../../../store/apis/upsertChannelData';
+import { upsertChannelDataFromChannel } from '../../../store/apis/upsertChannelDataFromChannel';
 import { upsertChannels } from '../../../store/apis/upsertChannels';
 import { upsertMembers } from '../../../store/apis/upsertMembers';
 import { upsertMessages } from '../../../store/apis/upsertMessages';
 import { upsertReads } from '../../../store/apis/upsertReads';
+import { QuickSqliteClient } from '../../../store/QuickSqliteClient';
+import { createSelectQuery } from '../../../store/sqlite-utils/createSelectQuery';
+import { PreparedQueries } from '../../../store/types';
 
-export const handleEventToSyncDB = (event: Event, flush?: boolean) => {
+export const handleEventToSyncDB = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  event: Event,
+  client: StreamChat<StreamChatGenerics>,
+  flush?: boolean,
+) => {
   const { type } = event;
 
+  // This function is used to guard the queries that require channel to be present in the db first
+  // If channel is not present in the db, we first fetch the channel data from the channel object
+  // and then add the queries with a channel create query first
+  const queriesWithChannelGuard = (
+    createQueries: (flushOverride?: boolean) => PreparedQueries[],
+  ) => {
+    const cid = event.cid || event.channel?.cid;
+
+    if (!cid) return createQueries(flush);
+    const channels = QuickSqliteClient.executeSql.apply(
+      null,
+      createSelectQuery('channels', ['cid'], {
+        cid,
+      }),
+    );
+    // a channel is not present in the db, we first fetch the channel data from the channel object.
+    // this can happen for example when a message.new event is received for a channel that is not in the db due to a channel being hidden.
+    if (channels.length === 0) {
+      const channel =
+        event.channel_type && event.channel_id
+          ? client.channel(event.channel_type, event.channel_id)
+          : undefined;
+      if (channel && channel.initialized && !channel.disconnected) {
+        const channelQuery = upsertChannelDataFromChannel({
+          channel,
+          flush,
+        });
+        if (channelQuery) {
+          const newQueries = [...channelQuery, ...createQueries(false)];
+          if (flush !== false) {
+            QuickSqliteClient.executeSqlBatch(newQueries);
+          }
+          return newQueries;
+        } else {
+          console.warn(
+            `Couldnt create channel queries on ${type} event for an initialized channel that is not in DB, skipping event`,
+            { event },
+          );
+          return [];
+        }
+      } else {
+        console.warn(
+          `Received ${type} event for a non initialized channel that is not in DB, skipping event`,
+          { event },
+        );
+        return [];
+      }
+    }
+    return createQueries(flush);
+  };
+
   if (type === 'message.read') {
-    if (event.user?.id && event.cid) {
-      return upsertReads({
-        cid: event.cid,
-        flush,
-        reads: [
-          {
-            last_read: event.received_at as string,
-            unread_messages: 0,
-            user: event.user,
-          },
-        ],
-      });
+    const cid = event.cid;
+    const user = event.user;
+    if (user?.id && cid) {
+      return queriesWithChannelGuard((flushOverride) =>
+        upsertReads({
+          cid,
+          flush: flushOverride,
+          reads: [
+            {
+              last_read: event.received_at as string,
+              unread_messages: 0,
+              user,
+            },
+          ],
+        }),
+      );
     }
   }
 
   if (type === 'message.new') {
-    if (event.message && (!event.message.parent_id || event.message.show_in_channel)) {
-      return upsertMessages({
-        flush,
-        messages: [event.message],
-      });
+    const message = event.message;
+    if (message && (!message.parent_id || message.show_in_channel)) {
+      return queriesWithChannelGuard((flushOverride) =>
+        upsertMessages({
+          flush: flushOverride,
+          messages: [message],
+        }),
+      );
     }
   }
 
   if (type === 'message.updated' || type === 'message.deleted') {
-    if (event.message && !event.message.parent_id) {
+    const message = event.message;
+    if (message && !message.parent_id) {
       // Update only if it exists, otherwise event could be related
       // to a message which is not in database.
-      return updateMessage({
-        flush,
-        message: event.message,
-      });
+      return queriesWithChannelGuard((flushOverride) =>
+        updateMessage({
+          flush: flushOverride,
+          message,
+        }),
+      );
     }
   }
 
   if (type === 'reaction.updated') {
-    if (event.message && event.reaction) {
+    const message = event.message;
+    if (message && event.reaction) {
       // We update the entire message to make sure we also update
       // reaction_counts.
-      return updateMessage({
-        flush,
-        message: event.message,
-      });
+      return queriesWithChannelGuard((flushOverride) =>
+        updateMessage({
+          flush: flushOverride,
+          message,
+        }),
+      );
     }
   }
 
   if (type === 'reaction.new' || type === 'reaction.deleted') {
-    if (event.message && !event.message.parent_id) {
+    const message = event.message;
+    if (message && !message.parent_id) {
       // Here we are relying on the fact message.latest_reactions always includes
       // the new reaction. So we first delete all the existing reactions and populate
       // the reactions table with message.latest_reactions
-      return updateMessage({
-        flush,
-        message: event.message,
-      });
+      return queriesWithChannelGuard((flushOverride) =>
+        updateMessage({
+          flush: flushOverride,
+          message,
+        }),
+      );
     }
   }
 
@@ -119,22 +197,30 @@ export const handleEventToSyncDB = (event: Event, flush?: boolean) => {
   }
 
   if (type === 'member.added' || type === 'member.updated') {
-    if (event.member && event.cid) {
-      return upsertMembers({
-        cid: event.cid,
-        flush,
-        members: [event.member],
-      });
+    const member = event.member;
+    const cid = event.cid;
+    if (member && cid) {
+      return queriesWithChannelGuard((flushOverride) =>
+        upsertMembers({
+          cid,
+          flush: flushOverride,
+          members: [member],
+        }),
+      );
     }
   }
 
   if (type === 'member.removed') {
-    if (event.member && event.cid) {
-      return deleteMember({
-        cid: event.cid,
-        flush,
-        member: event.member,
-      });
+    const member = event.member;
+    const cid = event.cid;
+    if (member && cid) {
+      return queriesWithChannelGuard((flushOverride) =>
+        deleteMember({
+          cid,
+          flush: flushOverride,
+          member,
+        }),
+      );
     }
   }
 

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

@@ -22,7 +22,7 @@ export const useSyncDatabase = <
     let listener: ReturnType<StreamChat['on']> | undefined;
 
     if (enableOfflineSupport && initialisedDatabase) {
-      listener = client?.on(handleEventToSyncDB);
+      listener = client?.on((event) => handleEventToSyncDB(event, client));
     }
 
     return () => {

package/src/components/ImageGallery/ImageGallery.tsx

@@ -26,7 +26,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetModalProvider, BottomSheetProps } from '@gorhom/bottom-sheet';
 
 import type { UserResponse } from 'stream-chat';
 
@@ -132,6 +132,29 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
       | 'autoPlayVideo'
     >;
 
+type SnapPoints = BottomSheetProps['snapPoints'];
+
+const normalizeSnapPoints = (input: SnapPoints): SnapPoints => {
+  const snapPoints = input ? ('value' in input ? input.value : input) : [];
+
+  return snapPoints.map((snapPoint) => {
+    if (typeof snapPoint === 'number') {
+      return Math.max(0, snapPoint);
+    } else {
+      const numericValue = Number(snapPoint.replace('%', ''));
+      const isPercentage = snapPoint.includes('%');
+
+      if (isNaN(numericValue)) {
+        return 0;
+      } else if (isPercentage) {
+        return `${Math.max(0, numericValue)}%`;
+      } else {
+        return Math.max(0, numericValue);
+      }
+    }
+  });
+};
+
 export const ImageGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -685,7 +708,7 @@ export const ImageGallery = <
           index={0}
           onChange={(index: number) => setCurrentBottomSheetIndex(index)}
           ref={bottomSheetModalRef}
-          snapPoints={imageGalleryGridSnapPoints || snapPoints}
+          snapPoints={normalizeSnapPoints(imageGalleryGridSnapPoints || snapPoints)}
         >
           <ImageGrid
             closeGridView={closeGridView}

package/src/components/ImageGallery/__tests__/AnimatedVideoGallery.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, screen } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
@@ -29,7 +29,7 @@ const getComponent = (props: Partial<AnimatedGalleryVideoType>) => (
 
 describe('ImageGallery', () => {
   it('render image gallery component with video rendered', () => {
-    const { queryAllByA11yLabel } = render(
+    render(
       getComponent({
         offsetScale: { value: 1 } as SharedValue<number>,
         scale: { value: 1 } as SharedValue<number>,
@@ -40,11 +40,11 @@ describe('ImageGallery', () => {
         translateX: { value: 1 } as SharedValue<number>,
       }),
     );
-    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+    expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
   });
 
   it('render empty view when shouldRender is false', () => {
-    const { getByA11yLabel } = render(
+    render(
       getComponent({
         offsetScale: { value: 1 } as SharedValue<number>,
         scale: { value: 1 } as SharedValue<number>,
@@ -53,14 +53,14 @@ describe('ImageGallery', () => {
       }),
     );
 
-    expect(getByA11yLabel('Empty View Image Gallery')).not.toBeUndefined();
+    expect(screen.getByLabelText('Empty View Image Gallery')).not.toBeUndefined();
   });
 
   it('trigger onEnd and onProgress events handlers of Video component', () => {
     const handleEndMock = jest.fn();
     const handleProgressMock = jest.fn();
 
-    const { getByTestId } = render(
+    render(
       getComponent({
         handleEnd: handleEndMock,
         handleProgress: handleProgressMock,
@@ -74,7 +74,7 @@ describe('ImageGallery', () => {
       }),
     );
 
-    const videoComponent = getByTestId('video-player');
+    const videoComponent = screen.getByTestId('video-player');
 
     act(() => {
       fireEvent(videoComponent, 'onEnd');
@@ -86,7 +86,7 @@ describe('ImageGallery', () => {
   });
 
   it('trigger onLoadStart event handler of Video component', () => {
-    const { getByTestId, queryByA11yLabel } = render(
+    render(
       getComponent({
         offsetScale: { value: 1 } as SharedValue<number>,
         scale: { value: 1 } as SharedValue<number>,
@@ -98,8 +98,8 @@ describe('ImageGallery', () => {
       }),
     );
 
-    const videoComponent = getByTestId('video-player');
-    const spinnerComponent = queryByA11yLabel('Spinner');
+    const videoComponent = screen.getByTestId('video-player');
+    const spinnerComponent = screen.queryByLabelText('Spinner');
 
     act(() => {
       fireEvent(videoComponent, 'onLoadStart');
@@ -110,7 +110,7 @@ describe('ImageGallery', () => {
   it('trigger onLoad event handler of Video component', () => {
     const handleLoadMock = jest.fn();
 
-    const { getByTestId, queryByA11yLabel } = render(
+    render(
       getComponent({
         handleLoad: handleLoadMock,
         offsetScale: { value: 1 } as SharedValue<number>,
@@ -123,8 +123,8 @@ describe('ImageGallery', () => {
       }),
     );
 
-    const videoComponent = getByTestId('video-player');
-    const spinnerComponent = queryByA11yLabel('Spinner');
+    const videoComponent = screen.getByTestId('video-player');
+    const spinnerComponent = screen.queryByLabelText('Spinner');
 
     act(() => {
       fireEvent(videoComponent, 'onLoad', { duration: 10 });
@@ -135,7 +135,7 @@ describe('ImageGallery', () => {
   });
 
   it('trigger onBuffer event handler of Video component', () => {
-    const { getByTestId, queryByA11yLabel } = render(
+    render(
       getComponent({
         offsetScale: { value: 1 } as SharedValue<number>,
         scale: { value: 1 } as SharedValue<number>,
@@ -147,8 +147,8 @@ describe('ImageGallery', () => {
       }),
     );
 
-    const videoComponent = getByTestId('video-player');
-    const spinnerComponent = queryByA11yLabel('Spinner');
+    const videoComponent = screen.getByTestId('video-player');
+    const spinnerComponent = screen.queryByLabelText('Spinner');
 
     act(() => {
       fireEvent(videoComponent, 'onBuffer', {
@@ -173,7 +173,7 @@ describe('ImageGallery', () => {
     const handleProgressMock = jest.fn();
     const handleEndMock = jest.fn();
 
-    const { getByTestId, queryByA11yLabel } = render(
+    render(
       getComponent({
         handleEnd: handleEndMock,
         handleLoad: handleLoadMock,
@@ -188,8 +188,8 @@ describe('ImageGallery', () => {
       }),
     );
 
-    const videoComponent = getByTestId('video-player');
-    const spinnerComponent = queryByA11yLabel('Spinner');
+    const videoComponent = screen.getByTestId('video-player');
+    const spinnerComponent = screen.queryByLabelText('Spinner');
 
     act(() => {
       fireEvent(videoComponent, 'onPlaybackStatusUpdate', {