stream-chat-react-native-core 5.38.1 → 5.39.0-beta.2

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -54,6 +54,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
               "dateSeparator": undefined,
+              "deleted_at": null,
               "groupStyles": [
                 "single",
               ],
@@ -62,6 +63,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
               "pinned_at": null,
+              "reaction_groups": null,
               "readBy": false,
               "status": "received",
               "text": "Message6",
@@ -83,6 +85,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
               "dateSeparator": undefined,
+              "deleted_at": null,
               "groupStyles": [
                 "single",
               ],
@@ -91,6 +94,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
               "pinned_at": null,
+              "reaction_groups": null,
               "readBy": false,
               "status": "received",
               "text": "Message5",
@@ -112,6 +116,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
               "dateSeparator": 2020-05-05T14:50:00.000Z,
+              "deleted_at": null,
               "groupStyles": [
                 "single",
               ],
@@ -120,6 +125,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
               "pinned_at": null,
+              "reaction_groups": null,
               "readBy": false,
               "status": "received",
               "text": "Message4",

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import {
@@ -17,6 +17,10 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
+  activityIndicatorContainer: {
+    padding: 10,
+    width: '100%',
+  },
   messagePadding: {
     paddingHorizontal: 8,
   },
@@ -40,6 +44,25 @@ type ThreadFooterComponentPropsWithContext<
 > = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'parentMessagePreventPress' | 'thread'>;
 
+export const InlineLoadingMoreThreadIndicator = () => {
+  const { threadLoadingMore } = useThreadContext();
+  const {
+    theme: {
+      colors: { accent_blue },
+    },
+  } = useTheme();
+
+  if (!threadLoadingMore) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
+
 const ThreadFooterComponentWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -111,6 +134,7 @@ const ThreadFooterComponentWithContext = <
               })}
         </Text>
       </View>
+      <InlineLoadingMoreThreadIndicator />
     </View>
   );
 };
@@ -163,7 +187,8 @@ export const ThreadFooterComponent = <
   props: ThreadFooterComponentProps<StreamChatGenerics>,
 ) => {
   const { Message } = useMessagesContext<StreamChatGenerics>();
-  const { parentMessagePreventPress, thread } = useThreadContext<StreamChatGenerics>();
+  const { parentMessagePreventPress, thread, threadLoadingMore } =
+    useThreadContext<StreamChatGenerics>();
 
   return (
     <MemoizedThreadFooter
@@ -171,6 +196,7 @@ export const ThreadFooterComponent = <
         Message,
         parentMessagePreventPress,
         thread,
+        threadLoadingMore,
       }}
       {...props}
     />

package/src/components/ThreadList/ThreadList.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect } from 'react';
+import { FlatList, View } from 'react-native';
+
+import { Thread, ThreadManagerState } from 'stream-chat';
+
+import { ThreadListItem } from './ThreadListItem';
+import { ThreadListUnreadBanner as DefaultThreadListBanner } from './ThreadListUnreadBanner';
+
+import { useChatContext } from '../../contexts';
+import {
+  ThreadsContextValue,
+  ThreadsProvider,
+  useThreadsContext,
+} from '../../contexts/threadsContext/ThreadsContext';
+import { useStateStore } from '../../hooks';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { EmptyStateIndicator } from '../Indicators/EmptyStateIndicator';
+import { LoadingIndicator } from '../Indicators/LoadingIndicator';
+
+const selector = (nextValue: ThreadManagerState) =>
+  [nextValue.threads, nextValue.pagination.isLoading, nextValue.pagination.isLoadingNext] as const;
+
+export type ThreadListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  ThreadsContextValue<StreamChatGenerics>,
+  | 'additionalFlatListProps'
+  | 'isFocused'
+  | 'onThreadSelect'
+  | 'ThreadListItem'
+  | 'ThreadListEmptyPlaceholder'
+  | 'ThreadListLoadingIndicator'
+  | 'ThreadListUnreadBanner'
+> & { ThreadList?: React.ComponentType };
+
+export const DefaultThreadListEmptyPlaceholder = () => <EmptyStateIndicator listType='threads' />;
+
+export const DefaultThreadListLoadingIndicator = () => <LoadingIndicator listType='threads' />;
+export const DefaultThreadListLoadingNextIndicator = () => <LoadingIndicator />;
+
+const DefaultThreadListItem = (props: { item: Thread }) => <ThreadListItem thread={props.item} />;
+
+const ThreadListComponent = () => {
+  const {
+    additionalFlatListProps,
+    isLoading,
+    isLoadingNext,
+    loadMore,
+    ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder,
+    ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator,
+    ThreadListLoadingMoreIndicator = DefaultThreadListLoadingNextIndicator,
+    ThreadListUnreadBanner = DefaultThreadListBanner,
+    threads,
+  } = useThreadsContext();
+
+  if (isLoading) {
+    return (
+      <View style={{ flex: 1 }}>
+        <ThreadListLoadingIndicator />
+      </View>
+    );
+  }
+
+  return (
+    <>
+      <ThreadListUnreadBanner />
+      <FlatList
+        contentContainerStyle={{ flexGrow: 1 }}
+        data={threads}
+        keyExtractor={(props) => props.id}
+        ListEmptyComponent={ThreadListEmptyPlaceholder}
+        ListFooterComponent={isLoadingNext ? ThreadListLoadingMoreIndicator : null}
+        onEndReached={loadMore}
+        renderItem={DefaultThreadListItem}
+        testID='thread-flatlist'
+        {...additionalFlatListProps}
+      />
+    </>
+  );
+};
+
+export const ThreadList = (props: ThreadListProps) => {
+  const { isFocused = true, ThreadList = ThreadListComponent } = props;
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    if (!client) return;
+    if (isFocused) {
+      client.threads.activate();
+    } else {
+      client.threads.deactivate();
+    }
+  }, [client, isFocused]);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const listener = client.on('connection.recovered', () => {
+      client.threads.reload({ force: true });
+    });
+
+    client.threads.reload({ force: true });
+
+    return () => {
+      client.threads.deactivate();
+      listener.unsubscribe();
+    };
+  }, [client]);
+
+  const [threads, isLoading, isLoadingNext] = useStateStore(client.threads.state, selector);
+
+  return (
+    <ThreadsProvider
+      value={{ isLoading, isLoadingNext, loadMore: client.threads.loadNextPage, threads, ...props }}
+    >
+      <ThreadList />
+    </ThreadsProvider>
+  );
+};

package/src/components/ThreadList/ThreadListItem.tsx

@@ -0,0 +1,268 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { Thread, ThreadState } from 'stream-chat';
+
+import {
+  TranslationContextValue,
+  useChatContext,
+  useTheme,
+  useTranslationContext,
+} from '../../contexts';
+import {
+  ThreadListItemProvider,
+  useThreadListItemContext,
+} from '../../contexts/threadsContext/ThreadListItemContext';
+import { useThreadsContext } from '../../contexts/threadsContext/ThreadsContext';
+import { useStateStore } from '../../hooks';
+import { MessageBubble } from '../../icons';
+import { getDateString } from '../../utils/i18n/getDateString';
+import { Avatar } from '../Avatar/Avatar';
+import { useChannelPreviewDisplayName } from '../ChannelPreview/hooks/useChannelPreviewDisplayName';
+import { MessageType } from '../MessageList/hooks/useMessageList';
+
+export type ThreadListItemProps = {
+  thread: Thread;
+  timestampTranslationKey?: string;
+};
+
+const styles = StyleSheet.create({
+  boldText: { fontSize: 14, fontWeight: '500' },
+  contentRow: {
+    flexDirection: 'row',
+    marginTop: 6,
+  },
+  contentTextWrapper: {
+    flex: 1,
+    marginLeft: 8,
+  },
+  dateText: { alignSelf: 'flex-end' },
+  headerRow: {
+    flexDirection: 'row',
+  },
+  infoRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  lastReplyText: { flex: 1, fontSize: 14, marginTop: 4 },
+  parentMessageText: { flex: 1, fontSize: 12 },
+  touchableWrapper: {
+    flex: 1,
+    paddingHorizontal: 8,
+    paddingVertical: 14,
+  },
+  unreadBubbleWrapper: {
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    borderRadius: 50,
+    height: 22,
+    justifyContent: 'center',
+    width: 22,
+  },
+});
+
+export const attachmentTypeIconMap = {
+  audio: '🔈',
+  file: '📄',
+  image: '📷',
+  video: '🎥',
+  voiceRecording: '🎙️',
+} as const;
+
+const getTitleFromMessage = ({
+  currentUserId,
+  message,
+  t,
+}: {
+  t: TranslationContextValue['t'];
+  currentUserId?: string;
+  message?: MessageType | undefined;
+}) => {
+  const attachment = message?.attachments?.at(0);
+
+  const attachmentIcon = attachment
+    ? `${
+        attachmentTypeIconMap[(attachment.type as keyof typeof attachmentTypeIconMap) ?? 'file'] ??
+        attachmentTypeIconMap.file
+      } `
+    : '';
+
+  const messageBelongsToCurrentUserPrefix =
+    message?.user?.id === currentUserId ? `${t('You')}: ` : '';
+
+  if (message?.deleted_at && message.parent_id)
+    return `${messageBelongsToCurrentUserPrefix}${t('This reply was deleted')}.`;
+
+  if (message?.deleted_at && !message.parent_id)
+    return `${messageBelongsToCurrentUserPrefix}${t('The source message was deleted')}.`;
+
+  if (attachment?.type === 'voiceRecording')
+    return `${attachmentIcon}${messageBelongsToCurrentUserPrefix}${t('Voice message')}.`;
+
+  return `${attachmentIcon}${messageBelongsToCurrentUserPrefix}${
+    message?.text || attachment?.fallback || 'N/A'
+  }`;
+};
+
+export const ThreadListItemComponent = () => {
+  const {
+    channel,
+    dateString,
+    deletedAtDateString,
+    lastReply,
+    ownUnreadMessageCount,
+    parentMessage,
+    thread,
+  } = useThreadListItemContext();
+  const displayName = useChannelPreviewDisplayName(channel);
+  const { onThreadSelect } = useThreadsContext();
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { accent_red, text_low_emphasis, white },
+      threadListItem,
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        if (onThreadSelect) {
+          onThreadSelect({ thread: parentMessage as MessageType, threadInstance: thread }, channel);
+        }
+      }}
+      style={[styles.touchableWrapper, threadListItem.touchableWrapper]}
+      testID='thread-list-item'
+    >
+      <View style={[styles.headerRow, threadListItem.headerRow]}>
+        <MessageBubble />
+        <Text style={[styles.boldText, { color: text_low_emphasis }, threadListItem.boldText]}>
+          {displayName || 'N/A'}
+        </Text>
+      </View>
+      <View style={[styles.infoRow, threadListItem.infoRow]}>
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.parentMessageText,
+            { color: text_low_emphasis },
+            threadListItem.parentMessageText,
+          ]}
+        >
+          {t<string>('replied to')}: {getTitleFromMessage({ message: parentMessage, t })}
+        </Text>
+        {ownUnreadMessageCount > 0 && !deletedAtDateString ? (
+          <View
+            style={[
+              styles.unreadBubbleWrapper,
+              { backgroundColor: accent_red },
+              threadListItem.unreadBubbleWrapper,
+            ]}
+          >
+            <Text style={[{ color: white }, threadListItem.unreadBubbleText]}>
+              {ownUnreadMessageCount}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+      <View style={[styles.contentRow, threadListItem.contentRow]}>
+        <Avatar
+          image={lastReply?.user?.image as string}
+          online={lastReply?.user?.online}
+          size={40}
+        />
+        <View style={[styles.contentTextWrapper, threadListItem.contentTextWrapper]}>
+          <Text style={[styles.boldText, { color: text_low_emphasis }, threadListItem.boldText]}>
+            {lastReply?.user?.name}
+          </Text>
+          <View style={[styles.headerRow, threadListItem.headerRow]}>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.lastReplyText,
+                { color: text_low_emphasis },
+                threadListItem.lastReplyText,
+              ]}
+            >
+              {deletedAtDateString
+                ? 'This thread was deleted.'
+                : getTitleFromMessage({
+                    currentUserId: client.userID,
+                    message: lastReply,
+                    t,
+                  })}
+            </Text>
+            <Text style={[styles.dateText, { color: text_low_emphasis }, threadListItem.dateText]}>
+              {deletedAtDateString ?? dateString}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export const ThreadListItem = (props: ThreadListItemProps) => {
+  const { client } = useChatContext();
+  const { t, tDateTimeParser } = useTranslationContext();
+  const { thread, timestampTranslationKey = 'timestamp/ThreadListItem' } = props;
+  const { ThreadListItem = ThreadListItemComponent } = useThreadsContext();
+
+  const selector = useCallback(
+    (nextValue: ThreadState) =>
+      [
+        nextValue.replies.at(-1),
+        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+        nextValue.parentMessage,
+        nextValue.channel,
+        nextValue.deletedAt,
+      ] as const,
+    [client],
+  );
+
+  const [lastReply, ownUnreadMessageCount, parentMessage, channel, deletedAt] = useStateStore(
+    thread.state,
+    selector,
+  );
+
+  const timestamp = lastReply?.created_at;
+
+  // TODO: Please rethink this, we have the same line of code in about 5 places in the SDK.
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date: timestamp,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey,
+      }),
+    [timestamp, t, tDateTimeParser, timestampTranslationKey],
+  );
+  const deletedAtDateString = useMemo(
+    () =>
+      getDateString({
+        date: deletedAt as Date | undefined,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey,
+      }),
+    [deletedAt, t, tDateTimeParser, timestampTranslationKey],
+  );
+
+  return (
+    <ThreadListItemProvider
+      value={{
+        channel,
+        dateString,
+        deletedAtDateString,
+        lastReply,
+        ownUnreadMessageCount,
+        parentMessage,
+        thread,
+      }}
+    >
+      <ThreadListItem />
+    </ThreadListItemProvider>
+  );
+};

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+
+import { ThreadManagerState } from 'stream-chat';
+
+import { useChatContext, useTheme } from '../../contexts';
+import { useStateStore } from '../../hooks';
+import { Reload } from '../../icons';
+
+const styles = StyleSheet.create({
+  text: { alignSelf: 'flex-start', flex: 1, fontSize: 16 },
+  touchableWrapper: {
+    borderRadius: 16,
+    flexDirection: 'row',
+    marginHorizontal: 8,
+    marginVertical: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+});
+
+const selector = (nextValue: ThreadManagerState) => [nextValue.unseenThreadIds] as const;
+
+export const ThreadListUnreadBanner = () => {
+  const { client } = useChatContext();
+  const {
+    theme: {
+      colors: { text_high_emphasis, white },
+      threadListUnreadBanner,
+    },
+  } = useTheme();
+  const [unseenThreadIds] = useStateStore(client.threads.state, selector);
+  if (!unseenThreadIds.length) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => client.threads.reload()}
+      style={[
+        styles.touchableWrapper,
+        { backgroundColor: text_high_emphasis },
+        threadListUnreadBanner.touchableWrapper,
+      ]}
+    >
+      <Text style={[styles.text, { color: white }, threadListUnreadBanner.text]}>
+        {unseenThreadIds.length} unread threads
+      </Text>
+      <Reload pathFill={white} />
+    </TouchableOpacity>
+  );
+};

package/src/components/index.ts

@@ -139,7 +139,6 @@ export * from './MessageList/hooks/useTypingString';
 export * from './MessageList/InlineDateSeparator';
 export * from './MessageList/InlineLoadingMoreIndicator';
 export * from './MessageList/InlineLoadingMoreRecentIndicator';
-export * from './MessageList/InlineLoadingMoreThreadIndicator';
 export * from './MessageList/InlineUnreadIndicator';
 export * from './MessageList/MessageList';
 export * from './MessageList/MessageSystem';
@@ -169,3 +168,4 @@ export * from './Spinner/Spinner';
 
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
+export * from './ThreadList/ThreadList';

package/src/contexts/index.ts

@@ -19,6 +19,8 @@ export * from './suggestionsContext/SuggestionsContext';
 export * from './themeContext/ThemeContext';
 export * from './themeContext/utils/theme';
 export * from './threadContext/ThreadContext';
+export * from './threadsContext/ThreadsContext';
+export * from './threadsContext/ThreadListItemContext';
 export * from './translationContext/TranslationContext';
 export * from './typingContext/TypingContext';
 export * from './utils/getDisplayName';

package/src/contexts/themeContext/utils/theme.ts

@@ -27,6 +27,8 @@ export const Colors = {
   static_black: '#000000',
   static_white: '#ffffff',
   targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
+  text_high_emphasis: '#080707',
+  text_low_emphasis: '#7E828B',
   transparent: 'transparent',
   white: '#FFFFFF',
   white_smoke: '#F2F2F2',
@@ -637,6 +639,23 @@ export type Theme = {
       threadHeight?: number;
     };
   };
+  threadListItem: {
+    boldText: TextStyle;
+    contentRow: ViewStyle;
+    contentTextWrapper: ViewStyle;
+    dateText: TextStyle;
+    headerRow: ViewStyle;
+    infoRow: ViewStyle;
+    lastReplyText: TextStyle;
+    parentMessageText: TextStyle;
+    touchableWrapper: ViewStyle;
+    unreadBubbleText: TextStyle;
+    unreadBubbleWrapper: ViewStyle;
+  };
+  threadListUnreadBanner: {
+    text: TextStyle;
+    touchableWrapper: ViewStyle;
+  };
   typingIndicator: {
     container: ViewStyle;
     text: TextStyle & {
@@ -1241,6 +1260,23 @@ export const defaultTheme: Theme = {
       text: {},
     },
   },
+  threadListItem: {
+    boldText: {},
+    contentRow: {},
+    contentTextWrapper: {},
+    dateText: {},
+    headerRow: {},
+    infoRow: {},
+    lastReplyText: {},
+    parentMessageText: {},
+    touchableWrapper: {},
+    unreadBubbleText: {},
+    unreadBubbleWrapper: {},
+  },
+  threadListUnreadBanner: {
+    text: {},
+    touchableWrapper: {},
+  },
   typingIndicator: {
     container: {},
     text: {

package/src/contexts/threadContext/ThreadContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { ChannelState } from 'stream-chat';
+import { ChannelState, Thread } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
@@ -9,6 +9,10 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+export type ThreadType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = { thread: MessageType<StreamChatGenerics>; threadInstance: Thread };
+
 export type ThreadContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
@@ -20,12 +24,15 @@ export type ThreadContextValue<
   setThreadLoadingMore: React.Dispatch<React.SetStateAction<boolean>>;
   thread: MessageType<StreamChatGenerics> | null;
   threadHasMore: boolean;
-  threadLoadingMore: boolean;
   threadMessages: ChannelState<StreamChatGenerics>['threads'][string];
+  loadMoreRecentThread?: (opts: { limit?: number }) => Promise<void>;
   /**
    * Boolean to enable/disable parent message press
    */
   parentMessagePreventPress?: boolean;
+  threadInstance?: Thread | null;
+  threadLoadingMore?: boolean;
+  threadLoadingMoreRecent?: boolean;
 };
 
 export const ThreadContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ThreadContextValue);