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

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

@@ -13,17 +13,8 @@ import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useStateStore } from '../../../hooks';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import { getChannelsForFilterSort } from '../../../store/apis/getChannelsForFilterSort';
-
-import { ONE_SECOND_IN_MS } from '../../../utils/date';
-import { DBSyncManager } from '../../../utils/DBSyncManager';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
-const waitSeconds = (seconds: number) =>
-  new Promise((resolve) => {
-    setTimeout(resolve, seconds * ONE_SECOND_IN_MS);
-  });
-
 type Parameters = {
   channelManager: ChannelManager;
   enableOfflineSupport: boolean;
@@ -37,7 +28,6 @@ const DEFAULT_OPTIONS = {
   message_limit: 10,
 };
 
-const MAX_NUMBER_OF_RETRIES = 3;
 const RETRY_INTERVAL_IN_MS = 5000;
 
 type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
@@ -48,6 +38,7 @@ const selector = (nextValue: ChannelManagerState) =>
   ({
     channelListInitialized: nextValue.initialized,
     channels: nextValue.channels,
+    error: nextValue.error,
     pagination: nextValue.pagination,
   }) as const;
 
@@ -56,16 +47,14 @@ export const usePaginatedChannels = ({
   enableOfflineSupport,
   filters = {},
   options = DEFAULT_OPTIONS,
-  setForceUpdate,
   sort = {},
 }: Parameters) => {
-  const [error, setError] = useState<Error | undefined>(undefined);
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
   const [activeQueryType, setActiveQueryType] = useState<QueryType | null>('queryLocalDB');
   const activeChannels = useActiveChannelsRefContext();
   const isMountedRef = useIsMountedRef();
   const { client } = useChatContext();
-  const { channelListInitialized, channels, pagination } =
+  const { channelListInitialized, channels, pagination, error } =
     useStateStore(channelManager?.state, selector) ?? {};
   const hasNextPage = pagination?.hasNext;
 
@@ -77,7 +66,6 @@ export const usePaginatedChannels = ({
 
   const queryChannels: QueryChannels = async (
     queryType: QueryType = 'loadChannels',
-    retryCount = 0,
   ): Promise<void> => {
     if (!client || !isMountedRef.current) {
       return;
@@ -106,7 +94,6 @@ export const usePaginatedChannels = ({
     filtersRef.current = filters;
     sortRef.current = sort;
     isQueryingRef.current = true;
-    setError(undefined);
     activeRequestId.current++;
     const currentRequestId = activeRequestId.current;
     setActiveQueryType(queryType);
@@ -138,27 +125,12 @@ export const usePaginatedChannels = ({
       isQueryingRef.current = false;
     } catch (err: unknown) {
       isQueryingRef.current = false;
-      await waitSeconds(2);
 
       if (isQueryStale()) {
         return;
       }
 
-      // querying.current check is needed in order to make sure the next query call doesnt flick an error
-      // state and then succeed (reconnect case)
-      if (retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current) {
-        setActiveQueryType(null);
-        console.warn(err);
-
-        setError(
-          new Error(
-            `Maximum number of retries reached in queryChannels. Last error message is: ${err}`,
-          ),
-        );
-        return;
-      }
-
-      return queryChannels(queryType, retryCount + 1);
+      console.warn(err);
     }
 
     setActiveQueryType(null);
@@ -198,71 +170,15 @@ export const usePaginatedChannels = ({
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    const loadOfflineChannels = async () => {
-      if (!client?.user?.id) {
-        return;
-      }
-
-      try {
-        const channelsFromDB = await getChannelsForFilterSort({
-          currentUserId: client.user.id,
-          filters,
-          sort,
-        });
-
-        if (channelsFromDB) {
-          const offlineChannels = client.hydrateActiveChannels(channelsFromDB, {
-            offlineMode: true,
-            skipInitialization: [], // passing empty array will clear out the existing messages from channel state, this removes the possibility of duplicate messages
-          });
-
-          channelManager.setChannels(offlineChannels);
-          setStaticChannelsActive(true);
-        }
-      } catch (e) {
-        console.warn('Failed to get channels from database: ', e);
-        return false;
-      }
-
-      setActiveQueryType(null);
-
-      return true;
-    };
-
-    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(async (syncStatus) => {
-        if (syncStatus) {
-          const loadingChannelsSucceeded = await loadOfflineChannels();
-          if (loadingChannelsSucceeded) {
-            await reloadList();
-            setForceUpdate((u) => u + 1);
-          }
-        }
-      });
-      // On start, load the channels from local db.
-      loadOfflineChannels().then((success) => {
-        // If db is already synced (sync api and pending api calls), then
-        // right away call queryChannels.
-        if (success) {
-          const dbSyncStatus = DBSyncManager.getSyncStatus();
-          if (dbSyncStatus) {
-            reloadList();
-          }
-        }
-      });
-    } else {
-      listener = client.on('connection.changed', async (event) => {
+    const listener: ReturnType<typeof client.on> = client.on(
+      'connection.changed',
+      async (event) => {
         if (event.online) {
           await refreshList();
-          setForceUpdate((u) => u + 1);
         }
-      });
-
-      reloadList();
-    }
+      },
+    );
+    reloadList();
 
     return () => listener?.unsubscribe?.();
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts

@@ -17,11 +17,29 @@ export const useIsChannelMuted = (channel: Channel) => {
 
   useEffect(() => {
     const handleEvent = () => {
+      const newMuteStatus = channel.muteStatus();
+      if (
+        newMuteStatus.muted === muted.muted &&
+        newMuteStatus.createdAt?.getTime?.() === muted.createdAt?.getTime?.() &&
+        newMuteStatus.expiresAt?.getTime?.() === muted.expiresAt?.getTime?.()
+      ) {
+        return;
+      }
+
       setMuted(channel.muteStatus());
     };
 
-    client.on('notification.channel_mutes_updated', handleEvent);
-    return () => client.off('notification.channel_mutes_updated', handleEvent);
+    const listeners = [
+      client.on('notification.channel_mutes_updated', handleEvent),
+      client.on('health.check', (event) => {
+        if (event.me) {
+          handleEvent();
+        }
+      }),
+    ];
+    return () => {
+      listeners.forEach((listener) => listener.unsubscribe());
+    };
   }, [channel, client, muted]);
 
   return muted ?? defaultMuteStatus;

package/src/components/Chat/Chat.tsx

@@ -1,15 +1,13 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Image, Platform } from 'react-native';
 
-import type { Channel, StreamChat } from 'stream-chat';
+import { Channel, OfflineDBState } from 'stream-chat';
 
 import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
 
-import { useSyncDatabase } from './hooks/useSyncDatabase';
-
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
@@ -20,13 +18,13 @@ import {
   DEFAULT_USER_LANGUAGE,
   TranslationProvider,
 } from '../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../hooks';
 import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
 
 import { NativeHandlers } from '../../native';
-import { SqliteClient } from '../../store/SqliteClient';
+import { OfflineDB } from '../../store/OfflineDB';
 
-import { DBSyncManager } from '../../utils/DBSyncManager';
 import type { Streami18n } from '../../utils/i18n/Streami18n';
 import { version } from '../../version.json';
 
@@ -134,6 +132,12 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
     style?: DeepPartial<Theme>;
   };
 
+const selector = (nextValue: OfflineDBState) =>
+  ({
+    initialized: nextValue.initialized,
+    userId: nextValue.userId,
+  }) as const;
+
 const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
   const {
     children,
@@ -157,13 +161,8 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
    */
   const { connectionRecovering, isOnline } = useIsOnline(client, closeConnectionOnBackground);
 
-  const [initialisedDatabaseConfig, setInitialisedDatabaseConfig] = useState<{
-    initialised: boolean;
-    userID?: string;
-  }>({
-    initialised: false,
-    userID: client.userID,
-  });
+  const { initialized: offlineDbInitialized, userId: offlineDbUserId } =
+    useStateStore(client.offlineDb?.state, selector) ?? {};
 
   /**
    * Setup muted user listener
@@ -212,30 +211,18 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
       return;
     }
 
-    const initializeDatabase = () => {
-      // This acts as a lock for some very rare occurrences of concurrency
-      // issues we've encountered before with the QuickSqliteClient being
-      // uninitialized before it's being invoked.
-      setInitialisedDatabaseConfig({ initialised: false, userID });
-      SqliteClient.initializeDatabase()
-        .then(async () => {
-          setInitialisedDatabaseConfig({ initialised: true, userID });
-          await DBSyncManager.init(client as unknown as StreamChat);
-        })
-        .catch((error) => {
-          console.log('Error Initializing DB:', error);
-        });
-    };
-
-    initializeDatabase();
+    const initializeDatabase = async () => {
+      if (!client.offlineDb) {
+        client.setOfflineDBApi(new OfflineDB({ client }));
+      }
 
-    return () => {
-      if (userID && enableOfflineSupport) {
-        SqliteClient.closeDB();
+      if (client.offlineDb) {
+        await client.offlineDb.init(userID);
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userID, enableOfflineSupport]);
+
+    initializeDatabase();
+  }, [userID, enableOfflineSupport, client]);
 
   useEffect(() => {
     if (!client) {
@@ -251,12 +238,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     };
   }, [client]);
 
-  // In case something went wrong, make sure to also unsubscribe the listener
-  // on unmount if it exists to prevent a memory leak.
-  useEffect(() => () => DBSyncManager.connectionChangedListener?.unsubscribe(), []);
-
-  const initialisedDatabase =
-    initialisedDatabaseConfig.initialised && userID === initialisedDatabaseConfig.userID;
+  const initialisedDatabase = !!offlineDbInitialized && userID === offlineDbUserId;
 
   const appSettings = useAppSettings(client, isOnline, enableOfflineSupport, initialisedDatabase);
 
@@ -273,12 +255,6 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     setActiveChannel,
   });
 
-  useSyncDatabase({
-    client,
-    enableOfflineSupport,
-    initialisedDatabase,
-  });
-
   if (userID && enableOfflineSupport && !initialisedDatabase) {
     // if user id has been set and offline support is enabled, we need to wait for database to be initialised
     return LoadingIndicator ? <LoadingIndicator /> : null;

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

@@ -11,7 +11,6 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient, getTestClientWithUser, setUser } from '../../../mock-builders/mock';
-import { DBSyncManager } from '../../../utils/DBSyncManager';
 import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../Chat';
 
@@ -132,10 +131,6 @@ describe('ChatContext', () => {
 });
 
 describe('TranslationContext', () => {
-  beforeEach(() => {
-    jest.spyOn(DBSyncManager, 'init');
-  });
-
   afterEach(() => {
     jest.clearAllMocks();
     cleanup();
@@ -240,10 +235,14 @@ describe('TranslationContext', () => {
 
     let unsubscribeSpy;
     let listenersAfterInitialMount;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      unsubscribeSpy = jest.spyOn(
+        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
+        'unsubscribe',
+      );
       listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
     });
 
@@ -251,8 +250,8 @@ describe('TranslationContext', () => {
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
 
     await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
+      expect(initSpy).toHaveBeenCalledTimes(1);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
       );
@@ -267,10 +266,14 @@ describe('TranslationContext', () => {
 
     let unsubscribeSpy;
     let listenersAfterInitialMount;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      unsubscribeSpy = jest.spyOn(
+        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
+        'unsubscribe',
+      );
       listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
     });
 
@@ -282,7 +285,7 @@ describe('TranslationContext', () => {
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
     await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+      expect(initSpy).toHaveBeenCalledTimes(2);
       expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
@@ -297,9 +300,14 @@ describe('TranslationContext', () => {
     const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
     let unsubscribeSpy;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
+
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
-      unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      unsubscribeSpy = jest.spyOn(
+        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
+        'unsubscribe',
+      );
     });
 
     const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
@@ -308,8 +316,8 @@ describe('TranslationContext', () => {
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
     await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
+      expect(initSpy).toHaveBeenCalledTimes(1);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
       );

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

@@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from 'react';
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
 
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
-import * as dbApi from '../../../store/apis';
 
 export const useAppSettings = (
   client: StreamChat,
@@ -17,6 +16,10 @@ export const useAppSettings = (
   const isMounted = useIsMountedRef();
 
   useEffect(() => {
+    if (fetchedAppSettings.current) {
+      return;
+    }
+
     const fetchAppSettings = () => {
       if (appSettingsPromise.current) {
         return appSettingsPromise.current;
@@ -24,43 +27,16 @@ export const useAppSettings = (
       appSettingsPromise.current = client.getAppSettings();
       return appSettingsPromise.current;
     };
-    /**
-     * Fetches app settings from the backend when offline support is disabled.
-     */
-    const enforceAppSettingsWithoutOfflineSupport = async () => {
-      if (!client.userID) {
-        return;
-      }
 
-      try {
-        const appSettings = await fetchAppSettings();
-        if (isMounted.current) {
-          setAppSettings(appSettings);
-          fetchedAppSettings.current = true;
-        }
-      } catch (error: unknown) {
-        if (error instanceof Error) {
-          console.error(`An error occurred while getting app settings: ${error}`);
-        }
-      }
-    };
+    const enforceAppSettings = async () => {
+      if (!client.userID) return;
 
-    /**
-     * Fetches app settings from the local database when offline support is enabled if internet is off else fetches from the backend.
-     * Note: We need to set the app settings from the local database when offline as the client will not have the app settings in memory. For this we store it for the `client.userID`.
-     *
-     * TODO: Remove client.userID usage for offline support case.
-     */
-    const enforceAppSettingsWithOfflineSupport = async () => {
-      if (!client.userID) {
-        return;
-      }
-      if (!initialisedDatabase) {
-        return;
-      }
+      if (enableOfflineSupport && !initialisedDatabase) return;
+
+      const userId = client.userID as string;
 
-      if (!isOnline) {
-        const appSettings = await dbApi.getAppSettings({ currentUserId: client.userID });
+      if (!isOnline && client.offlineDb) {
+        const appSettings = await client.offlineDb.getAppSettings({ userId });
         setAppSettings(appSettings);
         return;
       }
@@ -70,10 +46,10 @@ export const useAppSettings = (
         if (isMounted.current && appSettings) {
           setAppSettings(appSettings);
           fetchedAppSettings.current = true;
-          await dbApi.upsertAppSettings({
-            appSettings,
-            currentUserId: client.userID as string,
-          });
+          client.offlineDb?.executeQuerySafely(
+            (db) => db.upsertAppSettings({ appSettings, userId }),
+            { method: 'upsertAppSettings' },
+          );
         }
       } catch (error: unknown) {
         if (error instanceof Error) {
@@ -82,21 +58,8 @@ export const useAppSettings = (
       }
     };
 
-    async function enforeAppSettings() {
-      if (fetchedAppSettings.current) {
-        return;
-      }
-
-      if (enableOfflineSupport) {
-        await enforceAppSettingsWithOfflineSupport();
-      } else {
-        await enforceAppSettingsWithoutOfflineSupport();
-      }
-    }
-
-    enforeAppSettings();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client, isOnline, initialisedDatabase]);
+    enforceAppSettings();
+  }, [client, isOnline, initialisedDatabase, isMounted, enableOfflineSupport]);
 
   return appSettings;
 };

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

@@ -1,25 +1,19 @@
-import { useEffect } from 'react';
-
 import type { StreamChat } from 'stream-chat';
 
-import { handleEventToSyncDB } from './handleEventToSyncDB';
-
 type Params = {
   client: StreamChat;
   enableOfflineSupport: boolean;
   initialisedDatabase: boolean;
 };
-export const useSyncDatabase = ({ client, enableOfflineSupport, initialisedDatabase }: Params) => {
-  useEffect(() => {
-    let listener: ReturnType<StreamChat['on']> | undefined;
 
-    if (enableOfflineSupport && initialisedDatabase) {
-      listener = client?.on((event) => handleEventToSyncDB(event, client));
-    }
-
-    return () => {
-      listener?.unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client, initialisedDatabase]);
-};
+/**
+ * @deprecated
+ * With the recent rework of the Offline Support feature, the handling of events has been moved
+ * to the stream-chat client instead of the SDK. This hook now does nothing and you can safely
+ * remove it from your code if you were using it. It will be removed in the next major release.
+ * @param client
+ * @param initialisedDatabase
+ */
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useSyncDatabase = ({ client, initialisedDatabase }: Params) => {};

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -80,6 +80,12 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     setSelectedReaction(reactionType);
   };
 
+  useEffect(() => {
+    if (selectedReaction && reactionTypes.length > 0 && !reactionTypes.includes(selectedReaction)) {
+      setSelectedReaction(reactionTypes[0]);
+    }
+  }, [reactionTypes, selectedReaction]);
+
   const messageReactions = useMemo(
     () =>
       reactionTypes.reduce<ReactionData[]>((acc, reaction) => {