stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
+import type { ThreadState } from 'stream-chat';
+
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -12,6 +14,7 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../../hooks';
 import { useViewport } from '../../../hooks/useViewport';
 
 const styles = StyleSheet.create({
@@ -39,7 +42,7 @@ const styles = StyleSheet.create({
 });
 
 type ThreadFooterComponentPropsWithContext = Pick<MessagesContextValue, 'Message'> &
-  Pick<ThreadContextValue, 'parentMessagePreventPress' | 'thread'>;
+  Pick<ThreadContextValue, 'parentMessagePreventPress' | 'thread' | 'threadInstance'>;
 
 export const InlineLoadingMoreThreadIndicator = () => {
   const { threadLoadingMore } = useThreadContext();
@@ -60,8 +63,13 @@ export const InlineLoadingMoreThreadIndicator = () => {
   );
 };
 
+const selector = (nextValue: ThreadState) =>
+  ({
+    replyCount: nextValue.replyCount,
+  }) as const;
+
 const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithContext) => {
-  const { Message, parentMessagePreventPress, thread } = props;
+  const { Message, parentMessagePreventPress, thread, threadInstance } = props;
   const { t } = useTranslationContext();
   const { vw } = useViewport();
 
@@ -80,12 +88,12 @@ const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithC
     },
   } = useTheme();
 
+  const { replyCount = thread?.reply_count } = useStateStore(threadInstance?.state, selector) ?? {};
+
   if (!thread) {
     return null;
   }
 
-  const replyCount = thread.reply_count;
-
   return (
     <View style={styles.threadHeaderContainer} testID='thread-footer-component'>
       <View style={styles.messagePadding}>
@@ -93,6 +101,7 @@ const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithC
           groupStyles={['single']}
           message={thread}
           preventPress={parentMessagePreventPress}
+          readBy={0}
           threadList
         />
       </View>
@@ -138,10 +147,16 @@ const areEqual = (
   prevProps: ThreadFooterComponentPropsWithContext,
   nextProps: ThreadFooterComponentPropsWithContext,
 ) => {
-  const { parentMessagePreventPress: prevParentMessagePreventPress, thread: prevThread } =
-    prevProps;
-  const { parentMessagePreventPress: nextParentMessagePreventPress, thread: nextThread } =
-    nextProps;
+  const {
+    parentMessagePreventPress: prevParentMessagePreventPress,
+    thread: prevThread,
+    threadInstance: prevThreadInstance,
+  } = prevProps;
+  const {
+    parentMessagePreventPress: nextParentMessagePreventPress,
+    thread: nextThread,
+    threadInstance: nextThreadInstance,
+  } = nextProps;
 
   if (prevParentMessagePreventPress !== nextParentMessagePreventPress) {
     return false;
@@ -151,10 +166,15 @@ const areEqual = (
     prevThread?.id === nextThread?.id &&
     prevThread?.text === nextThread?.text &&
     prevThread?.reply_count === nextThread?.reply_count;
+
   if (!threadEqual) {
     return false;
   }
 
+  if (prevThreadInstance !== nextThreadInstance) {
+    return false;
+  }
+
   const latestReactionsEqual =
     prevThread &&
     nextThread &&
@@ -182,7 +202,8 @@ export type ThreadFooterComponentProps = Partial<Pick<MessagesContextValue, 'Mes
 
 export const ThreadFooterComponent = (props: ThreadFooterComponentProps) => {
   const { Message } = useMessagesContext();
-  const { parentMessagePreventPress, thread, threadLoadingMore } = useThreadContext();
+  const { parentMessagePreventPress, thread, threadInstance, threadLoadingMore } =
+    useThreadContext();
 
   return (
     <MemoizedThreadFooter
@@ -190,6 +211,7 @@ export const ThreadFooterComponent = (props: ThreadFooterComponentProps) => {
         Message,
         parentMessagePreventPress,
         thread,
+        threadInstance,
         threadLoadingMore,
       }}
       {...props}

package/src/components/ThreadList/ThreadListItem.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { Thread, ThreadState } from 'stream-chat';
+import { LocalMessage, Thread, ThreadState } from 'stream-chat';
 
 import {
   TranslationContextValue,
@@ -19,7 +19,6 @@ 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;
@@ -76,7 +75,7 @@ const getTitleFromMessage = ({
 }: {
   t: TranslationContextValue['t'];
   currentUserId?: string;
-  message?: MessageType | undefined;
+  message?: LocalMessage;
 }) => {
   const attachment = message?.attachments?.at(0);
 
@@ -132,7 +131,10 @@ export const ThreadListItemComponent = () => {
     <TouchableOpacity
       onPress={() => {
         if (onThreadSelect) {
-          onThreadSelect({ thread: parentMessage as MessageType, threadInstance: thread }, channel);
+          onThreadSelect(
+            { thread: parentMessage as LocalMessage, threadInstance: thread },
+            channel,
+          );
         }
       }}
       style={[styles.touchableWrapper, threadListItem.touchableWrapper]}

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo } from 'react';
 import {
   Animated,
   Keyboard,
@@ -50,13 +50,17 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     },
   } = useTheme();
 
-  const translateY = new Animated.Value(height);
+  const translateY = useMemo(() => new Animated.Value(height), [height]);
 
-  const openAnimation = Animated.timing(translateY, {
-    duration: 200,
-    toValue: 0,
-    useNativeDriver: true,
-  });
+  const openAnimation = useMemo(
+    () =>
+      Animated.timing(translateY, {
+        duration: 200,
+        toValue: 0,
+        useNativeDriver: true,
+      }),
+    [translateY],
+  );
 
   const closeAnimation = Animated.timing(translateY, {
     duration: 50,

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
 export * from './Attachment/VideoThumbnail';
+export * from './Attachment/ImageReloadIndicator';
 export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
@@ -148,7 +149,7 @@ export * from './MessageList/TypingIndicatorContainer';
 export * from './MessageList/utils/getDateSeparators';
 export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
-export * from './MessageList/utils/getReadStates';
+export * from './MessageList/utils/getReadState';
 
 export * from './MessageMenu/MessageActionList';
 export * from './MessageMenu/MessageActionListItem';

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -2,7 +2,8 @@ import React, { PropsWithChildren, useContext, useEffect, useState } from 'react
 
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 
-import type { Asset, File } from '../../types/types';
+import type { File } from '../../types/types';
+
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -82,11 +83,11 @@ export type AttachmentPickerContextValue = {
   maxNumberOfFiles: number;
   openPicker: () => void;
   selectedFiles: File[];
-  selectedImages: Asset[];
+  selectedImages: File[];
   setBottomInset: React.Dispatch<React.SetStateAction<number>>;
   setMaxNumberOfFiles: React.Dispatch<React.SetStateAction<number>>;
   setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
+  setSelectedImages: React.Dispatch<React.SetStateAction<File[]>>;
   setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
   setTopInset: React.Dispatch<React.SetStateAction<number>>;
   topInset: number;
@@ -124,7 +125,7 @@ export const AttachmentPickerProvider = ({
 
   const [bottomInset, setBottomInset] = useState<number>(bottomInsetValue ?? 0);
   const [maxNumberOfFiles, setMaxNumberOfFiles] = useState(10);
-  const [selectedImages, setSelectedImages] = useState<Asset[]>([]);
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [selectedPicker, setSelectedPicker] = useState<'images'>();
   const [topInset, setTopInset] = useState<number>(topInsetValue ?? 0);

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -45,7 +45,7 @@ export function useChannelState(
   const cid = channel?.id || 'id'; // in case channel is not initialized, use generic id string for indexing
   const { setState, state } = useChannelsStateContext();
 
-  const [threadMessages, setThreadMessages] = useStateManager(
+  const [threadMessages, setThreadMessagesInternal] = useStateManager(
     {
       cid,
       key: 'threadMessages',
@@ -54,6 +54,10 @@ export function useChannelState(
     },
     (threadId && channel?.state?.threads?.[threadId]) || [],
   );
+  const setThreadMessages = useCallback(
+    (value: ChannelState['threadMessages']) => setThreadMessagesInternal([...value]),
+    [setThreadMessagesInternal],
+  );
 
   return {
     setThreadMessages,

package/src/contexts/debugContext/DebugContext.tsx

@@ -1,8 +1,6 @@
 import React, { PropsWithChildren, useContext, useRef } from 'react';
 
-import type { Channel, ChannelState, StreamChat } from 'stream-chat';
-
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { Channel, ChannelState, LocalMessage, StreamChat } from 'stream-chat';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -12,7 +10,7 @@ export type DebugDataType =
       data: Channel['data'];
       members: ChannelState['members'];
     }[]
-  | MessageType[];
+  | LocalMessage[];
 
 export type DebugContextValue = {
   eventType?: string;

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
 
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { LocalMessage } from 'stream-chat';
+
 import type { UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -12,8 +13,8 @@ type SelectedMessage = {
 };
 
 export type ImageGalleryContextValue = {
-  messages: MessageType[];
-  setMessages: React.Dispatch<React.SetStateAction<MessageType[]>>;
+  messages: LocalMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<LocalMessage[]>>;
   setSelectedMessage: React.Dispatch<React.SetStateAction<SelectedMessage | undefined>>;
   selectedMessage?: SelectedMessage;
 };
@@ -23,7 +24,7 @@ export const ImageGalleryContext = React.createContext(
 );
 
 export const ImageGalleryProvider = ({ children }: PropsWithChildren<UnknownType>) => {
-  const [messages, setMessages] = useState<MessageType[]>([]);
+  const [messages, setMessages] = useState<LocalMessage[]>([]);
   const [selectedMessage, setSelectedMessage] = useState<SelectedMessage>();
 
   return (

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, LocalMessage } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
 import { ReactionSummary } from '../../components/Message/hooks/useProcessReactions';
@@ -8,7 +8,7 @@ import type {
   MessagePressableHandlerPayload,
   PressableHandlerPayload,
 } from '../../components/Message/Message';
-import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { GroupType } from '../../components/MessageList/hooks/useMessageList';
 import type { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import type { MessageContentType } from '../../contexts/messagesContext/MessagesContext';
 import type { DeepPartial } from '../../contexts/themeContext/ThemeContext';
@@ -48,13 +48,13 @@ export type MessageContextValue = {
   /**
    * A factory function that determines whether a message is AI generated or not.
    */
-  isMessageAIGenerated: (message: MessageType) => boolean;
+  isMessageAIGenerated: (message: LocalMessage) => boolean;
   /** Whether or not this is the active user's message */
   isMyMessage: boolean;
   /** Whether or not this is the last message in a group of messages */
   lastGroupMessage: boolean;
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
-  message: MessageType;
+  message: LocalMessage;
   /** Order to render the message content */
   messageContentOrder: MessageContentType[];
   /**
@@ -87,6 +87,8 @@ export type MessageContextValue = {
   /** The images attached to a message */
   otherAttachments: Attachment[];
   reactions: ReactionSummary[];
+  /** Whether or not the message has been read by the current user */
+  readBy: number | boolean;
   /** React set state function to set the state of `isEditedMessageOpen` */
   setIsEditedMessageOpen: React.Dispatch<React.SetStateAction<boolean>>;
   /**