stream-chat-react-native-core 8.12.1 → 8.12.2

package/src/components/MessageList/__tests__/useMessageDateSeparator.test.ts

@@ -2,15 +2,12 @@ import { renderHook } from '@testing-library/react-native';
 
 import { LocalMessage } from 'stream-chat';
 
-import { MessagePreviousAndNextMessageStore } from '../../../state-store/message-list-prev-next-state';
 import { useMessageDateSeparator } from '../hooks/useMessageDateSeparator';
 
 describe('useMessageDateSeparator', () => {
-  let messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
   let messages: LocalMessage[];
 
   beforeEach(() => {
-    messageListPreviousAndNextMessageStore = new MessagePreviousAndNextMessageStore();
     messages = [
       {
         created_at: new Date('2020-01-01T00:00:00.000Z'),
@@ -28,13 +25,10 @@ describe('useMessageDateSeparator', () => {
         text: 'Hello World',
       },
     ] as LocalMessage[];
-    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({ messages });
   });
 
   it('should return undefined if no message is passed', () => {
-    const { result } = renderHook(() =>
-      useMessageDateSeparator({ message: undefined, messageListPreviousAndNextMessageStore }),
-    );
+    const { result } = renderHook(() => useMessageDateSeparator({ message: undefined }));
     expect(result.current).toBeUndefined();
   });
 
@@ -43,7 +37,7 @@ describe('useMessageDateSeparator', () => {
       useMessageDateSeparator({
         hideDateSeparators: true,
         message: messages[1],
-        messageListPreviousAndNextMessageStore,
+        previousMessage: messages[0],
       }),
     );
     expect(result.current).toBeUndefined();
@@ -51,7 +45,7 @@ describe('useMessageDateSeparator', () => {
 
   it('should return the date separator for a message if previous message is not the same day', () => {
     const { result } = renderHook(() =>
-      useMessageDateSeparator({ message: messages[1], messageListPreviousAndNextMessageStore }),
+      useMessageDateSeparator({ message: messages[1], previousMessage: messages[0] }),
     );
     expect(result.current).toBe(messages[1].created_at);
   });
@@ -69,14 +63,12 @@ describe('useMessageDateSeparator', () => {
         text: 'World',
       },
     ] as LocalMessage[];
-    const messageListPreviousAndNextMessageStore = new MessagePreviousAndNextMessageStore();
-    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({ messages });
     const { result: resultOfFirstMessage } = renderHook(() =>
-      useMessageDateSeparator({ message: messages[0], messageListPreviousAndNextMessageStore }),
+      useMessageDateSeparator({ message: messages[0], previousMessage: undefined }),
     );
     expect(resultOfFirstMessage.current).toBe(messages[0].created_at);
     const { result: resultOfSecondMessage } = renderHook(() =>
-      useMessageDateSeparator({ message: messages[1], messageListPreviousAndNextMessageStore }),
+      useMessageDateSeparator({ message: messages[1], previousMessage: messages[0] }),
     );
     expect(resultOfSecondMessage.current).toBeUndefined();
   });

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

@@ -1,13 +1,7 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { LocalMessage } from 'stream-chat';
 
-import { useStateStore } from '../../../hooks/useStateStore';
-import {
-  MessagePreviousAndNextMessageStore,
-  MessagePreviousAndNextMessageStoreType,
-} from '../../../state-store/message-list-prev-next-state';
-
 export const getDateSeparatorValue = ({
   hideDateSeparators,
   message,
@@ -37,20 +31,12 @@ export const getDateSeparatorValue = ({
 export const useMessageDateSeparator = ({
   hideDateSeparators,
   message,
-  messageListPreviousAndNextMessageStore,
+  previousMessage,
 }: {
   hideDateSeparators?: boolean;
   message?: LocalMessage;
-  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+  previousMessage?: LocalMessage;
 }) => {
-  const selector = useCallback(
-    (state: MessagePreviousAndNextMessageStoreType) => ({
-      previousMessage: message ? state.messageList[message.id]?.previousMessage : undefined,
-    }),
-    [message],
-  );
-  const { previousMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
-
   const dateSeparatorDate = useMemo(() => {
     if (!message && !previousMessage) {
       return undefined;

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

@@ -1,15 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { LocalMessage } from 'stream-chat';
 
 import { useMessageDateSeparator } from './useMessageDateSeparator';
 
 import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import { useStateStore } from '../../../hooks/useStateStore';
-import {
-  MessagePreviousAndNextMessageStore,
-  MessagePreviousAndNextMessageStoreType,
-} from '../../../state-store/message-list-prev-next-state';
 import { getGroupStyle } from '../utils/getGroupStyles';
 
 /**
@@ -20,7 +15,8 @@ export const useMessageGroupStyles = ({
   dateSeparatorDate,
   maxTimeBetweenGroupedMessages,
   message,
-  messageListPreviousAndNextMessageStore,
+  previousMessage,
+  nextMessage,
   getMessageGroupStyle = getGroupStyle,
 }: {
   noGroupByUser?: boolean;
@@ -28,24 +24,13 @@ export const useMessageGroupStyles = ({
   dateSeparatorDate?: Date;
   maxTimeBetweenGroupedMessages?: number;
   message: LocalMessage;
-  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+  previousMessage?: LocalMessage;
+  nextMessage?: LocalMessage;
 }) => {
-  const selector = useCallback(
-    (state: MessagePreviousAndNextMessageStoreType) => ({
-      nextMessage: state.messageList[message.id]?.nextMessage,
-      previousMessage: state.messageList[message.id]?.previousMessage,
-    }),
-    [message.id],
-  );
-  const { previousMessage, nextMessage } = useStateStore(
-    messageListPreviousAndNextMessageStore.state,
-    selector,
-  );
-
   // This is needed to calculate the group styles for the next message
   const nextMessageDateSeparatorDate = useMessageDateSeparator({
     message: nextMessage,
-    messageListPreviousAndNextMessageStore,
+    previousMessage: message,
   });
 
   const groupStyles = useMemo(() => {

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
@@ -12,7 +12,6 @@ import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessa
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
 import { useRAFCoalescedValue } from '../../../hooks';
-import { MessagePreviousAndNextMessageStore } from '../../../state-store/message-list-prev-next-state';
 import { DateSeparators, getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
 
@@ -70,9 +69,6 @@ export const useMessageList = (params: UseMessageListParams) => {
   const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
-  const [messageListPreviousAndNextMessageStore] = useState(
-    () => new MessagePreviousAndNextMessageStore(),
-  );
 
   const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
@@ -94,13 +90,6 @@ export const useMessageList = (params: UseMessageListParams) => {
     return newMessageList;
   }, [messageList, deletedMessagesVisibilityType, client.userID, isFlashList]);
 
-  useEffect(() => {
-    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({
-      isFlashList,
-      messages: processedMessageList,
-    });
-  }, [processedMessageList, messageListPreviousAndNextMessageStore, isFlashList]);
-
   /**
    * @deprecated use `useDateSeparator` hook instead directly in the Message.
    */
@@ -156,13 +145,12 @@ export const useMessageList = (params: UseMessageListParams) => {
       dateSeparatorsRef,
       /** Message group styles */
       messageGroupStylesRef,
-      messageListPreviousAndNextMessageStore,
       /** Messages enriched with dates/readby/groups and also reversed in order */
       processedMessageList: data,
       /** Raw messages from the channel state */
       rawMessageList: messageList,
       viewabilityChangedCallback,
     }),
-    [data, messageList, messageListPreviousAndNextMessageStore, viewabilityChangedCallback],
+    [data, messageList, viewabilityChangedCallback],
   );
 };

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

@@ -10,8 +10,8 @@ import type { GroupType } from '../hooks/useMessageList';
 
 export type MessageGroupStylesParams = {
   message: LocalMessage;
-  previousMessage: LocalMessage;
-  nextMessage: LocalMessage;
+  previousMessage?: LocalMessage;
+  nextMessage?: LocalMessage;
   maxTimeBetweenGroupedMessages?: number;
   dateSeparatorDate?: Date;
   nextMessageDateSeparatorDate?: Date;

package/src/components/Thread/Thread.tsx

@@ -68,6 +68,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
      * Call custom function on closing thread if handling thread state elsewhere
      */
     onThreadDismount?: () => void;
+    shouldUseFlashList?: boolean;
   };
 
 const ThreadWithContext = (props: ThreadPropsWithContext) => {
@@ -86,6 +87,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     parentMessagePreventPress = true,
     thread,
     threadInstance,
+    shouldUseFlashList = false,
   } = props;
 
   useEffect(() => {
@@ -125,7 +127,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
 
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      {FlashList ? (
+      {FlashList && shouldUseFlashList ? (
         <MessageFlashList
           HeaderComponent={MemoizedThreadFooterComponent}
           threadList

package/src/contexts/messageListItemContext/MessageListItemContext.tsx

@@ -1,7 +1,6 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
 
 import { MessageListProps } from '../../components/MessageList/MessageList';
-import { MessagePreviousAndNextMessageStore } from '../../state-store/message-list-prev-next-state';
 
 import { Theme } from '../themeContext/utils/theme';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -15,10 +14,6 @@ export type MessageListItemContextValue = {
    * @returns void
    */
   goToMessage: (messageId: string) => void;
-  /**
-   * Store to get the previous and next message in the message list
-   */
-  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
   /**
    * Theme to use for the message list item
    */

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.12.1"
+  "version": "8.12.2"
 }