stream-chat-react-native-core 4.10.0 → 5.0.0-offline-support.0

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';
 
@@ -19,6 +19,7 @@ import { useConnectionRecovered } from './hooks/listeners/useConnectionRecovered
 import { useNewMessage } from './hooks/listeners/useNewMessage';
 import { useNewMessageNotification } from './hooks/listeners/useNewMessageNotification';
 import { useRemovedFromChannelNotification } from './hooks/listeners/useRemovedFromChannelNotification';
+import { useSyncDatabase } from './hooks/listeners/useSyncDatabase';
 import { useUserPresence } from './hooks/listeners/useUserPresence';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
@@ -28,6 +29,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 +244,7 @@ export const ChannelList = <
   } = props;
 
   const [forceUpdate, setForceUpdate] = useState(0);
-
+  const { enableOfflineSupport } = useChatContext();
   const {
     channels,
     error,
@@ -249,11 +252,13 @@ export const ChannelList = <
     loadingChannels,
     loadingNextPage,
     loadNextPage,
+    staticChannelsActive,
     refreshing,
     refreshList,
     reloadList,
     setChannels,
   } = usePaginatedChannels<StreamChatGenerics>({
+    enableOfflineSupport,
     filters,
     options,
     sort,
@@ -293,6 +298,7 @@ export const ChannelList = <
   });
 
   useConnectionRecovered<StreamChatGenerics>({
+    enableOfflineSupport,
     refreshList,
     setForceUpdate,
   });
@@ -316,6 +322,23 @@ export const ChannelList = <
     setChannels,
   });
 
+  useSyncDatabase({
+    enableOfflineSupport,
+  });
+  const channelIds = channels.map((c) => c.cid);
+  const channelIdsStr = channelIds.join('');
+
+  useEffect(() => {
+    if (staticChannelsActive || !enableOfflineSupport) {
+      return;
+    }
+    upsertCidsForQuery({
+      cids: channelIds,
+      filters,
+      sort,
+    });
+  }, [channelIdsStr, staticChannelsActive]);
+
   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,6 +58,7 @@ describe('useChannelUpdated', () => {
             appSettings: null,
             client: mockClient,
             connectionRecovering: false,
+            enableOfflineSupport: false,
             isOnline: true,
             mutedUsers: [],
             setActiveChannel: () => null,

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

@@ -0,0 +1,175 @@
+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) {
+      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 related to existing messages with database.
+      return updateMessage({
+        flush,
+        message: event.message,
+      });
+    }
+  }
+  if (type === 'reaction.updated') {
+    if (event.message && event.reaction) {
+      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') {
+    if (event.channel) {
+      return upsertChannelData({
+        channel: event.channel,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channel.hidden') {
+    if (event.channel) {
+      return deleteChannel({
+        cid: event.channel.cid,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channel.visible') {
+    if (event.channel) {
+      return upsertChannelData({
+        channel: event.channel,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channel.truncated') {
+    if (event.channel) {
+      return deleteMessagesForChannel({
+        cid: event.channel.cid,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channel.deleted') {
+    if (event.channel) {
+      return deleteChannel({
+        cid: event.channel.cid,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'channels.queried') {
+    if (event.queriedChannels) {
+      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,
+      });
+    }
+  }
+
+  if (type === 'notification.added_to_channel') {
+    if (event.channel) {
+      return upsertChannelData({
+        channel: event.channel,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'notification.removed_from_channel') {
+    if (event.channel) {
+      return deleteChannel({
+        cid: event.channel.cid,
+        flush,
+      });
+    }
+  }
+
+  if (type === 'notification.message_new') {
+    if (event.channel) {
+      return upsertChannelData({
+        channel: event.channel,
+        flush,
+      });
+    }
+  }
+
+  return [];
+};

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/useConnectionRecovered.ts

@@ -1,10 +1,19 @@
 import { useEffect, useRef } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import type { StreamChat } from 'stream-chat';
+
+import { handleEventToSyncDB } from './handleEventToSyncDB';
 
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+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 Parameters = {
+type Params = {
+  enableOfflineSupport: boolean;
   refreshList: () => void;
   setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
 };
@@ -12,30 +21,66 @@ type Parameters = {
 export const useConnectionRecovered = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  enableOfflineSupport,
   refreshList,
   setForceUpdate,
-}: Parameters) => {
+}: Params) => {
   const { client } = useChatContext<StreamChatGenerics>();
-
   const refRefreshList = useRef(refreshList);
   refRefreshList.current = refreshList;
 
   useEffect(() => {
-    const handleEvent = () => {
+    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 () => {
+      await sync();
       refRefreshList.current();
       setForceUpdate((count) => count + 1);
     };
 
-    const { unsubscribe: unsubscribeRecovered } = client.on('connection.recovered', handleEvent);
-    const { unsubscribe: unsubscribeChanged } = client.on('connection.changed', (event) => {
-      if (event.online) {
-        handleEvent();
-      }
-    });
+    let connectionRecoveredListener: ReturnType<StreamChat['on']>;
+    let connectionChangedListener: ReturnType<StreamChat['on']>;
+
+    if (client && enableOfflineSupport) {
+      connectionRecoveredListener = client.on('connection.recovered', handleEvent);
+      connectionChangedListener = client.on('connection.changed', (event) => {
+        if (event.online) {
+          handleEvent();
+        }
+      });
+    }
 
     return () => {
-      unsubscribeRecovered();
-      unsubscribeChanged();
+      connectionRecoveredListener?.unsubscribe?.();
+      connectionChangedListener?.unsubscribe?.();
     };
-  }, []);
+  }, [client]);
 };

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/useSyncDatabase.ts

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

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,16 +177,35 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    reloadList();
-  }, [filterStr, sortStr]);
+    if (client?.user?.id) {
+      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();
+    }
+  }, [filterStr, sortStr, client]);
 
   return {
     channels,
     error,
     hasNextPage,
-    loadingChannels: activeQueryType === 'reload',
+    loadingChannels:
+      activeQueryType === 'queryLocalDB'
+        ? true
+        : activeQueryType === 'reload' && channels.length === 0,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
+    staticChannelsActive,
     refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,

package/src/components/ChannelPreview/ChannelAvatar.tsx

@@ -10,15 +10,15 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 
 export type ChannelAvatarProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
+  > = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
 
 /**
  * This UI component displays an avatar for a particular channel.
  */
 export const ChannelAvatar = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelAvatarProps<StreamChatGenerics>,
+  >(
+    props: ChannelAvatarProps<StreamChatGenerics>,
 ) => {
   const { channel } = props;