stream-chat-react-native-core 4.12.1-beta.1 → 5.0.0-beta.0

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -20,6 +20,7 @@ export const useCreateChannelContext = <
   isModerator,
   isOwner,
   lastRead,
+  loadChannelAroundMessage,
   loadChannelAtMessage,
   loading,
   LoadingIndicator,
@@ -62,6 +63,7 @@ export const useCreateChannelContext = <
       isModerator,
       isOwner,
       lastRead,
+      loadChannelAroundMessage,
       loadChannelAtMessage,
       loading,
       LoadingIndicator,

package/src/components/Channel/hooks/useCreatePaginatedMessageListContext.ts

@@ -9,6 +9,7 @@ export const useCreatePaginatedMessageListContext = <
 >({
   channelId,
   hasMore,
+  hasNoMoreRecentMessagesToLoad,
   loadingMore,
   loadingMoreRecent,
   loadMore,
@@ -24,6 +25,7 @@ export const useCreatePaginatedMessageListContext = <
   const paginatedMessagesContext: PaginatedMessageListContextValue<StreamChatGenerics> = useMemo(
     () => ({
       hasMore,
+      hasNoMoreRecentMessagesToLoad,
       loadingMore,
       loadingMoreRecent,
       loadMore,

package/src/components/ChannelList/ChannelList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { FlatList } from 'react-native-gesture-handler';
 
@@ -15,7 +15,6 @@ import { useChannelHidden } from './hooks/listeners/useChannelHidden';
 import { useChannelTruncated } from './hooks/listeners/useChannelTruncated';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
 import { useChannelVisible } from './hooks/listeners/useChannelVisible';
-import { useConnectionRecovered } from './hooks/listeners/useConnectionRecovered';
 import { useNewMessage } from './hooks/listeners/useNewMessage';
 import { useNewMessageNotification } from './hooks/listeners/useNewMessageNotification';
 import { useRemovedFromChannelNotification } from './hooks/listeners/useRemovedFromChannelNotification';
@@ -28,6 +27,8 @@ import {
   ChannelsContextValue,
   ChannelsProvider,
 } from '../../contexts/channelsContext/ChannelsContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { upsertCidsForQuery } from '../../store/apis/upsertCidsForQuery';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
@@ -241,7 +242,7 @@ export const ChannelList = <
   } = props;
 
   const [forceUpdate, setForceUpdate] = useState(0);
-
+  const { enableOfflineSupport, subscribeConnectionRecoveredCallback } = useChatContext();
   const {
     channels,
     error,
@@ -253,7 +254,9 @@ export const ChannelList = <
     refreshList,
     reloadList,
     setChannels,
+    staticChannelsActive,
   } = usePaginatedChannels<StreamChatGenerics>({
+    enableOfflineSupport,
     filters,
     options,
     sort,
@@ -292,11 +295,6 @@ export const ChannelList = <
     setChannels,
   });
 
-  useConnectionRecovered<StreamChatGenerics>({
-    refreshList,
-    setForceUpdate,
-  });
-
   useNewMessage({
     lockChannelOrder,
     setChannels,
@@ -316,6 +314,28 @@ export const ChannelList = <
     setChannels,
   });
 
+  const channelIdsStr = channels.reduce((acc, channel) => `${acc}${channel.cid}`, '');
+
+  useEffect(() => {
+    if (staticChannelsActive || !enableOfflineSupport) {
+      return;
+    }
+    upsertCidsForQuery({
+      cids: channels.map((c) => c.cid),
+      filters,
+      sort,
+    });
+  }, [channelIdsStr, staticChannelsActive]);
+
+  useEffect(() => {
+    const unsubscribe = subscribeConnectionRecoveredCallback(() => {
+      refreshList();
+      setForceUpdate((count) => count + 1);
+    });
+
+    return () => unsubscribe();
+  });
+
   const channelsContext = useCreateChannelsContext({
     additionalFlatListProps,
     channels,

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -142,6 +142,10 @@ const ChannelListMessengerWithContext = <
   const ListFooterComponent = () =>
     channels.length && ListHeaderComponent ? <ListHeaderComponent /> : null;
 
+  if (loadingChannels) {
+    return <LoadingIndicator listType='channel' />;
+  }
+
   return (
     <>
       <FlatList

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -58,9 +58,11 @@ describe('useChannelUpdated', () => {
             appSettings: null,
             client: mockClient,
             connectionRecovering: false,
+            enableOfflineSupport: false,
             isOnline: true,
             mutedUsers: [],
             setActiveChannel: () => null,
+            subscribeConnectionRecoveredCallback: () => () => null,
           }}
         >
           <TestComponent />

package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts

@@ -42,7 +42,7 @@ export const useAddedToChannelNotification = <
       }
     };
 
-    client.on('notification.added_to_channel', handleEvent);
-    return () => client.off('notification.added_to_channel', handleEvent);
+    const listener = client?.on('notification.added_to_channel', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useChannelDeleted.ts

@@ -40,7 +40,7 @@ export const useChannelDeleted = <
       }
     };
 
-    client.on('channel.deleted', handleEvent);
-    return () => client.off('channel.deleted', handleEvent);
+    const listener = client?.on('channel.deleted', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useChannelHidden.ts

@@ -40,7 +40,7 @@ export const useChannelHidden = <
       }
     };
 
-    client.on('channel.hidden', handleEvent);
-    return () => client.off('channel.hidden', handleEvent);
+    const listener = client?.on('channel.hidden', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useChannelTruncated.ts

@@ -36,7 +36,7 @@ export const useChannelTruncated = <
       setForceUpdate((count) => count + 1);
     };
 
-    client.on('channel.truncated', handleEvent);
-    return () => client.off('channel.truncated', handleEvent);
+    const listener = client?.on('channel.truncated', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useChannelUpdated.ts

@@ -46,7 +46,7 @@ export const useChannelUpdated = <
       }
     };
 
-    client.on('channel.updated', handleEvent);
-    return () => client.off('channel.updated', handleEvent);
+    const listener = client?.on('channel.updated', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useChannelVisible.ts

@@ -42,7 +42,7 @@ export const useChannelVisible = <
       }
     };
 
-    client.on('channel.visible', handleEvent);
-    return () => client.off('channel.visible', handleEvent);
+    const listener = client?.on('channel.visible', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -30,11 +30,12 @@ export const useNewMessage = <
             cid: event.cid,
           });
         }
+
         return [...channels];
       });
     };
 
-    client.on('message.new', handleEvent);
-    return () => client.off('message.new', handleEvent);
+    const listener = client?.on('message.new', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts

@@ -42,7 +42,7 @@ export const useNewMessageNotification = <
       }
     };
 
-    client.on('notification.message_new', handleEvent);
-    return () => client.off('notification.message_new', handleEvent);
+    const listener = client?.on('notification.message_new', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useRemovedFromChannelNotification.ts

@@ -35,7 +35,7 @@ export const useRemovedFromChannelNotification = <
       }
     };
 
-    client.on('notification.removed_from_channel', handleEvent);
-    return () => client.off('notification.removed_from_channel', handleEvent);
+    const listener = client?.on('notification.removed_from_channel', handleEvent);
+    return () => listener?.unsubscribe();
   }, []);
 };

package/src/components/ChannelList/hooks/listeners/useUserPresence.ts

@@ -33,12 +33,13 @@ export const useUserPresence = <
       });
     };
 
-    client.on('user.presence.changed', handleEvent);
-    client.on('user.updated', handleEvent);
+    const listeners = [
+      client?.on('user.presence.changed', handleEvent),
+      client?.on('user.updated', handleEvent),
+    ];
 
     return () => {
-      client.off('user.presence.changed', handleEvent);
-      client.off('user.updated', handleEvent);
+      listeners?.forEach((l) => l?.unsubscribe());
     };
   }, []);
 };

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 { getChannels } from '../../../store/apis/getChannels';
 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,29 @@ 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 [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 +93,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 +105,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 +128,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 +177,41 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    reloadList();
+    const loadChannels = () => {
+      if (!client?.user?.id) return;
+      if (enableOfflineSupport) {
+        try {
+          const channelsFromDB = getChannels({ currentUserId: client.user.id, filters, sort });
+          setChannels(
+            client.hydrateActiveChannels(channelsFromDB, {
+              staticState: 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.length === 0,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
     refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,
     setChannels,
+    staticChannelsActive,
   };
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -101,8 +101,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>
   );