feat: add reminders implementation (#3141)

* feat: add reminders implementation

* feat: add reminders implementation

* fix: how data is fetched

* fix: remove console.log

* fix: improve icons and usage

* fix: optimize sample app code

* fix: make reminder list better

* fix: add export for message composer api context

* fix: reminders loading when the tab is changed

* feat: add useQueryReminders

* feat: add useQueryReminders improvements

* feat: add useQueryReminders

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
@@ -2784,7 +2784,7 @@ SPEC CHECKSUMS:
   hermes-engine: 94ed01537bdeccaab1adbf94b040d115d6fa1a7f
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
-  op-sqlite: 6a5255f36253697406618ceba5212d6572012a9d
+  op-sqlite: d7e3053a9518cfb8f763f09a899df7403a9d4eb9
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
   RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
@@ -2794,87 +2794,87 @@ SPEC CHECKSUMS:
   React: 114ee161feb204412580928b743e6716aebac987
   React-callinvoker: d175cf3640a993f6cd960044a7657543157f0ba9
   React-Codegen: 4b8b4817cea7a54b83851d4c1f91f79aa73de30a
-  React-Core: e84d47ce3df8dde567f5b9668f6103f8e562d72a
-  React-CoreModules: ce8e588dca54cd790e2d424d0e678924e62b41b1
-  React-cxxreact: 2c10954abacc35e876adf46e25ebfd74a0106521
+  React-Core: cd487c9eeb125c902242bcc76ced12e14adf4ea4
+  React-CoreModules: 202df4f342e5c2893d5d1899b2856879a90d4bf1
+  React-cxxreact: 72be57cebb9976199e6130ec6f9d511c6ae3b310
   React-debug: d2042a489905b47cb1a987bb9eacc81a68e89587
-  React-defaultsnativemodule: caeee1aa6a9bc60c27c3678e96055ada96c37e22
-  React-domnativemodule: 0b7d770c5d3da2bc194091bf9fc68416e9b88670
-  React-Fabric: b8118ef9817c9ccadd7a878d66ae2faf02e59e8a
-  React-FabricComponents: 7da55420b42b55e06b3b9b6a1aad3c7e300885f2
-  React-FabricImage: 2515fa043a9e652b97947231c0a79bfa778cdd37
+  React-defaultsnativemodule: db406c1b44ed9fd30ef9c86a2d0529c4ba8ed8c9
+  React-domnativemodule: f71e27c03fbdeaa5a318576beb99b997267dfa31
+  React-Fabric: 84377d3efd7f7fb832eb48674c64a4f1b75bc68f
+  React-FabricComponents: e99187e0dcd333cba72d7ac931c06dea66c60849
+  React-FabricImage: 0cd0b4b1ad571648c9aa74060075f425bb1a0baf
   React-featureflags: 8d2d86c7d0812ab474cb326b854c987f44633c72
-  React-featureflagsnativemodule: 8a11970c8713104bf7327ca8aa314be250e6d73f
-  React-graphics: 6581de50c43af3a613ae197df886c86a014ed165
-  React-hermes: 2a9fb8df8a1be5e5b065c91d7b0fad072554055e
-  React-idlecallbacksnativemodule: 66d6d2e3c85d19067763d6764cd3159a39b89e60
-  React-ImageManager: 9ab8bc29c0a743ec51f109925f6d961a57a8293e
-  React-jserrorhandler: f51e203fc68469a86d49fc4dbc99254aca68d122
-  React-jsi: 606a42a46f9a7299c1757686c6856eca8346754b
-  React-jsiexecutor: 762ee9c7962597d2f168afee00a0cac7573e6e48
-  React-jsinspector: 8f3969250c71e78f6a1ef9c6109f12cf723bf69c
-  React-jsinspectortracing: 1c7188a624cb28de6b13d69492161ad2265327b6
-  React-jsitooling: 92450f21d15de625ae6f35cd1540164e7ed61e91
-  React-jsitracing: 4185f91ab619c7005a28edcb8b35b5e741460a16
-  React-logger: 44e070aefe084568c02b544b9d7d436703be1a47
-  React-Mapbuffer: ed1f528261013e46790379cc6727b8005e169a67
-  React-microtasksnativemodule: da563fd4cb7ecc23f67b5f15b92dfe94a9791e2d
-  react-native-blob-util: 68f288ed8fd64a191a4d83ffa5a1dd375dc786d2
-  react-native-cameraroll: 71f93f6a1676f322b7913462d3613e70bd2dc675
-  react-native-document-picker: 06ad77eb1650e628def114ff74f9f767f1888edd
-  react-native-image-picker: 6ccf4bb98d38facc22db35fc2ee59a574fca4d16
-  react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
-  react-native-safe-area-context: f2e97b088ae5f3078f1ad03f51a44bd84f479053
-  react-native-video: 1e0df051b1d5c4bfc8532d8c8bd68428de4a4081
-  React-NativeModulesApple: c761e39d8bb17a074530cb637ec6fe4460fac3af
+  React-featureflagsnativemodule: bd54ca89ed64d31a61a17fa103a991fcfee70821
+  React-graphics: bad51b93c457bb7517540bc9d112e8218773dfe1
+  React-hermes: a40e47b18c31efe4baa7942357e2327ddab63918
+  React-idlecallbacksnativemodule: 75f7e8b32e74c78124297ba73c1b3e6ac08fd39b
+  React-ImageManager: 529243f1b6094af8a8dd58aef885f9afb1c73d8c
+  React-jserrorhandler: bbd5fd904735fac723afc84d295fb17558956698
+  React-jsi: ae02c9d6d68dbed80a9fde8f6d6198035ca154ce
+  React-jsiexecutor: 8c266057f23430685a2d928703e77eda80e1742e
+  React-jsinspector: 1971f190bf2f1ee72f9e1e0e6f56f2f42024fdb2
+  React-jsinspectortracing: 56c50684abc51cbf959a6bbba4ec20fe02f20259
+  React-jsitooling: 0a516b47b6b1c427751ae2a5537c07dd5af60470
+  React-jsitracing: 6aa49f8c5a07eb1c042a924419ecd5d39c2e2098
+  React-logger: 514fac028fee60c84591f951c7c04ba1c5023334
+  React-Mapbuffer: 02f95b72f631228befdfb7e71ad8e2e12b6dae0d
+  React-microtasksnativemodule: 953b922f9473c100dd153cc51739e0d210bfd617
+  react-native-blob-util: e032f2a9d5779aa94934139a60fe5ed6c5071328
+  react-native-cameraroll: 23d28040c32ca8b20661e0c41b56ab041779244b
+  react-native-document-picker: 1f8a568fcd43ed5ad9e53307d487d1de21c340a4
+  react-native-image-picker: f6ece66f251f4a17aab08f5add7be6eb9e7f5356
+  react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
+  react-native-safe-area-context: 8cf8caf5fc0f5a5d3581b650579af9c85c16be04
+  react-native-video: 6a236aa5c7619d4ba9b07ddf965a0b62b1702da3
+  React-NativeModulesApple: 579cac2962d42ffee0d8aae48752f30c4e498bb9
   React-oscompat: f26aa2a4adc84c34212ab12c07988fe19e9cf16a
-  React-perflogger: fb196ad3fa3263afc55f773a10c2741517a27f7c
-  React-performancetimeline: 0d549cebbe759dcbe8efde0fd9cf8922e5788bb8
+  React-perflogger: e15a0d43d1928e1c82f4f0b7fc05f7e9bccfede8
+  React-performancetimeline: 117ad5127882ec6a459435d1397d713e35760be7
   React-RCTActionSheet: c89c8b9b7c3ef87cb6a67e20f5eaea271f4b5f67
-  React-RCTAnimation: 8cff4eda84c7e70c674c50763c724c660ae7e56c
-  React-RCTAppDelegate: 12b784fb29e25a606aaf869d11efb4ae97bb81b3
-  React-RCTBlob: 105ead00cc3cb7ed4180481cec7cb68829c0c16b
-  React-RCTFabric: 5584605ac217c7e66d69bf5b72260e1e64ed8a9a
-  React-RCTFBReactNativeSpec: c3bfd143e072358d0d8b7efc97fb6a09e77f8f46
-  React-RCTImage: ef3831114706dbb9ccab839abe804edef1e1faab
-  React-RCTLinking: eadceef820a11dd2bc7b4b569406eacc637c7f82
-  React-RCTNetwork: 9e1323f0cdfaf0f561d8a6667363cc8deadf41e8
-  React-RCTRuntime: b531dd9beffda4bf014edcbb416eda1411392ac5
-  React-RCTSettings: 482bb7da0e94823cd1a36edd408c85abb2d2e42a
-  React-RCTText: d103fac423b92be0ed295767ea4c2ecc1f4389fd
-  React-RCTVibration: 816504f335105f0682467823400436e18ec98b7b
+  React-RCTAnimation: e00af558ccb5fedd380ae32329be4c38e92e9b90
+  React-RCTAppDelegate: 10d98d4867643322fa4fcd04548359ac88c74656
+  React-RCTBlob: ef645bccf9c33d3b4391794983744da897474dfb
+  React-RCTFabric: bb4d7c817e3228d6e55052a420e6ec2892a6a702
+  React-RCTFBReactNativeSpec: e0942c2c7efa10303c63e287c1c1788aeb6d99ef
+  React-RCTImage: 0e3669a0bda8995874736d0f8f12c21d522df3c4
+  React-RCTLinking: bd81ec3d1b6686a7c58bc8ed8b7a1f05ff2b3f8b
+  React-RCTNetwork: 20b8044841a043b80e7027e1bc4049ffa552d1fa
+  React-RCTRuntime: 13b115119851e0bb55cc7e3f347d763b7c6d9e40
+  React-RCTSettings: fa1d3e6c302e9980b5670315e2ccc998255ce32a
+  React-RCTText: 71f01a9261c015b76702e9d7a4153c9ca45f2341
+  React-RCTVibration: 0e05fa4647ec1391c409fcc1cbd7cdb4894d80ef
   React-rendererconsistency: fd094e5d05a8969e556334496610e66886ab10cb
-  React-renderercss: 7d0c1b296a1712ee17a776eb60589e95d4d6ee2a
-  React-rendererdebug: 6ede134de6beebd53b4917d666142c362b7b6632
+  React-renderercss: f40da71385a7950b778c185e77a3979853f9827c
+  React-rendererdebug: c189ec79cb8a585c973c404f3341c4a8627e3a98
   React-rncore: 9f8b4d93dba987f5209346404ef740c6b6105d73
-  React-RuntimeApple: 53437a180d53b77b14817f41efbdc547a071886d
-  React-RuntimeCore: ab6eab30b91c75b5f07c980dae9cf7951600a33f
+  React-RuntimeApple: 4f2fd7353b517ec268f7fb076976354c1de5d086
+  React-RuntimeCore: 134e3e2982f4afceb751c0b3fdf6c5f3e1768def
   React-runtimeexecutor: 4e7bc0119ff38f80df43d109ef9508497cac1eee
-  React-RuntimeHermes: 16fa50d6afea4bfc8bcc8905b7146b28f838fd80
-  React-runtimescheduler: e44b4ba76d439272d58bd95c0e0750e428b2a6fc
+  React-RuntimeHermes: 0608c43ea0a6e746e964678b343dc439c3e198f8
+  React-runtimescheduler: b9d753b1d34c274261ed14fa35151b38232a7f13
   React-timing: 220bf771493c44a15fdbdedad2cf0a2e3c41edcd
-  React-utils: d6819ad2da189ca066301cf4e41aaad51cef4d16
-  ReactAppDependencyProvider: 552391af67c115d8ee20f9359711e7821145cd96
-  ReactCodegen: 5a3b071aec923e67260550b3f65329f844d691fa
-  ReactCommon: 1dce2374d9dc2cdf634244f1584513b606512750
-  RNAudioRecorderPlayer: 8a1c6ee5080aa83c3f2ccc75d1a43b2ce82b366d
-  RNCAsyncStorage: faf86846c58994b6b8aab074a4914eb1796c2a9f
-  RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
-  RNFBApp: df5caad9f64b6bc87f8a0b110e6bc411fb00a12b
-  RNFBMessaging: 6586f18ab3411aeb3349088c19fe54283d39e529
-  RNGestureHandler: 2fa49aef8b58d35bcc61abe06ffecc4bcc5268a4
-  RNNotifee: 4a6ee5c7deaf00e005050052d73ee6315dff7ec9
-  RNReactNativeHapticFeedback: 85c0a6ff490d52f5e8073040296fefe5945ebbfa
-  RNReanimated: 2b314b18e28adf1b300f606eb0f205a1a6a643e1
-  RNScreens: d9d5d8a2a484bb4446968bfa00db991f1117db44
-  RNShare: 082dae96ef6cabef31d3e6b016d388e71ff0e0d7
-  RNSVG: 1fa61293cb54a97d8ee3b182d2fb60443edcdf69
+  React-utils: a439ca94e40a809a832ad8329698df0146eaccc8
+  ReactAppDependencyProvider: e6d0c3c3cc9862a3ccef0c252835cd7ccb96313d
+  ReactCodegen: 338cfa0d67a821a9caec4888f6f83458dcc69771
+  ReactCommon: 4dbe3f8218c0b6589e982081f503725057457d2b
+  RNAudioRecorderPlayer: 5d5aac7a0e0f159861736ef2b433770342da7197
+  RNCAsyncStorage: c1dca434eda758348a549efb46822b4091d76804
+  RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87
+  RNFBApp: db9c2e6d36fe579ab19b82c0a4a417ff7569db7e
+  RNFBMessaging: de62448d205095171915d622ed5fb45c2be5e075
+  RNGestureHandler: 9aefee4dffdfa4a32d401a771b8a513ecb507d08
+  RNNotifee: 5e3b271e8ea7456a36eec994085543c9adca9168
+  RNReactNativeHapticFeedback: 1597ab4e15cabb38f0f0c62faa17a5e295430170
+  RNReanimated: 0df48dab58b5ee37fd1d1341caba79f59a1187ec
+  RNScreens: 90b905d545a5ebbe976985702b8a39e3475727b2
+  RNShare: 6300b941668273d502ecee9122cade0d5ea966bd
+  RNSVG: 45e3c3210465e75ab6374c9f746179e75d76ce48
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  stream-chat-react-native: 2de2866392bfecadf005ec5f0b1f882b613b89ba
+  stream-chat-react-native: ab733c7105d4e46deccbf6e1c0267b8c230a25ca
   Yoga: b2eaabf17044cd4273a661b14eb83f9fd2c90491
 
 PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.16.2

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: {
@@ -64,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

@@ -1,9 +1,7 @@
 import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { DraftsIcon } from '../icons/DraftIcon';
 import {
-  FileTypes,
   MessagePreview,
-  TranslationContextValue,
   useChatContext,
   useStateStore,
   useTheme,
@@ -14,6 +12,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat';
+import { getPreviewFromMessage } from '../utils/getPreviewOfMessage';
 
 export type DraftItemProps = {
   type?: 'channel' | 'thread';
@@ -24,67 +23,6 @@ export type DraftItemProps = {
   thread?: MessageResponseBase;
 };
 
-export const attachmentTypeIconMap = {
-  audio: '🔈',
-  file: '📄',
-  image: '📷',
-  video: '🎥',
-  voiceRecording: '🎙️',
-} as const;
-
-const getPreviewFromMessage = ({
-  t,
-  draftMessage,
-}: {
-  t: TranslationContextValue['t'];
-  draftMessage: DraftMessage;
-}) => {
-  if (draftMessage.attachments?.length) {
-    const attachment = draftMessage?.attachments?.at(0);
-
-    const attachmentIcon = attachment
-      ? `${
-          attachmentTypeIconMap[
-            (attachment.type as keyof typeof attachmentTypeIconMap) ?? 'file'
-          ] ?? attachmentTypeIconMap.file
-        } `
-      : '';
-
-    if (attachment?.type === FileTypes.VoiceRecording) {
-      return [
-        { bold: false, text: attachmentIcon },
-        {
-          bold: false,
-          text: t('Voice message'),
-        },
-      ];
-    }
-    return [
-      { bold: false, text: attachmentIcon },
-      {
-        bold: false,
-        text:
-          attachment?.type === FileTypes.Image
-            ? attachment?.fallback
-              ? attachment?.fallback
-              : 'N/A'
-            : attachment?.title
-              ? attachment?.title
-              : 'N/A',
-      },
-    ];
-  }
-
-  if (draftMessage.text) {
-    return [
-      {
-        bold: false,
-        text: draftMessage.text,
-      },
-    ];
-  }
-};
-
 export const DraftItem = ({ type, channel, date, message, thread }: DraftItemProps) => {
   const {
     theme: {
@@ -113,7 +51,7 @@ export const DraftItem = ({ type, channel, date, message, thread }: DraftItemPro
   };
 
   const previews = useMemo(() => {
-    return getPreviewFromMessage({ draftMessage: message, t });
+    return getPreviewFromMessage({ message, t });
   }, [message, t]);
 
   return (
@@ -187,7 +125,7 @@ export const DraftsList = () => {
   }, [draftsManager]);
 
   const onEndReached = useCallback(() => {
-      draftsManager.loadNextPage();
+    draftsManager.loadNextPage();
   }, [draftsManager]);
 
   return (