feat!: remove deprecated APIs and props from useMessageList and channel unread state (#3318)

Removed deprecated stuff from the message list improvement PR

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -329,7 +329,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'FlatList'
       | 'forceAlignMessages'
       | 'Gallery'
-      | 'getMessagesGroupStyles'
       | 'getMessageGroupStyle'
       | 'Giphy'
       | 'giphyVersion'
@@ -626,7 +625,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FlatList = NativeHandlers.FlatList,
     forceAlignMessages,
     Gallery = GalleryDefault,
-    getMessagesGroupStyles,
     getMessageGroupStyle,
     Giphy = GiphyDefault,
     giphyVersion = 'fixed_height',
@@ -785,6 +783,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
   const [channelUnreadStateStore] = useState(new ChannelUnreadStateStore());
+  // TODO: Think if we can remove this and just rely on the channelUnreadStateStore everywhere.
   const setChannelUnreadState = useCallback(
     (data: ChannelUnreadStateStoreType['channelUnreadState']) => {
       channelUnreadStateStore.channelUnreadState = data;
@@ -1780,7 +1779,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const channelContext = useCreateChannelContext({
     channel,
-    channelUnreadState: channelUnreadStateStore.channelUnreadState,
     channelUnreadStateStore,
     disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
@@ -1930,7 +1928,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     forceAlignMessages,
     Gallery,
     getMessageGroupStyle,
-    getMessagesGroupStyles,
     Giphy,
     giphyVersion,
     handleBan,

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -4,7 +4,6 @@ import type { ChannelContextValue } from '../../../contexts/channelContext/Chann
 
 export const useCreateChannelContext = ({
   channel,
-  channelUnreadState,
   channelUnreadStateStore,
   disabled,
   EmptyStateIndicator,
@@ -51,7 +50,6 @@ export const useCreateChannelContext = ({
   const channelContext: ChannelContextValue = useMemo(
     () => ({
       channel,
-      channelUnreadState,
       channelUnreadStateStore,
       disabled,
       EmptyStateIndicator,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -28,7 +28,6 @@ export const useCreateMessagesContext = ({
   forceAlignMessages,
   Gallery,
   getMessageGroupStyle,
-  getMessagesGroupStyles,
   Giphy,
   giphyVersion,
   handleBan,
@@ -148,7 +147,6 @@ export const useCreateMessagesContext = ({
       forceAlignMessages,
       Gallery,
       getMessageGroupStyle,
-      getMessagesGroupStyles,
       Giphy,
       giphyVersion,
       handleBan,

package/src/components/MessageList/MessageFlashList.tsx

@@ -104,7 +104,6 @@ type MessageFlashListPropsWithContext = Pick<
   Pick<
     ChannelContextValue,
     | 'channel'
-    | 'channelUnreadState'
     | 'channelUnreadStateStore'
     | 'disabled'
     | 'EmptyStateIndicator'
@@ -358,7 +357,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   } = useMessageList({
     isFlashList: true,
     isLiveStreaming,
-    noGroupByUser,
     threadList,
   });
 
@@ -1129,7 +1127,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
   const {
     channel,
-    channelUnreadState,
     channelUnreadStateStore,
     disabled,
     EmptyStateIndicator,
@@ -1178,7 +1175,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     <MessageFlashListWithContext
       {...{
         channel,
-        channelUnreadState,
         channelUnreadStateStore,
         client,
         closePicker,

package/src/components/MessageList/MessageList.tsx

@@ -127,7 +127,6 @@ type MessageListPropsWithContext = Pick<
   Pick<
     ChannelContextValue,
     | 'channel'
-    | 'channelUnreadState'
     | 'channelUnreadStateStore'
     | 'disabled'
     | 'EmptyStateIndicator'
@@ -327,7 +326,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     viewabilityChangedCallback,
   } = useMessageList({
     isLiveStreaming,
-    noGroupByUser,
     threadList,
   });
   const messageListLengthBeforeUpdate = useRef(0);
@@ -1214,7 +1212,6 @@ export const MessageList = (props: MessageListProps) => {
   const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
   const {
     channel,
-    channelUnreadState,
     channelUnreadStateStore,
     disabled,
     EmptyStateIndicator,
@@ -1263,7 +1260,6 @@ export const MessageList = (props: MessageListProps) => {
     <MessageListWithContext
       {...{
         channel,
-        channelUnreadState,
         channelUnreadStateStore,
         client,
         closePicker,

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

@@ -1,8 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
-import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   DeletedMessagesVisibilityType,
@@ -13,15 +12,8 @@ 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';
 
 export type UseMessageListParams = {
-  deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
-  /**
-   * @deprecated
-   */
-  noGroupByUser?: boolean;
   threadList?: boolean;
   isLiveStreaming?: boolean;
   isFlashList?: boolean;
@@ -62,11 +54,9 @@ export const shouldIncludeMessageInList = (
 };
 
 export const useMessageList = (params: UseMessageListParams) => {
-  const { noGroupByUser, threadList, isLiveStreaming, isFlashList = false } = params;
+  const { threadList, isLiveStreaming, isFlashList = false } = params;
   const { client } = useChatContext();
-  const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
-  const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
-    useMessagesContext();
+  const { deletedMessagesVisibilityType } = useMessagesContext();
   const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
@@ -101,61 +91,10 @@ export const useMessageList = (params: UseMessageListParams) => {
     });
   }, [processedMessageList, messageListPreviousAndNextMessageStore, isFlashList]);
 
-  /**
-   * @deprecated use `useDateSeparator` hook instead directly in the Message.
-   */
-  const dateSeparators = useMemo(
-    () =>
-      getDateSeparators({
-        hideDateSeparators,
-        messages: processedMessageList,
-      }),
-    [hideDateSeparators, processedMessageList],
-  );
-
-  /**
-   * @deprecated use `useDateSeparator` hook instead directly in the Message.
-   */
-  const dateSeparatorsRef = useRef<DateSeparators>(dateSeparators);
-  dateSeparatorsRef.current = dateSeparators;
-
-  /**
-   * @deprecated use `useMessageGroupStyles` hook instead directly in the Message.
-   */
-  const messageGroupStyles = useMemo(
-    () =>
-      getMessagesGroupStyles({
-        dateSeparators: dateSeparatorsRef.current,
-        hideDateSeparators,
-        maxTimeBetweenGroupedMessages,
-        messages: processedMessageList,
-        noGroupByUser,
-        userId: client.userID,
-      }),
-    [
-      getMessagesGroupStyles,
-      hideDateSeparators,
-      maxTimeBetweenGroupedMessages,
-      processedMessageList,
-      noGroupByUser,
-      client.userID,
-    ],
-  );
-
-  /**
-   * @deprecated use `useMessageGroupStyles` hook instead directly in the Message.
-   */
-  const messageGroupStylesRef = useRef<MessageGroupStyles>(messageGroupStyles);
-  messageGroupStylesRef.current = messageGroupStyles;
-
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 
   return useMemo(
     () => ({
-      /** Date separators */
-      dateSeparatorsRef,
-      /** Message group styles */
-      messageGroupStylesRef,
       messageListPreviousAndNextMessageStore,
       /** Messages enriched with dates/readby/groups and also reversed in order */
       processedMessageList: data,

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

@@ -1,12 +1,6 @@
 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 } from '../hooks/useMessageList';
 
 export type MessageGroupStylesParams = {
   message: LocalMessage;
@@ -17,24 +11,6 @@ export type MessageGroupStylesParams = {
   nextMessageDateSeparatorDate?: Date;
 };
 
-/**
- * @deprecated in favor of `useMessageGroupStyles` hook instead directly in the Message.
- */
-export type GetGroupStylesParams = {
-  dateSeparators: DateSeparators;
-  messages: PaginatedMessageListContextValue['messages'] | ThreadContextValue['threadMessages'];
-  /**
-   * @deprecated in favor of `useDateSeparator` hook instead directly in the Message.
-   */
-  hideDateSeparators?: boolean;
-  maxTimeBetweenGroupedMessages?: number;
-  noGroupByUser?: boolean;
-  /**
-   * @deprecated
-   */
-  userId?: string;
-};
-
 export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
 /**
@@ -118,34 +94,3 @@ export const getGroupStyle = ({
 
   return groupStyles;
 };
-
-/**
- * @deprecated in favor of `useMessageGroupStyles` hook instead directly in the Message.
- */
-export const getGroupStyles = (params: GetGroupStylesParams) => {
-  const { dateSeparators, maxTimeBetweenGroupedMessages, messages, noGroupByUser } = params;
-
-  if (noGroupByUser) {
-    return {};
-  }
-
-  const messageGroupStyles: { [key: string]: GroupType[] } = {};
-
-  for (let i = 0; i < messages.length; i++) {
-    const previousMessage = messages[i - 1];
-    const message = messages[i];
-    const nextMessage = messages[i + 1];
-
-    if (message.id) {
-      messageGroupStyles[message.id] = getGroupStyle({
-        dateSeparatorDate: dateSeparators[message.id],
-        maxTimeBetweenGroupedMessages,
-        message,
-        nextMessage,
-        previousMessage,
-      });
-    }
-  }
-
-  return messageGroupStyles;
-};

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

@@ -158,7 +158,6 @@ export * from './MessageList/NetworkDownIndicator';
 export * from './MessageList/ScrollToBottomButton';
 export * from './MessageList/TypingIndicator';
 export * from './MessageList/TypingIndicatorContainer';
-export * from './MessageList/utils/getDateSeparators';
 export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
 export * from './Message/hooks/useMessageDeliveryData';

package/src/components/index.ts

@@ -10,7 +10,6 @@ import {
   ChannelUnreadStateStore,
   ChannelUnreadStateStoreType,
 } from '../../state-store/channel-unread-state';
-import { ChannelUnreadState } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -135,11 +134,6 @@ export type ChannelContextValue = {
    * Its a map of filename and AbortController
    */
   uploadAbortControllerRef: React.MutableRefObject<Map<string, AbortController>>;
-  /**
-   * Channel unread data
-   * @deprecated Use channelUnreadStateStore instead
-   */
-  channelUnreadState?: ChannelUnreadState;
   channelUnreadStateStore: ChannelUnreadStateStore;
   disabled?: boolean;
   enableMessageGroupingByUser?: boolean;