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

package/src/components/MessageList/MessageSystem.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import type { MessageType } from './hooks/useMessageList';
+import { LocalMessage } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -10,7 +10,7 @@ import { getDateString } from '../../utils/i18n/getDateString';
 
 export type MessageSystemProps = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
-  message: MessageType;
+  message: LocalMessage;
   /**
    * Additional styles for the system message container.
    */

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,6 +1,6 @@
-import type { ChannelState, MessageResponse } from 'stream-chat';
+import { useMemo, useRef } from 'react';
 
-import { useLastReadData } from './useLastReadData';
+import type { LocalMessage } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
@@ -11,7 +11,7 @@ import {
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
-import { getDateSeparators } from '../utils/getDateSeparators';
+import { DateSeparators, getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
 
 export type UseMessageListParams = {
@@ -22,81 +22,99 @@ export type UseMessageListParams = {
 
 export type GroupType = string;
 
-export type MessagesWithStylesReadByAndDateSeparator = MessageResponse & {
-  groupStyles: GroupType[];
-  readBy: boolean | number;
-  dateSeparator?: Date;
+export type MessageGroupStyles = {
+  [key: string]: string[];
 };
 
-export type MessageType =
-  | ReturnType<ChannelState['formatMessage']>
-  | MessagesWithStylesReadByAndDateSeparator;
-
-// Type guards to check MessageType
-export const isMessageWithStylesReadByAndDateSeparator = (
-  message: MessageType,
-): message is MessagesWithStylesReadByAndDateSeparator =>
-  (message as MessagesWithStylesReadByAndDateSeparator).readBy !== undefined;
+export const shouldIncludeMessageInList = (
+  message: LocalMessage,
+  options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
+) => {
+  const { deletedMessagesVisibilityType, userId } = options;
+  const isMessageTypeDeleted = message.type === 'deleted';
+  switch (deletedMessagesVisibilityType) {
+    case 'sender':
+      return !isMessageTypeDeleted || message.user?.id === userId;
+
+    case 'receiver':
+      return !isMessageTypeDeleted || message.user?.id !== userId;
+
+    case 'never':
+      return !isMessageTypeDeleted;
+
+    default:
+      return !!message;
+  }
+};
 
 export const useMessageList = (params: UseMessageListParams) => {
   const { noGroupByUser, threadList } = params;
   const { client } = useChatContext();
-  const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } = useChannelContext();
+  const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
   const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
     useMessagesContext();
   const { messages } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
-
   const messageList = threadList ? threadMessages : messages;
-  const readList: ChannelState['read'] | undefined = threadList ? undefined : read;
-
-  const dateSeparators = getDateSeparators({
-    deletedMessagesVisibilityType,
-    hideDateSeparators,
-    messages: messageList,
-    userId: client.userID,
-  });
-
-  const messageGroupStyles = getMessagesGroupStyles({
-    dateSeparators,
-    hideDateSeparators,
-    maxTimeBetweenGroupedMessages,
-    messages: messageList,
-    noGroupByUser,
-    userId: client.userID,
-  });
-
-  const readData = useLastReadData({
-    messages: messageList,
-    read: readList,
-    userID: client.userID,
-  });
-
-  const messagesWithStylesReadByAndDateSeparator = messageList
-    .filter((msg) => {
-      const isMessageTypeDeleted = msg.type === 'deleted';
-      if (deletedMessagesVisibilityType === 'sender') {
-        return !isMessageTypeDeleted || msg.user?.id === client.userID;
-      } else if (deletedMessagesVisibilityType === 'receiver') {
-        return !isMessageTypeDeleted || msg.user?.id !== client.userID;
-      } else if (deletedMessagesVisibilityType === 'never') {
-        return !isMessageTypeDeleted;
-      } else {
-        return msg;
+
+  const dateSeparators = useMemo(
+    () =>
+      getDateSeparators({
+        deletedMessagesVisibilityType,
+        hideDateSeparators,
+        messages: messageList,
+        userId: client.userID,
+      }),
+    [deletedMessagesVisibilityType, hideDateSeparators, messageList, client.userID],
+  );
+
+  const dateSeparatorsRef = useRef<DateSeparators>(dateSeparators);
+  dateSeparatorsRef.current = dateSeparators;
+
+  const messageGroupStyles = useMemo(
+    () =>
+      getMessagesGroupStyles({
+        dateSeparators: dateSeparatorsRef.current,
+        hideDateSeparators,
+        maxTimeBetweenGroupedMessages,
+        messages: messageList,
+        noGroupByUser,
+        userId: client.userID,
+      }),
+    [
+      dateSeparatorsRef,
+      getMessagesGroupStyles,
+      hideDateSeparators,
+      maxTimeBetweenGroupedMessages,
+      messageList,
+      noGroupByUser,
+      client.userID,
+    ],
+  );
+
+  const messageGroupStylesRef = useRef<MessageGroupStyles>(messageGroupStyles);
+  messageGroupStylesRef.current = messageGroupStyles;
+
+  const processedMessageList = useMemo<LocalMessage[]>(() => {
+    const newMessageList = [];
+    for (const message of messageList) {
+      if (
+        shouldIncludeMessageInList(message, {
+          deletedMessagesVisibilityType,
+          userId: client.userID,
+        })
+      ) {
+        newMessageList.unshift(message);
       }
-    })
-    .map((msg) => ({
-      ...msg,
-      dateSeparator: dateSeparators[msg.id] || undefined,
-      groupStyles: messageGroupStyles[msg.id] || ['single'],
-      readBy: msg.id ? readData[msg.id] || false : false,
-    }));
-
-  const processedMessageList = [
-    ...messagesWithStylesReadByAndDateSeparator,
-  ].reverse() as MessageType[];
+    }
+    return newMessageList;
+  }, [client.userID, deletedMessagesVisibilityType, messageList]);
 
   return {
+    /** Date separators */
+    dateSeparatorsRef,
+    /** Message group styles */
+    messageGroupStylesRef,
     /** Messages enriched with dates/readby/groups and also reversed in order */
     processedMessageList,
     /** Raw messages from the channel state */

package/src/components/MessageList/hooks/useShouldScrollToRecentOnNewOwnMessage.ts

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
 
-import type { FormatMessageResponse } from 'stream-chat';
+import type { LocalMessage } from 'stream-chat';
 
 export function useShouldScrollToRecentOnNewOwnMessage(
-  rawMessageList: FormatMessageResponse[],
+  rawMessageList: LocalMessage[],
   currentUserId?: string,
 ) {
   const lastFocusedOwnMessageId = useRef('');

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -1,10 +1,12 @@
+import { LocalMessage } from 'stream-chat';
+
 import type { DateSeparators } from './getDateSeparators';
 
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 
 import { isEditedMessage } from '../../../utils/utils';
-import type { GroupType, MessageType } from '../hooks/useMessageList';
+import type { GroupType } from '../hooks/useMessageList';
 
 export type GetGroupStylesParams = {
   dateSeparators: DateSeparators;
@@ -19,9 +21,9 @@ export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
 const getGroupStyle = (
   dateSeparators: DateSeparators,
-  message: MessageType,
-  previousMessage: MessageType,
-  nextMessage: MessageType,
+  message: LocalMessage,
+  previousMessage: LocalMessage,
+  nextMessage: LocalMessage,
   hideDateSeparators?: boolean,
   maxTimeBetweenGroupedMessages?: number,
 ): GroupStyle[] => {
@@ -38,7 +40,7 @@ const getGroupStyle = (
     previousMessage.type === 'error' ||
     userId !== previousMessage?.user?.id ||
     !!isPrevMessageTypeDeleted ||
-    (!hideDateSeparators && dateSeparators[message.id]) ||
+    (!hideDateSeparators && dateSeparators[previousMessage.id]) ||
     isEditedMessage(previousMessage);
 
   const isBottomMessage =

package/src/components/MessageList/utils/getLastReceivedMessage.ts

@@ -1,8 +1,8 @@
-import { MessageStatusTypes } from '../../../utils/utils';
+import { LocalMessage } from 'stream-chat';
 
-import type { MessageType } from '../hooks/useMessageList';
+import { MessageStatusTypes } from '../../../utils/utils';
 
-export const getLastReceivedMessage = (messages: MessageType[]) => {
+export const getLastReceivedMessage = (messages: LocalMessage[]) => {
   /**
    * There are no status on dates so they will be skipped
    */

package/src/components/MessageList/utils/getReadState.ts

@@ -0,0 +1,27 @@
+import { ChannelState, LocalMessage } from 'stream-chat';
+
+/**
+ * Get the number of users who have read the message
+ * @param message - The message to get the read state for
+ * @param read - The read state of the channel
+ * @returns The number of users who have read the message
+ */
+export const getReadState = (message: LocalMessage, read?: ChannelState['read']) => {
+  if (!read) {
+    return 0;
+  }
+
+  const readState = Object.values(read).reduce((acc, readState) => {
+    if (!readState.last_read) {
+      return acc;
+    }
+
+    if (message.created_at && message.created_at < readState.last_read) {
+      return acc + 1;
+    }
+
+    return acc;
+  }, 0);
+
+  return readState;
+};

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { ReactionResponse } from 'stream-chat';
+import { LocalMessage, ReactionResponse } from 'stream-chat';
 
 import {
   MessagesContextValue,
@@ -17,7 +17,6 @@ import {
   TranslationProvider,
 } from '../../../contexts/translationContext/TranslationContext';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import { MessageType } from '../../MessageList/hooks/useMessageList';
 import * as useFetchReactionsModule from '../hooks/useFetchReactions';
 import { MessageUserReactions } from '../MessageUserReactions';
 import { MessageUserReactionsItemProps } from '../MessageUserReactionsItem';
@@ -35,7 +34,7 @@ const defaultProps = {
   message: {
     ...generateMessage(),
     reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } },
-  } as unknown as MessageType,
+  } as unknown as LocalMessage,
   supportedReactions: mockSupportedReactions,
 };
 

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { ReactionResponse, ReactionSort } from 'stream-chat';
+import { LocalMessage, ReactionResponse, ReactionSort } from 'stream-chat';
 
-import { MessageType } from '../../../components/MessageList/hooks/useMessageList';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { getReactionsForFilterSort } from '../../../store/apis/getReactionsforFilterSort';
 
 export type UseFetchReactionParams = {
   limit?: number;
-  message?: MessageType;
+  message?: LocalMessage;
   reactionType?: string;
   sort?: ReactionSort;
 };

package/src/components/Poll/components/Button.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
 
-import { Poll, PollOption } from 'stream-chat';
+import { LocalMessage, Poll, PollOption } from 'stream-chat';
 
 import { useTheme } from '../../../contexts';
 
-import { MessageType } from '../../MessageList/hooks/useMessageList';
-
 export type PollButtonProps = {
-  onPress?: ({ message, poll }: { message: MessageType; poll: Poll }) => void;
+  onPress?: ({ message, poll }: { message: LocalMessage; poll: Poll }) => void;
 };
 
 export type PollVoteButtonProps = {

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { Modal, SafeAreaView, StyleSheet, Text, View } from 'react-native';
 
-import { Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
+import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
 import { PollOptionFullResults } from './PollOptionFullResults';
 import { PollVote } from './PollVote';
@@ -13,7 +13,6 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
-import { MessageType } from '../../../MessageList/hooks/useMessageList';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
 import { PollModalHeader } from '../PollModalHeader';
@@ -25,7 +24,7 @@ export type ShowAllVotesButtonProps = {
     option,
     poll,
   }: {
-    message: MessageType;
+    message: LocalMessage;
     option: PollOption;
     poll: Poll;
   }) => void;

package/src/components/Reply/Reply.tsx

@@ -34,7 +34,6 @@ import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { VideoThumbnail } from '../Attachment/VideoThumbnail';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
-import { MessageType } from '../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   container: {
@@ -177,7 +176,7 @@ const ReplyWithContext = (props: ReplyPropsWithContext) => {
     },
   } = useTheme();
 
-  const poll = client.polls.fromState((quotedMessage as MessageType)?.poll_id ?? '');
+  const poll = client.polls.fromState(quotedMessage?.poll_id ?? '');
   const { name: pollName }: ReplySelectorReturnType = useStateStore(poll?.state, selector) ?? {};
 
   const messageText = quotedMessage ? quotedMessage.text : '';