stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/Chat/__tests__/Chat.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import NetInfo from '@react-native-community/netinfo';
+
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { setNetInfoFetchMock } from '../../../../jest-setup';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -43,8 +44,6 @@ describe('Chat', () => {
 
   it('listens and updates state on a connection changed event', async () => {
     let context;
-    const netInfoFetch = jest.fn();
-    setNetInfoFetchMock(netInfoFetch);
 
     render(
       <Chat client={chatClient}>
@@ -56,7 +55,7 @@ describe('Chat', () => {
       </Chat>,
     );
 
-    await waitFor(() => expect(netInfoFetch).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(NetInfo.fetch).toHaveBeenCalledTimes(1));
 
     const { connectionRecovering } = context;
     act(() => dispatchConnectionChangedEvent(chatClient, false));
@@ -83,215 +82,221 @@ describe('Chat', () => {
 
     await waitFor(() => expect(context.connectionRecovering).toStrictEqual(false));
   });
+});
 
-  describe('ChatContext', () => {
-    it('exposes the chat context', async () => {
-      let context;
-
-      render(
-        <Chat client={chatClient}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ChatContextConsumer>
-        </Chat>,
-      );
+describe('ChatContext', () => {
+  afterEach(cleanup);
+  const chatClient = getTestClient();
+  it('exposes the chat context', async () => {
+    let context;
+
+    render(
+      <Chat client={chatClient}>
+        <ChatContextConsumer
+          fn={(ctx) => {
+            context = ctx;
+          }}
+        ></ChatContextConsumer>
+      </Chat>,
+    );
 
-      await waitFor(() => {
-        expect(context).toBeInstanceOf(Object);
-        expect(context.channel).toBeUndefined();
-        expect(context.client).toBe(chatClient);
-        expect(context.connectionRecovering).toBeFalsy();
-        expect(context.setActiveChannel).toBeInstanceOf(Function);
-      });
+    await waitFor(() => {
+      expect(context).toBeInstanceOf(Object);
+      expect(context.channel).toBeUndefined();
+      expect(context.client).toBe(chatClient);
+      expect(context.connectionRecovering).toBeFalsy();
+      expect(context.setActiveChannel).toBeInstanceOf(Function);
     });
+  });
 
-    it('calls setActiveChannel to set a new channel in context', async () => {
-      let context;
-
-      render(
-        <Chat client={chatClient}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ChatContextConsumer>
-        </Chat>,
-      );
+  it('calls setActiveChannel to set a new channel in context', async () => {
+    let context;
 
-      const channel = { cid: 'cid', id: 'cid', query: jest.fn() };
+    render(
+      <Chat client={chatClient}>
+        <ChatContextConsumer
+          fn={(ctx) => {
+            context = ctx;
+          }}
+        ></ChatContextConsumer>
+      </Chat>,
+    );
 
-      await waitFor(() => expect(context.channel).toBeUndefined());
-      act(() => context.setActiveChannel(channel));
+    const channel = { cid: 'cid', id: 'cid', query: jest.fn() };
 
-      await waitFor(() => expect(context.channel).toStrictEqual(channel));
-    });
+    await waitFor(() => expect(context.channel).toBeUndefined());
+    act(() => context.setActiveChannel(channel));
+
+    await waitFor(() => expect(context.channel).toStrictEqual(channel));
   });
+});
 
-  describe('TranslationContext', () => {
-    it('exposes the translation context', async () => {
-      let context;
-
-      render(
-        <Chat client={chatClient}>
-          <TranslationContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></TranslationContextConsumer>
-        </Chat>,
-      );
+describe('TranslationContext', () => {
+  beforeEach(() => {
+    jest.spyOn(DBSyncManager, 'init');
+  });
 
-      await waitFor(() => {
-        expect(context).toBeInstanceOf(Object);
-        expect(context.t).toBeInstanceOf(Function);
-        expect(context.tDateTimeParser).toBeInstanceOf(Function);
-      });
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+  const chatClient = getTestClient();
+  it('exposes the translation context', async () => {
+    let context;
+
+    render(
+      <Chat client={chatClient}>
+        <TranslationContextConsumer
+          fn={(ctx) => {
+            context = ctx;
+          }}
+        ></TranslationContextConsumer>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(context).toBeInstanceOf(Object);
+      expect(context.t).toBeInstanceOf(Function);
+      expect(context.tDateTimeParser).toBeInstanceOf(Function);
     });
+  });
 
-    it('uses the i18nInstance provided in props', async () => {
-      let context;
-      const i18nInstance = new Streami18n();
-      const { t, tDateTimeParser } = await i18nInstance.getTranslators();
-
-      i18nInstance.t = () => 't';
-      i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
-
-      render(
-        <Chat client={chatClient} i18nInstance={i18nInstance}>
-          <TranslationContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></TranslationContextConsumer>
-        </Chat>,
-      );
+  it('uses the i18nInstance provided in props', async () => {
+    let context;
+    const i18nInstance = new Streami18n();
+    const { t, tDateTimeParser } = await i18nInstance.getTranslators();
+
+    i18nInstance.t = () => 't';
+    i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
 
-      await waitFor(() => {
-        expect(context.t).not.toBe(t);
-        expect(context.t).toBe(i18nInstance.t);
-        expect(context.tDateTimeParser).not.toBe(tDateTimeParser);
-        expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
-      });
+    render(
+      <Chat client={chatClient} i18nInstance={i18nInstance}>
+        <TranslationContextConsumer
+          fn={(ctx) => {
+            context = ctx;
+          }}
+        ></TranslationContextConsumer>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(context.t).not.toBe(t);
+      expect(context.t).toBe(i18nInstance.t);
+      expect(context.tDateTimeParser).not.toBe(tDateTimeParser);
+      expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
     });
+  });
 
-    it('updates the context when props change', async () => {
-      let context;
-      const i18nInstance = new Streami18n();
-
-      i18nInstance.t = () => 't';
-      i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
-
-      const { rerender } = render(
-        <Chat client={chatClient} i18nInstance={i18nInstance}>
-          <TranslationContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></TranslationContextConsumer>
-        </Chat>,
-      );
+  it('updates the context when props change', async () => {
+    let context;
+    const i18nInstance = new Streami18n();
+
+    i18nInstance.t = () => 't';
+    i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
+
+    const { rerender } = render(
+      <Chat client={chatClient} i18nInstance={i18nInstance}>
+        <TranslationContextConsumer
+          fn={(ctx) => {
+            context = ctx;
+          }}
+        ></TranslationContextConsumer>
+      </Chat>,
+    );
 
-      await waitFor(() => {
-        expect(context.t).toBe(i18nInstance.t);
-        expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
-      });
+    await waitFor(() => {
+      expect(context.t).toBe(i18nInstance.t);
+      expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
+    });
 
-      const newI18nInstance = new Streami18n();
+    const newI18nInstance = new Streami18n();
 
-      newI18nInstance.t = () => 'newT';
-      newI18nInstance.tDateTimeParser = () => 'newtDateTimeParser';
+    newI18nInstance.t = () => 'newT';
+    newI18nInstance.tDateTimeParser = () => 'newtDateTimeParser';
 
-      rerender(
-        <Chat client={chatClient} i18nInstance={newI18nInstance}>
-          <TranslationContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></TranslationContextConsumer>
-        </Chat>,
-      );
-      await waitFor(() => {
-        expect(context.t).not.toBe(i18nInstance.t);
-        expect(context.t).toBe(newI18nInstance.t);
-        expect(context.tDateTimeParser).not.toBe(i18nInstance.tDateTimeParser);
-        expect(context.tDateTimeParser).toBe(newI18nInstance.tDateTimeParser);
-      });
+    rerender(
+      <Chat client={chatClient} i18nInstance={newI18nInstance}>
+        <TranslationContextConsumer
+          fn={(ctx) => {
+            context = ctx;
+          }}
+        ></TranslationContextConsumer>
+      </Chat>,
+    );
+    await waitFor(() => {
+      expect(context.t).not.toBe(i18nInstance.t);
+      expect(context.t).toBe(newI18nInstance.t);
+      expect(context.tDateTimeParser).not.toBe(i18nInstance.tDateTimeParser);
+      expect(context.tDateTimeParser).toBe(newI18nInstance.tDateTimeParser);
     });
+  });
+
+  it('makes sure DBSyncManager listeners are cleaned up after Chat remount', async () => {
+    const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
 
-    it('makes sure DBSyncManager listeners are cleaned up after Chat remount', async () => {
-      const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
-      jest.spyOn(DBSyncManager, 'init');
+    // initial mount and render
+    const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport key={1} />);
 
-      // initial mount and render
-      const { rerender } = render(
-        <Chat client={chatClientWithUser} enableOfflineSupport key={1} />,
+    // the unsubscribe fn changes during init(), so we keep a reference to the spy
+    const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+    const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+
+    // remount
+    rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
+
+    await waitFor(() => {
+      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
+      expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+        listenersAfterInitialMount.length,
       );
+    });
+  });
 
-      // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
-      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+  it('makes sure DBSyncManager listeners are cleaned up if the user changes', async () => {
+    const chatClientWithUser = await getTestClientWithUser({ id: 'testID1' });
 
-      // remount
-      rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
+    // initial render
+    const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-      await waitFor(() => {
-        expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
-        expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
-        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
-          listenersAfterInitialMount.length,
-        );
-      });
+    // the unsubscribe fn changes during init(), so we keep a reference to the spy
+    const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+    await act(async () => {
+      await setUser(chatClientWithUser, { id: 'testID2' });
     });
+    const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+
+    // rerender with different user ID
+    rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-    it('makes sure DBSyncManager listeners are cleaned up if the user changes', async () => {
-      const chatClientWithUser = await getTestClientWithUser({ id: 'testID1' });
-      jest.spyOn(DBSyncManager, 'init');
-
-      // initial render
-      const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
-
-      // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
-      await act(async () => {
-        await setUser(chatClientWithUser, { id: 'testID2' });
-      });
-      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
-
-      // rerender with different user ID
-      rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
-
-      await waitFor(() => {
-        expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
-        expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
-        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
-          listenersAfterInitialMount.length,
-        );
-      });
+    await waitFor(() => {
+      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
+      expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+        listenersAfterInitialMount.length,
+      );
     });
+  });
 
-    it('makes sure DBSyncManager state stays intact during normal rerenders', async () => {
-      const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
-      jest.spyOn(DBSyncManager, 'init');
+  it('makes sure DBSyncManager state stays intact during normal rerenders', async () => {
+    const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
 
-      // initial render
-      const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
+    // initial render
+    const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-      // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
-      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+    // the unsubscribe fn changes during init(), so we keep a reference to the spy
+    const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+    const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
 
-      // rerender
-      rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
+    // rerender
+    rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-      await waitFor(() => {
-        expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
-        expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
-        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
-          listenersAfterInitialMount.length,
-        );
-      });
+    await waitFor(() => {
+      expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
+      expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+        listenersAfterInitialMount.length,
+      );
     });
   });
 });

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

@@ -10,8 +10,8 @@ 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 { SqliteClient } from '../../../store/SqliteClient';
 import { PreparedQueries } from '../../../store/types';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 
@@ -33,7 +33,7 @@ export const handleEventToSyncDB = <
     const cid = event.cid || event.channel?.cid;
 
     if (!cid) return createQueries(flush);
-    const channels = QuickSqliteClient.executeSql.apply(
+    const channels = SqliteClient.executeSql.apply(
       null,
       createSelectQuery('channels', ['cid'], {
         cid,
@@ -54,7 +54,7 @@ export const handleEventToSyncDB = <
         if (channelQuery) {
           const newQueries = [...channelQuery, ...createQueries(false)];
           if (flush !== false) {
-            QuickSqliteClient.executeSqlBatch(newQueries);
+            SqliteClient.executeSqlBatch(newQueries);
           }
           return newQueries;
         } else {

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

@@ -14,7 +14,6 @@ export const useCreateChatContext = <
   ImageComponent,
   isOnline,
   mutedUsers,
-  resizableCDNHosts,
   setActiveChannel,
 }: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
@@ -35,7 +34,6 @@ export const useCreateChatContext = <
       ImageComponent,
       isOnline,
       mutedUsers,
-      resizableCDNHosts,
       setActiveChannel,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import type { NetInfoSubscription } from '@react-native-community/netinfo';
+import NetInfo, { NetInfoSubscription } from '@react-native-community/netinfo';
 
 import type { StreamChat, Event as StreamEvent } from 'stream-chat';
 
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
-import { NetInfo } from '../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
@@ -56,9 +55,9 @@ export const useIsOnline = <
 
     const handleRecoveredEvent = () => setConnectionRecovering(false);
 
-    const notifyChatClient = (netInfoState: boolean) => {
-      if (client?.wsConnection) {
-        if (netInfoState) {
+    const notifyChatClient = (isConnected: boolean | null) => {
+      if (client?.wsConnection && isConnected) {
+        if (isConnected) {
           client.wsConnection.onlineStatusChanged({
             type: 'online',
           } as Event);
@@ -73,23 +72,27 @@ export const useIsOnline = <
     let unsubscribeNetInfo: NetInfoSubscription;
     const setNetInfoListener = () => {
       unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
-        if (netInfoState === false && !client.wsConnection?.isHealthy) {
+        if (!netInfoState && !client.wsConnection?.isHealthy) {
           setConnectionRecovering(true);
           setIsOnline(false);
         }
-        notifyChatClient(netInfoState);
+        const { isConnected, isInternetReachable } = netInfoState;
+        notifyChatClient(
+          isInternetReachable !== null ? isInternetReachable && isConnected : isConnected,
+        );
       });
     };
 
     const setInitialOnlineState = async () => {
-      const status = await NetInfo.fetch();
+      const { isConnected } = await NetInfo.fetch();
       if (isMounted.current) {
-        setIsOnline(status);
-        notifyChatClient(status);
+        setIsOnline(isConnected);
+        notifyChatClient(isConnected);
       }
     };
 
     setInitialOnlineState();
+
     const chatListeners: Array<ReturnType<StreamChat['on']>> = [];
 
     if (client) {