stream-chat-react-native-core 8.0.1-beta.5 → 8.1.0

package/src/components/Chat/Chat.tsx

@@ -235,10 +235,14 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
     client.threads.registerSubscriptions();
     client.polls.registerSubscriptions();
+    client.reminders.registerSubscriptions();
+    client.reminders.initTimers();
 
     return () => {
       client.threads.unregisterSubscriptions();
       client.polls.unregisterSubscriptions();
+      client.reminders.unregisterSubscriptions();
+      client.reminders.clearTimers();
     };
   }, [client]);
 

package/src/components/MessageList/MessageList.tsx

@@ -626,13 +626,15 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
 
   useEffect(() => {
-    if (!processedMessageList.length) {
-      return;
-    }
     if (threadList) {
       setAutoscrollToRecent(true);
       return;
     }
+
+    if (!processedMessageList.length) {
+      return;
+    }
+
     const notLatestSet = channel.state.messages !== channel.state.latestMessages;
     if (notLatestSet) {
       latestNonCurrentMessageBeforeUpdateRef.current =

package/src/hooks/index.ts

@@ -5,3 +5,5 @@ export * from './useScreenDimensions';
 export * from './useStateStore';
 export * from './useStableCallback';
 export * from './useLoadingImage';
+export * from './useMessageReminder';
+export * from './useQueryReminders';

package/src/hooks/useMessageReminder.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+
+import type { ReminderManagerState } from 'stream-chat';
+
+import { useStateStore } from './useStateStore';
+
+import { useChatContext } from '../contexts/chatContext/ChatContext';
+
+export const useMessageReminder = (messageId: string) => {
+  const { client } = useChatContext();
+  const reminderSelector = useCallback(
+    (state: ReminderManagerState) => ({
+      reminder: state.reminders.get(messageId),
+    }),
+    [messageId],
+  );
+  const { reminder } = useStateStore(client.reminders.state, reminderSelector);
+  return reminder;
+};

package/src/hooks/useQueryReminders.ts

@@ -0,0 +1,145 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Event, PaginatorState, ReminderFilters, ReminderResponse } from 'stream-chat';
+
+import { useStateStore } from './useStateStore';
+
+import { useChatContext } from '../contexts/chatContext/ChatContext';
+
+const selector = (nextValue: PaginatorState<ReminderResponse>) =>
+  ({
+    isLoading: nextValue.isLoading,
+    items: nextValue.items,
+  }) as const;
+
+// Utility to sort reminders by remind_at date in ascending order
+const sortRemindersByDate = (reminders: ReminderResponse[]) => {
+  return reminders.sort((a, b) => {
+    if (!a.remind_at || !b.remind_at) {
+      return 0; // If either remind_at is missing, keep original order
+    }
+    // Sort by remind_at date
+    return new Date(a.remind_at).getTime() - new Date(b.remind_at).getTime();
+  });
+};
+
+// Utility functions to check reminder status
+const isReminderOverdue = (reminder?: ReminderResponse) => {
+  return reminder?.remind_at && new Date(reminder.remind_at) < new Date();
+};
+
+const isReminderUpcoming = (reminder?: ReminderResponse) => {
+  return reminder?.remind_at && new Date(reminder.remind_at) > new Date();
+};
+
+// Utility to check if all reminders should be shown based on filters
+const showAllReminders = (filters?: ReminderFilters) => {
+  return filters && Object.keys(filters).length === 0;
+};
+
+/**
+ * Custom hook to query reminders from the Stream Chat client.
+ * It handles fetching, updating, and deleting reminders, and provides
+ * a way to refresh the list and load more reminders.
+ *
+ * @returns {Object} - Contains data, isLoading, onEndReached, onRefresh, and setData.
+ */
+export const useQueryReminders = () => {
+  const { client } = useChatContext();
+  const { isLoading, items } = useStateStore(client.reminders.paginator.state, selector);
+  const [data, setData] = useState<ReminderResponse[]>(items ?? []);
+  // The deletion and updates are not handled by the paginator, so we need to cache them
+  // to avoid showing deleted or updated reminders in the list.
+  const deletedOrUpdatedRemindersCache = useRef<Record<string, ReminderResponse>>({});
+
+  useEffect(() => {
+    setData((prevData) => {
+      if (!items) {
+        return prevData;
+      }
+      const newData: ReminderResponse[] = [];
+      items.forEach((reminder) => {
+        if (prevData.includes(reminder)) {
+          newData.push(reminder);
+        } else {
+          if (!deletedOrUpdatedRemindersCache.current[reminder.message_id]) {
+            newData.push(reminder);
+          }
+        }
+      });
+      return newData;
+    });
+  }, [items, client.reminders.paginator.filters]);
+
+  useEffect(() => {
+    const handleReminderDeleted = (event: Event) => {
+      if (!event.reminder?.message_id) {
+        return;
+      }
+      deletedOrUpdatedRemindersCache.current[event.reminder.message_id] = event.reminder;
+      setData((prevData) => {
+        return prevData.filter((item) => item.message_id !== event.reminder?.message_id);
+      });
+    };
+
+    const handleReminderCreated = (event: Event) => {
+      setData((prevData) => {
+        if (!event.reminder) {
+          return prevData;
+        }
+        const updatedData = [...prevData, event.reminder];
+        return sortRemindersByDate(updatedData);
+      });
+    };
+
+    const handleReminderUpdated = (event: Event) => {
+      const { reminder } = event;
+      if (!reminder || showAllReminders(client.reminders.paginator.filters)) {
+        return; // No update needed if reminder is undefined or filters is empty
+      }
+      deletedOrUpdatedRemindersCache.current[reminder.message_id] = reminder;
+      setData((prevData) => {
+        const existingReminder = prevData.find((item) => item.message_id === reminder?.message_id);
+        if (!existingReminder) {
+          return prevData; // No update needed if reminder not found
+        }
+
+        if (existingReminder.remind_at && !event.reminder?.remind_at) {
+          return prevData.filter((item) => item.message_id !== event.reminder?.message_id);
+        }
+        if (!existingReminder.remind_at && event.reminder?.remind_at) {
+          return prevData.filter((item) => item.message_id !== event.reminder?.message_id);
+        }
+        if (isReminderOverdue(existingReminder) && !isReminderOverdue(event.reminder)) {
+          return prevData.filter((item) => item.message_id !== event.reminder?.message_id);
+        }
+        if (isReminderUpcoming(existingReminder) && !isReminderUpcoming(event.reminder)) {
+          return prevData.filter((item) => item.message_id !== event.reminder?.message_id);
+        }
+
+        return prevData;
+      });
+    };
+
+    const listeners = [
+      client.on('reminder.created', handleReminderCreated),
+      client.on('reminder.deleted', handleReminderDeleted),
+      client.on('reminder.updated', handleReminderUpdated),
+    ];
+
+    return () => {
+      listeners.forEach((l) => l.unsubscribe());
+    };
+  }, [client]);
+
+  const loadNext = useCallback(async () => {
+    await client.reminders.queryNextReminders();
+  }, [client.reminders]);
+
+  return {
+    data,
+    isLoading,
+    loadNext,
+    setData,
+  };
+};

package/src/store/SqliteClient.ts

@@ -28,7 +28,7 @@ import type { PreparedBatchQueries, PreparedQueries, Scalar, Table } from './typ
  * This way usage @op-engineering/op-sqlite package is scoped to a single class/file.
  */
 export class SqliteClient {
-  static dbVersion = 11;
+  static dbVersion = 12;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;

package/src/store/apis/getChannelMessages.ts

@@ -51,6 +51,17 @@ export const getChannelMessages = async ({
     messageIdsVsPolls[message.poll_id] = pollsById[message.poll_id];
   });
 
+  const messageIdsVsReminders: Record<string, TableRow<'reminders'>> = {};
+  const reminders = (await SqliteClient.executeSql.apply(
+    null,
+    createSelectQuery('reminders', ['*'], {
+      messageId: messageIds,
+    }),
+  )) as unknown as TableRow<'reminders'>[];
+  reminders.forEach((reminder) => {
+    messageIdsVsReminders[reminder.messageId] = reminder;
+  });
+
   // Populate the messages.
   const cidVsMessages: Record<string, MessageResponse[]> = {};
   messageRows.forEach((m) => {
@@ -65,6 +76,7 @@ export const getChannelMessages = async ({
           messageRow: m,
           pollRow: messageIdsVsPolls[m.poll_id],
           reactionRows: messageIdVsReactions[m.id],
+          reminderRow: messageIdsVsReminders[m.id],
         }),
       );
     }

package/src/store/apis/upsertMessages.ts

@@ -3,6 +3,7 @@ import type { LocalMessage, MessageResponse } from 'stream-chat';
 import { mapMessageToStorable } from '../mappers/mapMessageToStorable';
 import { mapPollToStorable } from '../mappers/mapPollToStorable';
 import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
+import { mapReminderToStorable } from '../mappers/mapReminderToStorable';
 import { mapUserToStorable } from '../mappers/mapUserToStorable';
 import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
 import { SqliteClient } from '../SqliteClient';
@@ -18,6 +19,7 @@ export const upsertMessages = async ({
   const storableUsers: Array<ReturnType<typeof mapUserToStorable>> = [];
   const storableReactions: Array<ReturnType<typeof mapReactionToStorable>> = [];
   const storablePolls: Array<ReturnType<typeof mapPollToStorable>> = [];
+  const storableReminders: Array<ReturnType<typeof mapReminderToStorable>> = [];
 
   messages?.forEach((message: MessageResponse | LocalMessage) => {
     storableMessages.push(mapMessageToStorable(message));
@@ -33,6 +35,9 @@ export const upsertMessages = async ({
     if (message.poll) {
       storablePolls.push(mapPollToStorable(message.poll));
     }
+    if (message.reminder) {
+      storableReminders.push(mapReminderToStorable(message.reminder));
+    }
   });
 
   const finalQueries = [
@@ -42,6 +47,9 @@ export const upsertMessages = async ({
       createUpsertQuery('reactions', storableReaction),
     ),
     ...storablePolls.map((storablePoll) => createUpsertQuery('poll', storablePoll)),
+    ...storableReminders.map((storableReminder) =>
+      createUpsertQuery('reminders', storableReminder),
+    ),
   ];
 
   SqliteClient.logger?.('info', 'upsertMessages', {
@@ -49,6 +57,7 @@ export const upsertMessages = async ({
     messages: storableMessages,
     polls: storablePolls,
     reactions: storableReactions,
+    reminders: storableReminders,
     users: storableUsers,
   });
 

package/src/store/mappers/mapMessageToStorable.ts

@@ -21,6 +21,8 @@ export const mapMessageToStorable = (
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     poll,
     poll_id,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    reminder,
     reaction_groups,
     text,
     type,

package/src/store/mappers/mapReminderToStorable.ts

@@ -0,0 +1,18 @@
+import type { ReminderResponseBase } from 'stream-chat';
+
+import { mapDateTimeToStorable } from './mapDateTimeToStorable';
+
+import type { TableRow } from '../types';
+
+export const mapReminderToStorable = (reminder: ReminderResponseBase): TableRow<'reminders'> => {
+  const { channel_cid, created_at, message_id, remind_at, updated_at, user_id } = reminder;
+
+  return {
+    channelCid: channel_cid,
+    createdAt: mapDateTimeToStorable(created_at),
+    messageId: message_id,
+    remindAt: mapDateTimeToStorable(remind_at),
+    updatedAt: mapDateTimeToStorable(updated_at),
+    userId: user_id,
+  };
+};

package/src/store/mappers/mapStorableToMessage.ts

@@ -3,6 +3,7 @@ import type { MessageResponse } from 'stream-chat';
 import { mapStorableToPoll } from './mapStorableToPoll';
 import { mapStorableToReaction } from './mapStorableToReaction';
 
+import { mapStorableToReminder } from './mapStorableToReminder';
 import { mapStorableToUser } from './mapStorableToUser';
 
 import type { TableRow, TableRowJoinedUser } from '../types';
@@ -12,11 +13,13 @@ export const mapStorableToMessage = ({
   messageRow,
   pollRow,
   reactionRows,
+  reminderRow,
 }: {
   currentUserId: string;
   messageRow: TableRowJoinedUser<'messages'>;
   pollRow: TableRow<'poll'>;
   reactionRows?: TableRowJoinedUser<'reactions'>[];
+  reminderRow?: TableRow<'reminders'>;
 }): MessageResponse => {
   const {
     createdAt,
@@ -47,5 +50,6 @@ export const mapStorableToMessage = ({
     user: mapStorableToUser(user),
     ...(pollRow ? { poll: mapStorableToPoll(pollRow) } : {}),
     ...(extraData ? JSON.parse(extraData) : {}),
+    ...(reminderRow ? { reminder: mapStorableToReminder(reminderRow) } : {}),
   };
 };

package/src/store/mappers/mapStorableToReminder.ts

@@ -0,0 +1,16 @@
+import { ReminderResponseBase } from 'stream-chat';
+
+import type { TableRow } from '../types';
+
+export const mapStorableToReminder = (row: TableRow<'reminders'>): ReminderResponseBase => {
+  const { channelCid, createdAt, messageId, remindAt, updatedAt, userId } = row;
+
+  return {
+    channel_cid: channelCid,
+    created_at: createdAt,
+    message_id: messageId,
+    remind_at: remindAt,
+    updated_at: updatedAt,
+    user_id: userId,
+  };
+};

package/src/store/schema.ts

@@ -249,6 +249,24 @@ export const tables: Tables = {
     ],
     primaryKey: ['userId', 'cid'],
   },
+  reminders: {
+    columns: {
+      channelCid: 'TEXT NOT NULL',
+      createdAt: 'TEXT',
+      messageId: 'TEXT NOT NULL',
+      remindAt: 'TEXT',
+      updatedAt: 'TEXT',
+      userId: 'TEXT NOT NULL',
+    },
+    indexes: [
+      {
+        columns: ['messageId'],
+        name: 'index_reminders',
+        unique: false,
+      },
+    ],
+    primaryKey: ['messageId'],
+  },
   users: {
     columns: {
       banned: 'BOOLEAN DEFAULT FALSE',
@@ -410,6 +428,14 @@ export type Schema = {
     unreadMessages?: number;
     userId?: string;
   };
+  reminders: {
+    channelCid: string;
+    createdAt: string;
+    messageId: string;
+    updatedAt: string;
+    userId: string;
+    remindAt?: string;
+  };
   users: {
     id: string;
     banned?: boolean;

package/src/utils/i18n/Streami18n.ts

@@ -1,5 +1,6 @@
 import Dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
+import duration from 'dayjs/plugin/duration';
 import localeData from 'dayjs/plugin/localeData';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -465,6 +466,7 @@ export class Streami18n {
        * For some reason Dayjs.isDayjs(this.DateTimeParser()) doesn't work.
        */
       if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {
+        this.DateTimeParser.extend(duration);
         this.DateTimeParser.extend(LocalizedFormat);
         this.DateTimeParser.extend(calendar);
         this.DateTimeParser.extend(localeData);

package/src/utils/i18n/predefinedFormatters.ts

@@ -1,7 +1,19 @@
+import { isDayjs } from 'dayjs';
+
+import type { Duration as DayjsDuration } from 'dayjs/plugin/duration';
+
 import { getDateString } from './getDateString';
-import { PredefinedFormatters, TimestampFormatterOptions } from './types';
+import { DurationFormatterOptions, PredefinedFormatters, TimestampFormatterOptions } from './types';
 
 export const predefinedFormatters: PredefinedFormatters = {
+  durationFormatter:
+    (streamI18n) =>
+    (value, _, { format, withSuffix }: DurationFormatterOptions) => {
+      if (format && isDayjs(streamI18n.DateTimeParser)) {
+        return (streamI18n.DateTimeParser.duration(value) as DayjsDuration).format(format);
+      }
+      return streamI18n.DateTimeParser.duration(value).humanize(!!withSuffix);
+    },
   timestampFormatter:
     (streamI18n) =>
     (

package/src/utils/i18n/types.ts

@@ -9,6 +9,60 @@ export type FormatterFactory<V> = (
 /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
 export type CustomFormatters = Record<string, FormatterFactory<any>>;
 
+/**
+ * import dayjs from 'dayjs';
+ * import duration from 'dayjs/plugin/duration';
+ *
+ * dayjs.extend(duration);
+ *
+ * // Basic formatting
+ * dayjs.duration(1000).format('HH:mm:ss'); // "00:00:01"
+ * dayjs.duration(3661000).format('HH:mm:ss'); // "01:01:01"
+ *
+ * // Different format tokens
+ * dayjs.duration(3661000).format('D[d] H[h] m[m] s[s]'); // "0d 1h 1m 1s"
+ * dayjs.duration(3661000).format('D [days] H [hours] m [minutes] s [seconds]'); // "0 days 1 hours 1 minutes 1 seconds"
+ *
+ * // Zero padding
+ * dayjs.duration(1000).format('HH:mm:ss'); // "00:00:01"
+ * dayjs.duration(1000).format('H:m:s'); // "0:0:1"
+ *
+ * // Different units
+ * dayjs.duration(3661000).format('D'); // "0"
+ * dayjs.duration(3661000).format('H'); // "1"
+ * dayjs.duration(3661000).format('m'); // "1"
+ * dayjs.duration(3661000).format('s'); // "1"
+ *
+ * // Complex examples
+ * dayjs.duration(3661000).format('DD:HH:mm:ss'); // "00:01:01:01"
+ * dayjs.duration(3661000).format('D [days] HH:mm:ss'); // "0 days 01:01:01"
+ * dayjs.duration(3661000).format('H[h] m[m] s[s]'); // "1h 1m 1s"
+ *
+ * // Negative durations
+ * dayjs.duration(-3661000).format('HH:mm:ss'); // "-01:01:01"
+ *
+ * // Long durations
+ * dayjs.duration(86400000).format('D [days]'); // "1 days"
+ * dayjs.duration(2592000000).format('M [months]'); // "30 months"
+ *
+ *
+ * Format tokens:
+ * D - days
+ * H - hours
+ * m - minutes
+ * s - seconds
+ * S - milliseconds
+ * M - months
+ * Y - years
+ * You can also use:
+ * HH, mm, ss for zero-padded numbers
+ * [text] for literal text
+ */
+export type DurationFormatterOptions = {
+  format?: string;
+  withSuffix?: boolean;
+};
+
 export type TimestampFormatterOptions = {
   /* If true, call the `Day.js` calendar function to get the date string to display (e.g. "Yesterday at 3:58 PM"). */
   calendar?: boolean | null;
@@ -16,8 +70,11 @@ export type TimestampFormatterOptions = {
   calendarFormats?: Record<string, string>;
   /* Overrides the default timestamp format if calendar is disabled. */
   format?: string;
+  /* If true, the formatter will return a humanized string with suffix (e.g. "in 5 minutes" or "5 minutes ago"). */
+  withSuffix?: boolean;
 };
 
 export type PredefinedFormatters = {
+  durationFormatter: FormatterFactory<string>;
   timestampFormatter: FormatterFactory<string | Date>;
 };

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.0.1-beta.5"
+  "version": "8.1.0"
 }