stream-chat-react-native-core 4.15.0-beta.3 → 5.0.0-beta.2

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

@@ -6,6 +6,7 @@ import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRef
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
+import { getChannelsForFilterSort } from '../../../store/apis/getChannelsForFilterSort';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { ONE_SECOND_IN_MS } from '../../../utils/date';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
@@ -17,6 +18,7 @@ const waitSeconds = (seconds: number) =>
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
+    enableOfflineSupport: boolean;
     filters: ChannelFilters<StreamChatGenerics>;
     options: ChannelOptions;
     sort: ChannelSort<StreamChatGenerics>;
@@ -29,25 +31,31 @@ const DEFAULT_OPTIONS = {
 const MAX_NUMBER_OF_RETRIES = 3;
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'reload' | 'refresh' | 'loadChannels';
+type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
+
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
 export const usePaginatedChannels = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  enableOfflineSupport,
   filters = {},
   options = DEFAULT_OPTIONS,
   sort = {},
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
-  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>([]);
+  const initialChannelsStateRef = useRef([]);
+  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>(
+    initialChannelsStateRef.current,
+  );
+  const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(true);
   const activeChannels = useActiveChannelsRefContext();
 
   const [error, setError] = useState<Error>();
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
   const isQueryingRef = useRef(false);
-  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>();
+  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>('queryLocalDB');
   const isMountedRef = useIsMountedRef();
   const filtersRef = useRef<typeof filters | null>(null);
   const sortRef = useRef<typeof sort | null>(null);
@@ -87,7 +95,7 @@ export const usePaginatedChannels = <
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'loadChannels' ? channels.length : 0,
+      offset: queryType === 'loadChannels' && !staticChannelsActive ? channels.length : 0,
       ...options,
     };
 
@@ -99,15 +107,13 @@ export const usePaginatedChannels = <
       if (isQueryStale() || !isMountedRef.current) {
         return;
       }
-
-      channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));
-
       const newChannels =
-        queryType === 'loadChannels'
+        queryType === 'loadChannels' && !staticChannelsActive
           ? [...channels, ...channelQueryResponse]
           : channelQueryResponse;
 
       setChannels(newChannels);
+      setStaticChannelsActive(false);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
       setError(undefined);
       isQueryingRef.current = false;
@@ -124,6 +130,7 @@ export const usePaginatedChannels = <
       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}`,
@@ -172,19 +179,48 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    reloadList();
+    const loadChannels = () => {
+      if (!client?.user?.id) return;
+      if (enableOfflineSupport) {
+        try {
+          const channelsFromDB = getChannelsForFilterSort({
+            currentUserId: client.user.id,
+            filters,
+            sort,
+          });
+
+          if (channelsFromDB) {
+            setChannels(
+              client.hydrateActiveChannels(channelsFromDB, {
+                offlineMode: true,
+              }),
+            );
+          }
+        } catch (e) {
+          console.warn('Failed to get channels from database: ', e);
+        }
+      }
+
+      reloadList();
+    };
+
+    loadChannels();
   }, [filterStr, sortStr]);
 
   return {
     channels,
     error,
     hasNextPage,
-    loadingChannels: activeQueryType === 'reload',
+    loadingChannels:
+      activeQueryType === 'queryLocalDB'
+        ? true
+        : activeQueryType === 'reload' && channels === initialChannelsStateRef.current,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
     refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,
     setChannels,
+    staticChannelsActive,
   };
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -104,8 +104,8 @@ const ChannelPreviewWithContext = <
       }
     };
 
-    channel.on('message.read', handleReadEvent);
-    return () => channel.off('message.read', handleReadEvent);
+    const listener = channel.on('message.read', handleReadEvent);
+    return () => listener.unsubscribe();
   }, []);
 
   return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -37,15 +37,16 @@ export const ChannelPreviewMessage = <
 
   return (
     <Text numberOfLines={1} style={[styles.message, { color: grey }, message]}>
-      {latestMessagePreview.previews.map((preview, index) =>
-        preview.text ? (
-          <Text
-            key={`${preview.text}_${index}`}
-            style={[{ color: grey }, preview.bold ? styles.bold : {}, message]}
-          >
-            {preview.text}
-          </Text>
-        ) : null,
+      {latestMessagePreview?.previews?.map(
+        (preview, index) =>
+          preview.text && (
+            <Text
+              key={`${preview.text}_${index}`}
+              style={[{ color: grey }, preview.bold ? styles.bold : {}, message]}
+            >
+              {preview.text}
+            </Text>
+          ),
       )}
     </Text>
   );

package/src/components/Chat/Chat.tsx

@@ -6,10 +6,14 @@ import Dayjs from 'dayjs';
 import type { Channel } from 'stream-chat';
 
 import { useAppSettings } from './hooks/useAppSettings';
+import { useConnectionRecovered } from './hooks/useConnectionRecovered';
 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 { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
@@ -23,6 +27,7 @@ import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
 
 import { SDK } from '../../native';
+import { QuickSqliteClient } from '../../store/QuickSqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
@@ -39,6 +44,10 @@ export type ChatProps<
    * app goes to background, and reconnect when app comes to foreground.
    */
   closeConnectionOnBackground?: boolean;
+  /**
+   * Enables offline storage and loading for chat data.
+   */
+  enableOfflineSupport?: boolean;
   /**
    * Instance of Streami18n class should be provided to Chat component to enable internationalization.
    *
@@ -127,7 +136,14 @@ const ChatWithContext = <
 >(
   props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
-  const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;
+  const {
+    children,
+    client,
+    closeConnectionOnBackground = true,
+    enableOfflineSupport = false,
+    i18nInstance,
+    style,
+  } = props;
 
   const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
   const [translators, setTranslators] = useState<TranslatorFunctions>({
@@ -150,29 +166,48 @@ const ChatWithContext = <
 
   /**
    * Setup muted user listener
+   * TODO: reimplement
    */
   const mutedUsers = useMutedUsers<StreamChatGenerics>(client);
 
   useEffect(() => {
-    if (client.setUserAgent) {
+    if (client) {
       client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);
       // This is to disable recovery related logic in js client, since we handle it in this SDK
       client.recoverStateOnReconnect = false;
+      client.persistUserOnConnectionFailure = enableOfflineSupport;
     }
-  }, []);
+  }, [client]);
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
   const appSettings = useAppSettings(client, isOnline);
+  const { subscribeConnectionRecoveredCallback } = useConnectionRecovered<StreamChatGenerics>({
+    client,
+    enableOfflineSupport,
+  });
 
   const chatContext = useCreateChatContext({
     appSettings,
     channel,
     client,
     connectionRecovering,
+    enableOfflineSupport,
     isOnline,
     mutedUsers,
     setActiveChannel,
+    subscribeConnectionRecoveredCallback,
+  });
+
+  useEffect(() => {
+    if (enableOfflineSupport) {
+      QuickSqliteClient.initializeDatabase();
+    }
+  }, []);
+
+  useSyncDatabase({
+    client,
+    enableOfflineSupport,
   });
 
   if (loadingTranslators) return null;
@@ -182,7 +217,9 @@ const ChatWithContext = <
       <TranslationProvider
         value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}
       >
-        <ThemeProvider style={style}>{children}</ThemeProvider>
+        <ThemeProvider style={style}>
+          <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>
+        </ThemeProvider>
       </TranslationProvider>
     </ChatProvider>
   );

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

@@ -0,0 +1,142 @@
+import type { Event } 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 { upsertChannels } from '../../../store/apis/upsertChannels';
+import { upsertMembers } from '../../../store/apis/upsertMembers';
+import { upsertMessages } from '../../../store/apis/upsertMessages';
+import { upsertReads } from '../../../store/apis/upsertReads';
+
+export const handleEventToSyncDB = (event: Event, flush?: boolean) => {
+  const { type } = event;
+
+  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,
+          },
+        ],
+      });
+    }
+  }
+
+  if (type === 'message.new') {
+    if (event.message && (!event.message.parent_id || event.message.show_in_channel)) {
+      return upsertMessages({
+        flush,
+        messages: [event.message],
+      });
+    }
+  }
+
+  if (type === 'message.updated' || type === 'message.deleted') {
+    if (event.message && !event.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,
+      });
+    }
+  }
+
+  if (type === 'reaction.updated') {
+    if (event.message && event.reaction) {
+      // We update the entire message to make sure we also update
+      // reaction_counts.
+      return updateMessage({
+        flush,
+        message: event.message,
+      });
+    }
+  }
+
+  if (type === 'reaction.new' || type === 'reaction.deleted') {
+    if (event.message && !event.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,
+      });
+    }
+  }
+
+  if (
+    type === 'channel.updated' ||
+    type === 'channel.visible' ||
+    type === 'notification.added_to_channel' ||
+    type === 'notification.message_new'
+  ) {
+    if (event.channel) {
+      return upsertChannelData({
+        channel: event.channel,
+        flush,
+      });
+    }
+  }
+
+  if (
+    type === 'channel.hidden' ||
+    type === 'channel.deleted' ||
+    type === 'notification.removed_from_channel'
+  ) {
+    if (event.channel) {
+      return deleteChannel({
+        cid: event.channel.cid,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channel.truncated') {
+    if (event.channel) {
+      return deleteMessagesForChannel({
+        cid: event.channel.cid,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channels.queried') {
+    if (event.queriedChannels?.channels?.length) {
+      return upsertChannels({
+        channels: event.queriedChannels?.channels,
+        flush,
+        isLatestMessagesSet: event.queriedChannels?.isLatestMessageSet,
+      });
+    }
+  }
+
+  if (type === 'member.added' || type === 'member.updated') {
+    if (event.member && event.cid) {
+      return upsertMembers({
+        cid: event.cid,
+        flush,
+        members: [event.member],
+      });
+    }
+  }
+
+  if (type === 'member.removed') {
+    if (event.member && event.cid) {
+      return deleteMember({
+        cid: event.cid,
+        flush,
+        member: event.member,
+      });
+    }
+  }
+
+  return [];
+};

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

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+
+import type { Event, EventHandler, StreamChat } from 'stream-chat';
+
+import { handleEventToSyncDB } from './handleEventToSyncDB';
+
+import { getAllChannelIds } from '../../../store/apis/getAllChannelIds';
+import { getLastSyncedAt } from '../../../store/apis/getLastSyncedAt';
+import { upsertLastSyncedAt } from '../../../store/apis/upsertLastSyncedAt';
+import { QuickSqliteClient } from '../../../store/QuickSqliteClient';
+import type { PreparedQueries } from '../../../store/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+type Params<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+  client: StreamChat<StreamChatGenerics>;
+  enableOfflineSupport: boolean;
+};
+
+export const useConnectionRecovered = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  client,
+  enableOfflineSupport,
+}: Params<StreamChatGenerics>) => {
+  const [connectionRecoveredCallbacks, setConnectionRecoveredCallbacks] = useState<
+    EventHandler<StreamChatGenerics>[]
+  >([]);
+
+  useEffect(() => {
+    const sync = async () => {
+      if (!client?.user) return;
+
+      const lastSyncedAt = getLastSyncedAt({
+        currentUserId: client.user.id,
+      });
+      const cids = getAllChannelIds();
+
+      if (lastSyncedAt) {
+        try {
+          const result = await client.sync(cids, new Date(lastSyncedAt).toISOString());
+          const queries = result.events.reduce<PreparedQueries[]>((queries, event) => {
+            queries = queries.concat(handleEventToSyncDB(event, false));
+            return queries;
+          }, []);
+
+          if (queries.length) {
+            QuickSqliteClient.executeSqlBatch(queries);
+          }
+        } catch (e) {
+          // do nothing
+          QuickSqliteClient.resetDB();
+        }
+      }
+      upsertLastSyncedAt({
+        currentUserId: client.user.id,
+        lastSyncedAt: new Date().toString(),
+      });
+    };
+
+    const handleEvent = async (event: Event<StreamChatGenerics>) => {
+      if (enableOfflineSupport) {
+        await sync();
+      }
+
+      connectionRecoveredCallbacks.forEach((c) => c(event));
+    };
+
+    let connectionChangedListener: ReturnType<StreamChat['on']>;
+
+    if (client) {
+      connectionChangedListener = client.on('connection.changed', (event) => {
+        if (event.online) {
+          handleEvent(event);
+        }
+      });
+    }
+
+    return () => {
+      connectionChangedListener?.unsubscribe?.();
+    };
+  }, [client, connectionRecoveredCallbacks.length]);
+
+  return {
+    subscribeConnectionRecoveredCallback: (listener: EventHandler<StreamChatGenerics>) => {
+      setConnectionRecoveredCallbacks((callbacks) => [...callbacks, listener]);
+
+      return () => {
+        setConnectionRecoveredCallbacks((callbacks) => callbacks.filter((el) => el !== listener));
+      };
+    },
+  };
+};

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

@@ -10,14 +10,18 @@ export const useCreateChatContext = <
   channel,
   client,
   connectionRecovering,
+  enableOfflineSupport,
   isOnline,
   mutedUsers,
   setActiveChannel,
+  subscribeConnectionRecoveredCallback,
 }: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
-  const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${
-    Object.keys(client.listeners).length
-  }${client.mutedChannels.length}`;
+  const clientValues = client
+    ? `${client.clientID}${Object.keys(client.activeChannels).length}${
+        Object.keys(client.listeners).length
+      }${client.mutedChannels.length}`
+    : 'Offline';
   const mutedUsersLength = mutedUsers.length;
 
   const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
@@ -26,9 +30,11 @@ export const useCreateChatContext = <
       channel,
       client,
       connectionRecovering,
+      enableOfflineSupport,
       isOnline,
       mutedUsers,
       setActiveChannel,
+      subscribeConnectionRecoveredCallback,
     }),
     [channelId, clientValues, connectionRecovering, isOnline, mutedUsersLength],
   );

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

@@ -9,15 +9,17 @@ export const useMutedUsers = <
 >(
   client: StreamChat<StreamChatGenerics>,
 ) => {
-  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(client.mutedUsers || []);
+  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(
+    client?.mutedUsers || [],
+  );
 
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setMutedUsers((mutes) => event.me?.mutes || mutes || []);
     };
 
-    client.on('notification.mutes_updated', handleEvent);
-    return () => client.off('notification.mutes_updated', handleEvent);
+    const listener = client?.on('notification.mutes_updated', handleEvent);
+    return () => listener?.unsubscribe();
   }, [setMutedUsers]);
 
   return mutedUsers;

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

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import type { StreamChat } from 'stream-chat';
+
+import { handleEventToSyncDB } from './handleEventToSyncDB';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+type Params<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+  client: StreamChat<StreamChatGenerics>;
+  enableOfflineSupport: boolean;
+};
+export const useSyncDatabase = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  client,
+  enableOfflineSupport,
+}: Params<StreamChatGenerics>) => {
+  useEffect(() => {
+    let listener: ReturnType<StreamChat['on']> | undefined;
+
+    if (enableOfflineSupport) {
+      listener = client?.on(handleEventToSyncDB);
+    }
+
+    return () => {
+      listener?.unsubscribe();
+    };
+  }, [client]);
+};