feat: add reminders implementation

Author: khushal87

examples/SampleApp/App.tsx

@@ -10,8 +10,10 @@ import {
   OverlayProvider,
   setupCommandUIMiddlewares,
   SqliteClient,
+  Streami18n,
   ThemeProvider,
   useOverlayContext,
+  enTranslations,
 } from 'stream-chat-react-native';
 import { getMessaging } from '@react-native-firebase/messaging';
 import notifee, { EventType } from '@notifee/react-native';
@@ -201,16 +203,28 @@ const DrawerNavigatorWrapper: React.FC<{
   chatClient: StreamChat;
 }> = ({ chatClient }) => {
   const streamChatTheme = useStreamChatTheme();
+  const streami18n = new Streami18n();
+
+  streami18n.registerTranslation('en', {
+    ...enTranslations,
+    'Due since {{ dueSince }}': 'Due since {{ dueSince }}',
+    'Due {{ timeLeft }}': 'Due {{ timeLeft }}',
+    'duration/Message reminder': '{{ milliseconds | durationFormatter(withSuffix: true) }}',
+    'duration/Remind Me': '{{ milliseconds | durationFormatter(withSuffix: true) }}',
+    'timestamp/Remind me': '{{ milliseconds | durationFormatter(withSuffix: true) }}',
+    'timestamp/ReminderNotification': '{{ timestamp | timestampFormatter(calendar: true) }}',
+  });
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <OverlayProvider value={{ style: streamChatTheme }}>
+      <OverlayProvider value={{ style: streamChatTheme }} i18nInstance={streami18n}>
         <Chat
           client={chatClient}
           enableOfflineSupport
           // @ts-expect-error - the `ImageComponent` prop is generic, meaning we can expect an error
           ImageComponent={FastImage}
           isMessageAIGenerated={isMessageAIGenerated}
+          i18nInstance={streami18n}
         >
           <AppOverlayProvider>
             <UserSearchProvider>

examples/SampleApp/ios/Podfile.lock

@@ -2425,7 +2425,7 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - SocketRocket (0.7.1)
-  - stream-chat-react-native (7.2.0):
+  - stream-chat-react-native (8.0.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2872,7 +2872,7 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  stream-chat-react-native: 2de2866392bfecadf005ec5f0b1f882b613b89ba
+  stream-chat-react-native: 14526230f326d59b638dd1e2bd36f105045c7065
   Yoga: b2eaabf17044cd4273a661b14eb83f9fd2c90491
 
 PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d

examples/SampleApp/src/components/BottomTabs.tsx

@@ -12,6 +12,7 @@ import { MentionsTab } from '../icons/MentionsTab';
 import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import type { Route } from '@react-navigation/native';
 import { DraftsTab } from '../icons/DraftsTab';
+import { RemindersTab } from '../icons/ReminderTab';
 
 const styles = StyleSheet.create({
   notification: {
@@ -50,7 +51,6 @@ const getTab = (key: string) => {
         icon: <DraftsTab />,
         iconActive: <DraftsTab active />,
         title: 'Drafts',
-        notification: <ChannelsUnreadCountBadge />,
       };
     case 'ThreadsScreen':
       return {
@@ -65,6 +65,13 @@ const getTab = (key: string) => {
         iconActive: <MentionsTab active />,
         title: 'Mentions',
       };
+    case 'RemindersScreen':
+      return {
+        icon: <RemindersTab />,
+        iconActive: <RemindersTab active />,
+        title: 'Reminders',
+      };
+    // Add more cases for other tabs as needed
     default:
       return null;
   }

examples/SampleApp/src/components/DraftsList.tsx

@@ -187,7 +187,7 @@ export const DraftsList = () => {
   }, [draftsManager]);
 
   const onEndReached = useCallback(() => {
-      draftsManager.loadNextPage();
+    draftsManager.loadNextPage();
   }, [draftsManager]);
 
   return (

examples/SampleApp/src/components/Reminders/MessageReminderHeader.tsx

@@ -0,0 +1,75 @@
+import {
+  MessageFooterProps,
+  Time,
+  useStateStore,
+  useTranslationContext,
+} from 'stream-chat-react-native';
+import { useMessageReminder } from '../../hooks/useMessageReminder';
+import { ReminderState } from 'stream-chat';
+import { StyleSheet, Text, View } from 'react-native';
+
+const reminderStateSelector = (state: ReminderState) => ({
+  timeLeftMs: state.timeLeftMs,
+});
+
+export const MessageReminderHeader = ({ message }: MessageFooterProps) => {
+  const messageId = message?.id ?? '';
+  const reminder = useMessageReminder(messageId);
+  const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
+  const { t } = useTranslationContext();
+
+  const stopRefreshBoundaryMs = reminder?.timer.stopRefreshBoundaryMs;
+  const stopRefreshTimeStamp =
+    reminder?.remindAt && stopRefreshBoundaryMs
+      ? reminder?.remindAt.getTime() + stopRefreshBoundaryMs
+      : undefined;
+
+  const isBehindRefreshBoundary =
+    !!stopRefreshTimeStamp && new Date().getTime() > stopRefreshTimeStamp;
+
+  if (!reminder) {
+    return null;
+  }
+
+  // This is for "Saved for Later"
+  if (!reminder.remindAt) {
+    return (
+      <View>
+        <Text style={styles.headerTitle}>🔖 Saved for Later</Text>
+      </View>
+    );
+  }
+
+  if (reminder.remindAt && timeLeftMs !== null) {
+    return (
+      <View style={styles.headerContainer}>
+        <Time height={16} width={16} />
+        <Text style={styles.headerTitle}>
+          {isBehindRefreshBoundary
+            ? t('Due since {{ dueSince }}', {
+                dueSince: t('timestamp/ReminderNotification', {
+                  timestamp: reminder.remindAt,
+                }),
+              })
+            : t('Due {{ timeLeft }}', {
+                timeLeft: t('duration/Message reminder', {
+                  milliseconds: timeLeftMs,
+                }),
+              })}
+        </Text>
+      </View>
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginLeft: 4,
+  },
+});

examples/SampleApp/src/components/Reminders/ReminderBanner.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { ReminderResponse, ReminderState } from 'stream-chat';
+import { useTheme, useTranslationContext, useStateStore } from 'stream-chat-react-native';
+import { useMessageReminder } from '../../hooks/useMessageReminder';
+
+const reminderStateSelector = (state: ReminderState) => ({
+  timeLeftMs: state.timeLeftMs,
+});
+
+export const ReminderBanner = (item: ReminderResponse) => {
+  const {
+    theme: {
+      colors: { accent_blue, accent_red },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+  const { message } = item;
+  const reminder = useMessageReminder(message.id);
+  const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
+  const stopRefreshBoundaryMs = reminder?.timer.stopRefreshBoundaryMs;
+  const stopRefreshTimeStamp =
+    reminder?.remindAt && stopRefreshBoundaryMs
+      ? reminder?.remindAt.getTime() + stopRefreshBoundaryMs
+      : undefined;
+
+  const isBehindRefreshBoundary =
+    !!stopRefreshTimeStamp && new Date().getTime() > stopRefreshTimeStamp;
+
+  if (!reminder?.remindAt) {
+    return <Text style={styles.date}>🔖</Text>;
+  } else if (reminder.remindAt && timeLeftMs) {
+    return (
+      <View
+        style={[
+          styles.bannerContainer,
+          { backgroundColor: timeLeftMs > 0 ? accent_blue : accent_red },
+        ]}
+      >
+        <Text style={styles.date}>
+          {isBehindRefreshBoundary
+            ? t('Due since {{ dueSince }}', {
+                dueSince: t('timestamp/ReminderNotification', {
+                  timestamp: reminder.remindAt,
+                }),
+              })
+            : t('Due {{ timeLeft }}', {
+                timeLeft: t('duration/Message reminder', {
+                  milliseconds: timeLeftMs,
+                }),
+              })}
+        </Text>
+      </View>
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  bannerContainer: {
+    paddingHorizontal: 8,
+    borderRadius: 16,
+    paddingVertical: 4,
+  },
+  date: {
+    color: 'white',
+    fontWeight: '500',
+    fontSize: 12,
+  },
+});