fix: unify the message preview component to channel preview and thread list item

Author: khushal87

examples/SampleApp/src/components/DraftsList.tsx

@@ -1,6 +1,11 @@
 import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { DraftsIcon } from '../icons/DraftIcon';
-import { useChatContext, useStateStore, useTheme } from 'stream-chat-react-native';
+import {
+  getChannelPreviewDisplayName,
+  useChatContext,
+  useStateStore,
+  useTheme,
+} from 'stream-chat-react-native';
 import { DraftManagerState, DraftsManager } from '../utils/DraftsManager';
 import { useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
@@ -25,10 +30,10 @@ export const DraftItem = ({ type, channel, date, content, parentId, thread }: Dr
   } = useTheme();
   const navigation = useNavigation();
   const { client } = useChatContext();
+  const channelName = channel?.name ? channel.name : 'Channel';
 
   const onNavigationHandler = async () => {
     if (channel?.type && channel.id) {
-      console.log(channel);
       const resultChannel = client.channel(channel?.type, channel?.id);
       await resultChannel?.watch();
       if (type === 'thread' && parentId) {
@@ -49,7 +54,7 @@ export const DraftItem = ({ type, channel, date, content, parentId, thread }: Dr
     >
       <View style={styles.header}>
         <Text style={styles.name}>
-          {type === 'channel' ? `# ${channel?.name}` : `Thread in # ${channel?.name}`}
+          {type === 'channel' ? `# ${channelName}` : `Thread in # ${channelName}`}
         </Text>
         <Text style={[styles.date, { color: grey }]}>{dayjs(date).fromNow()}</Text>
       </View>

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -1,17 +1,10 @@
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
-const styles = StyleSheet.create({
-  bold: { fontWeight: '600' },
-  message: {
-    flexShrink: 1,
-    fontSize: 12,
-  },
-});
+import { useTheme } from '../../contexts';
+import { MessagePreview } from '../MessagePreview/MessagePreview';
 
 export type ChannelPreviewMessageProps = {
   /**
@@ -25,28 +18,19 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
 
   const {
     theme: {
-      channelPreview: { message },
-      colors: { accent_blue, grey },
+      channelPreview: {
+        message: { container },
+      },
     },
   } = useTheme();
 
   return (
-    <Text numberOfLines={1} style={[styles.message, { color: grey }, message]}>
-      {latestMessagePreview?.previews?.map(
-        (preview, index) =>
-          preview.text && (
-            <Text
-              key={`${preview.text}_${index}`}
-              style={[
-                { color: preview?.draft ? accent_blue : grey },
-                preview.bold ? styles.bold : {},
-                message,
-              ]}
-            >
-              {preview.text}
-            </Text>
-          ),
-      )}
-    </Text>
+    <View style={[styles.container, container]}>
+      <MessagePreview previews={latestMessagePreview.previews} />
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {},
+});

package/src/components/MessagePreview/MessagePreview.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts';
+
+export type MessagePreviewSkeletonProps = {
+  /**
+   * Whether the message text should be bold.
+   */
+  bold: boolean;
+  /**
+   * The text of the message preview.
+   */
+  text: string;
+  /**
+   * Whether the message is a draft.
+   */
+  draft?: boolean;
+};
+
+export type MessagePreviewProps = {
+  previews: MessagePreviewSkeletonProps[];
+};
+
+export const MessagePreview = ({ previews }: MessagePreviewProps) => {
+  const {
+    theme: {
+      messagePreview: { message },
+      colors: { accent_blue, grey },
+    },
+  } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      {previews?.map((preview, index) =>
+        preview.text ? (
+          <Text
+            key={`${preview.text}_${index}`}
+            numberOfLines={1}
+            style={[
+              styles.message,
+              {
+                color: preview?.draft ? accent_blue : grey,
+              },
+              preview.bold ? styles.bold : {},
+              message,
+            ]}
+          >
+            {preview.text}
+          </Text>
+        ) : null,
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bold: { fontWeight: '500' },
+  container: {
+    flexDirection: 'row',
+    flexShrink: 1,
+  },
+  message: {
+    flexShrink: 1,
+    marginRight: 2,
+  },
+});