fix: broken tests and weird edge cases

Author: isekovanic

package/src/__tests__/offline-support/optimistic-update.js

@@ -365,7 +365,7 @@ export const OptimisticUpdates = () => {
         expect(pendingTasksRows.length).toBe(2);
       });
 
-      const deleteMessageSpy = jest.spyOn(chatClient, 'deleteMessage').mockImplementation();
+      const deleteMessageSpy = jest.spyOn(chatClient, '_deleteMessage').mockImplementation();
       const sendReactionSpy = jest.spyOn(channel, '_sendReaction').mockImplementation();
 
       act(() => dispatchConnectionChangedEvent(chatClient, true));

package/src/components/Channel/Channel.tsx

@@ -1037,14 +1037,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     syncingChannelRef.current = true;
     setError(false);
 
-    if (channelMessagesState?.messages) {
-      await channel?.watch({
-        messages: {
-          limit: channelMessagesState.messages.length + 30,
-        },
-      });
-    }
-
     const parseMessage = (message: LocalMessage) =>
       ({
         ...message,
@@ -1054,6 +1046,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       }) as unknown as MessageResponse;
 
     try {
+      if (channelMessagesState?.messages) {
+        await channel?.watch({
+          messages: {
+            limit: channelMessagesState.messages.length + 30,
+          },
+        });
+      }
+
       if (!thread) {
         copyChannelState();
 

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Image, Platform } from 'react-native';
 
-import type { Channel } from 'stream-chat';
+import { Channel, OfflineDBState } from 'stream-chat';
 
 import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
@@ -20,12 +20,12 @@ 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 { OfflineDB } from '../../store/OfflineDB';
-import { SqliteClient } from '../../store/SqliteClient';
 
 import type { Streami18n } from '../../utils/i18n/Streami18n';
 import { version } from '../../version.json';
@@ -134,6 +134,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 +163,16 @@ 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 [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,35 +221,18 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
       return;
     }
 
-    const initializeDatabase = () => {
+    const initializeDatabase = async () => {
       // TODO: Rethink this, it looks ugly
       if (!client.offlineDb) {
         client.setOfflineDBApi(new OfflineDB({ client }));
       }
-      // 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 });
-          if (client.offlineDb) {
-            await client.offlineDb?.syncManager.init();
-            // client.offlineDb.initialised = initialised;
-          }
-        })
-        .catch((error) => {
-          console.log('Error Initializing DB:', error);
-        });
-    };
 
-    initializeDatabase();
-
-    return () => {
-      if (userID && enableOfflineSupport) {
-        // SqliteClient.closeDB();
+      if (client.offlineDb) {
+        await client.offlineDb.init(userID);
       }
     };
+
+    initializeDatabase();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userID, enableOfflineSupport]);
 
@@ -258,12 +250,11 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
       // In case something went wrong, make sure to also unsubscribe the listener
       // on unmount if it exists to prevent a memory leak.
       // FIXME: Should be wrapped in its own unregistration mechanism
-      client.offlineDb?.syncManager.connectionChangedListener?.unsubscribe();
+      // client.offlineDb?.syncManager.connectionChangedListener?.unsubscribe();
     };
   }, [client]);
 
-  const initialisedDatabase =
-    initialisedDatabaseConfig.initialised && userID === initialisedDatabaseConfig.userID;
+  const initialisedDatabase = !!offlineDbInitialized && userID === offlineDbUserId;
 
   const appSettings = useAppSettings(client, isOnline, enableOfflineSupport, initialisedDatabase);
 

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

@@ -255,8 +255,8 @@ describe('TranslationContext', () => {
     rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
 
     await waitFor(() => {
-      expect(initSpy).toHaveBeenCalledTimes(2);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
+      expect(initSpy).toHaveBeenCalledTimes(1);
+      expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
       expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
         listenersAfterInitialMount.length,
       );

package/src/store/SqliteClient.ts

@@ -165,6 +165,7 @@ export class SqliteClient {
         await SqliteClient.dropTables();
         await SqliteClient.updateUserPragmaVersion(SqliteClient.dbVersion);
       }
+
       SqliteClient.logger?.('info', 'create tables if not exists', {
         tables: Object.keys(tables),
       });