Revert "fix: db initialization logic"

This reverts commit a0a98c6.

Author: khushal87

package/src/components/Chat/Chat.tsx

@@ -3,6 +3,7 @@ import { Image, Platform } from 'react-native';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { LoadingIndicator as LoadingIndicatorDefault } from './components/LoadingIndicator';
 import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
@@ -137,11 +138,6 @@ export type ChatProps<
     style?: DeepPartial<Theme>;
   };
 
-const initialisedDatabaseConfig: {
-  initialised: boolean;
-  userID?: string;
-} = { initialised: false, userID: '' };
-
 const ChatWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -154,6 +150,7 @@ const ChatWithContext = <
     enableOfflineSupport = false,
     i18nInstance,
     ImageComponent = Image,
+    LoadingIndicator = LoadingIndicatorDefault,
     resizableCDNHosts = ['.stream-io-cdn.com'],
     style,
   } = props;
@@ -162,7 +159,6 @@ const ChatWithContext = <
 
   // Setup translators
   const translators = useStreami18n(i18nInstance);
-  const userID = client.userID;
 
   /**
    * Setup connection event listeners
@@ -172,6 +168,13 @@ const ChatWithContext = <
     closeConnectionOnBackground,
   );
 
+  const [initialisedDatabaseConfig, setInitialisedDatabaseConfig] = useState<{
+    initialised: boolean;
+    userID?: string;
+  }>({
+    initialised: false,
+  });
+
   /**
    * Setup muted user listener
    * TODO: reimplement
@@ -181,6 +184,8 @@ const ChatWithContext = <
   const debugRef = useDebugContext();
   const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
 
+  const userID = client.userID;
+
   // Set the `resizableCDNHosts` as per the prop.
   StreamChatRN.setConfig({ resizableCDNHosts });
 
@@ -207,6 +212,12 @@ const ChatWithContext = <
 
   useEffect(() => {
     if (userID && enableOfflineSupport) {
+      // 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 });
+      QuickSqliteClient.initializeDatabase();
+      setInitialisedDatabaseConfig({ initialised: true, userID });
       DBSyncManager.init(client as unknown as StreamChat);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -228,18 +239,10 @@ const ChatWithContext = <
   // on unmount if it exists to prevent a memory leak.
   useEffect(() => () => DBSyncManager.connectionChangedListener?.unsubscribe(), []);
 
-  if (enableOfflineSupport && !initialisedDatabaseConfig.initialised) {
-    QuickSqliteClient.initializeDatabase();
-    initialisedDatabaseConfig.userID = userID;
-    initialisedDatabaseConfig.initialised = true;
-  }
-
-  const appSettings = useAppSettings(client, isOnline, enableOfflineSupport);
+  const initialisedDatabase =
+    initialisedDatabaseConfig.initialised && userID === initialisedDatabaseConfig.userID;
 
-  useSyncDatabase({
-    client,
-    enableOfflineSupport,
-  });
+  const appSettings = useAppSettings(client, isOnline, enableOfflineSupport, initialisedDatabase);
 
   const chatContext = useCreateChatContext({
     appSettings,
@@ -254,6 +257,17 @@ const ChatWithContext = <
     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;
+  }
+
   return (
     <ChatProvider<StreamChatGenerics> value={chatContext}>
       <TranslationProvider
@@ -278,6 +292,15 @@ const ChatWithContext = <
  * - connectionRecovering - whether or not websocket is reconnecting
  * - isOnline - whether or not set user is active
  * - setActiveChannel - function to set the currently active channel
+ *
+ * The Chat Component takes the following generics in order:
+ * - At (AttachmentType) - custom Attachment object extension
+ * - Ct (ChannelType) - custom Channel object extension
+ * - Co (CommandType) - custom Command string union extension
+ * - Ev (EventType) - custom Event object extension
+ * - Me (MessageType) - custom Message object extension
+ * - Re (ReactionType) - custom Reaction object extension
+ * - Us (UserType) - custom User object extension
  */
 export const Chat = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,

package/src/components/Chat/components/LoadingIndicator.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+export const LoadingIndicator = () => (
+  <View style={styles.container}>
+    <ActivityIndicator size='large' />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+});

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

@@ -12,6 +12,7 @@ export const useAppSettings = <
   client: StreamChat<StreamChatGenerics>,
   isOnline: boolean | null,
   enableOfflineSupport: boolean,
+  initialisedDatabase: boolean,
 ): AppSettingsAPIResponse | null => {
   const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
   const isMounted = useIsMountedRef();
@@ -74,7 +75,7 @@ export const useAppSettings = <
 
     enforeAppSettings();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client, isOnline]);
+  }, [client, isOnline, initialisedDatabase]);
 
   return appSettings;
 };

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

@@ -9,23 +9,25 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 type Params<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
   client: StreamChat<StreamChatGenerics>;
   enableOfflineSupport: boolean;
+  initialisedDatabase: boolean;
 };
 export const useSyncDatabase = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   client,
   enableOfflineSupport,
+  initialisedDatabase,
 }: Params<StreamChatGenerics>) => {
   useEffect(() => {
     let listener: ReturnType<StreamChat['on']> | undefined;
 
-    if (enableOfflineSupport) {
+    if (enableOfflineSupport && initialisedDatabase) {
       listener = client?.on((event) => handleEventToSyncDB(event, client));
     }
 
     return () => {
       listener?.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
+  }, [client, initialisedDatabase]);
 };