fix: optimize sample app code

khushal87 · khushal87 · commit e8b680f5c3ab · 2025-07-03T20:11:19.000+05:30
diff --git a/examples/SampleApp/src/components/DraftsList.tsx b/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 (
diff --git a/examples/SampleApp/src/components/Reminders/MessageReminderHeader.tsx b/examples/SampleApp/src/components/Reminders/MessageReminderHeader.tsx
@@ -1,10 +1,10 @@
 import {
   MessageFooterProps,
   Time,
+  useMessageReminder,
   useStateStore,
   useTranslationContext,
 } from 'stream-chat-react-native';
-import { useMessageReminder } from '../../hooks/useMessageReminder';
 import { ReminderState } from 'stream-chat';
 import { StyleSheet, Text, View } from 'react-native';
 
diff --git a/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx b/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx
@@ -1,7 +1,11 @@
 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';
+import {
+  useMessageReminder,
+  useTheme,
+  useTranslationContext,
+  useStateStore,
+} from 'stream-chat-react-native';
 
 const reminderStateSelector = (state: ReminderState) => ({
   timeLeftMs: state.timeLeftMs,
diff --git a/examples/SampleApp/src/components/Reminders/ReminderItem.tsx b/examples/SampleApp/src/components/Reminders/ReminderItem.tsx
@@ -1,90 +1,17 @@
 import { useNavigation } from '@react-navigation/native';
 import { useCallback, useMemo } from 'react';
 import { Alert, AlertButton, Pressable, StyleSheet, Text, View } from 'react-native';
-import { MessageResponse, ReminderResponse } from 'stream-chat';
+import { ReminderResponse } from 'stream-chat';
 import {
   Delete,
-  FileTypes,
   MessagePreview,
-  TranslationContextValue,
   useChatContext,
   useTheme,
   useTranslationContext,
 } from 'stream-chat-react-native';
 import { ReminderBanner } from './ReminderBanner';
 import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
-
-export const attachmentTypeIconMap = {
-  audio: '🔈',
-  file: '📄',
-  image: '📷',
-  video: '🎥',
-  voiceRecording: '🎙️',
-} as const;
-
-const getPreviewFromMessage = ({
-  t,
-  message,
-}: {
-  t: TranslationContextValue['t'];
-  message: MessageResponse;
-}) => {
-  if (message.attachments?.length) {
-    const attachment = message?.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 (message.poll_id) {
-    return [
-      {
-        bold: false,
-        text: '📊',
-      },
-      {
-        bold: false,
-        text: 'Poll',
-      },
-    ];
-  }
-
-  return [
-    {
-      bold: false,
-      text: message.text ?? '',
-    },
-  ];
-};
+import { getPreviewFromMessage } from '../../utils/getPreviewOfMessage';
 
 export const ReminderItem = (
   item: ReminderResponse & { onDeleteHandler?: (id: string) => void },
diff --git a/examples/SampleApp/src/screens/ChannelScreen.tsx b/examples/SampleApp/src/screens/ChannelScreen.tsx
@@ -14,6 +14,7 @@ import {
   useTypingString,
   AITypingIndicatorView,
   useTranslationContext,
+  MessageActionsParams,
 } from 'stream-chat-react-native';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -161,6 +162,21 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     [channel, navigation],
   );
 
+  const messageActions = useCallback(
+    (params: MessageActionsParams) => {
+      if (!chatClient) {
+        return [];
+      }
+      return channelMessageActions({
+        params,
+        chatClient,
+        t,
+        colors,
+      });
+    },
+    [chatClient, colors, t],
+  );
+
   if (!channel || !chatClient) {
     return null;
   }
@@ -174,14 +190,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         enforceUniqueReaction
         initialScrollToFirstUnreadMessage
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
-        messageActions={(params) => {
-          return channelMessageActions({
-            params,
-            chatClient,
-            t,
-            colors,
-          });
-        }}
+        messageActions={messageActions}
         MessageHeader={MessageReminderHeader}
         messageId={messageId}
         NetworkDownIndicator={() => null}
diff --git a/examples/SampleApp/src/screens/ThreadScreen.tsx b/examples/SampleApp/src/screens/ThreadScreen.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Channel,
+  MessageActionsParams,
   Thread,
   ThreadType,
   useChatContext,
@@ -74,20 +75,28 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   const { client: chatClient } = useChatContext();
   const { t } = useTranslationContext();
 
+  const messageActions = useCallback(
+    (params: MessageActionsParams) => {
+      if (!chatClient) {
+        return [];
+      }
+      return channelMessageActions({
+        params,
+        chatClient,
+        t,
+      });
+    },
+    [chatClient, t],
+  );
+
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: white }]}>
       <Channel
         audioRecordingEnabled={true}
         channel={channel}
         enforceUniqueReaction
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
-        messageActions={(params) => {
-          return channelMessageActions({
-            params,
-            chatClient,
-            t,
-          });
-        }}
+        messageActions={messageActions}
         MessageHeader={MessageReminderHeader}
         thread={thread}
         threadList
diff --git a/examples/SampleApp/src/utils/getPreviewOfMessage.ts b/examples/SampleApp/src/utils/getPreviewOfMessage.ts
@@ -0,0 +1,74 @@
+import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
+import { FileTypes, TranslationContextValue } from 'stream-chat-react-native';
+
+export const attachmentTypeIconMap = {
+  audio: '🔈',
+  file: '📄',
+  image: '📷',
+  video: '🎥',
+  voiceRecording: '🎙️',
+} as const;
+
+export const getPreviewFromMessage = ({
+  t,
+  message,
+}: {
+  t: TranslationContextValue['t'];
+  message: MessageResponse | LocalMessage | DraftMessage;
+}) => {
+  if (message.attachments?.length) {
+    const attachment = message?.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 (message.poll_id) {
+    return [
+      {
+        bold: false,
+        text: '📊',
+      },
+      {
+        bold: false,
+        text: 'Poll',
+      },
+    ];
+  }
+
+  return [
+    {
+      bold: false,
+      text: message.text ?? '',
+    },
+  ];
+};
diff --git a/package/src/hooks/index.ts b/package/src/hooks/index.ts
@@ -5,3 +5,4 @@ export * from './useScreenDimensions';
 export * from './useStateStore';
 export * from './useStableCallback';
 export * from './useLoadingImage';
+export * from './useMessageReminder';
diff --git a/package/src/hooks/useMessageReminder.ts b/package/src/hooks/useMessageReminder.ts
@@ -1,7 +1,10 @@
 import { useCallback } from 'react';
 
 import type { ReminderManagerState } from 'stream-chat';
-import { useChatContext, useStateStore } from 'stream-chat-react-native';
+
+import { useStateStore } from './useStateStore';
+
+import { useChatContext } from '../contexts/chatContext/ChatContext';
 
 export const useMessageReminder = (messageId: string) => {
   const { client } = useChatContext();
