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

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]);
+};

package/src/components/Message/Message.tsx

@@ -763,7 +763,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned &&
-    prevMessage.updated_at === nextMessage.updated_at;
+    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
 
   if (!messageEqual) return false;