feat: add customizable reaction details sorting

Author: myandrienko

docusaurus/docs/React/components/contexts/message-context.mdx

@@ -377,6 +377,14 @@ When true, show the reactions list component.
 | ------- |
 | boolean |
 
+### sortReactionDetails
+
+Comparator function to sort the list of reacted users. Should have the same signature as an array's `sort` method.
+
+| Type                                                       | Default            |
+| ---------------------------------------------------------- | ------------------ |
+| (this: ReactionResponse, that: ReactionResponse) => number | alphabetical order |
+
 ### sortReactions
 
 Comparator function to sort reactions. Should have the same signature as an array's `sort` method.

docusaurus/docs/React/components/core-components/message-list.mdx

@@ -621,6 +621,14 @@ is shown only when viewing unread messages.
 | ------- | ------- |
 | boolean | false   |
 
+### sortReactionDetails
+
+Comparator function to sort the list of reacted users. Should have the same signature as an array's `sort` method.
+
+| Type                                                       | Default            |
+| ---------------------------------------------------------- | ------------------ |
+| (this: ReactionResponse, that: ReactionResponse) => number | alphabetical order |
+
 ### sortReactions
 
 Comparator function to sort reactions. Should have the same signature as the `sort` method for a string array.

docusaurus/docs/React/components/core-components/virtualized-list.mdx

@@ -264,6 +264,14 @@ The scroll-to behavior when new messages appear. Use `'smooth'` for regular chat
 | ------------------ | -------- |
 | 'smooth' \| 'auto' | 'smooth' |
 
+### sortReactionDetails
+
+Comparator function to sort the list of reacted users. Should have the same signature as an array's `sort` method.
+
+| Type                                                       | Default            |
+| ---------------------------------------------------------- | ------------------ |
+| (this: ReactionResponse, that: ReactionResponse) => number | alphabetical order |
+
 ### sortReactions
 
 Comparator function to sort reactions. Should have the same signature as an array's `sort` method.

docusaurus/docs/React/components/message-components/message.mdx

@@ -363,6 +363,14 @@ Custom action handler to retry sending a message after a failed request.
 | -------- | -------------------------------------------------------------------------------------------------------- |
 | function | [ChannelActionContextValue['retrySendMessage']](../contexts/channel-action-context.mdx#retrysendmessage) |
 
+### sortReactionDetails
+
+Comparator function to sort the list of reacted users. Should have the same signature as an array's `sort` method.
+
+| Type                                                       | Default            |
+| ---------------------------------------------------------- | ------------------ |
+| (this: ReactionResponse, that: ReactionResponse) => number | alphabetical order |
+
 ### sortReactions
 
 Comparator function to sort reactions. Should have the same signature as the `sort` method for a string array.

docusaurus/docs/React/components/message-components/reactions.mdx

@@ -121,7 +121,7 @@ const CustomReactionsList = (props) => {
 
 ## Sorting reactions
 
-By default, reactions are sorted alphabetically by type. You can change this behavior by passing a `sortReactions` prop to the `MessageList` (or `VirtualizedMessageList`).
+By default, reactions are sorted alphabetically by type. You can change this behavior by passing the `sortReactions` prop to the `MessageList` (or `VirtualizedMessageList`).
 
 In this example, we sort the reactions in the descending order by the number of users:
 
@@ -142,7 +142,9 @@ function sortByReactionCount(a, b) {
 </Chat>;
 ```
 
-For better performance, keep this function memoized with `useCallback`, or declare it in either global or module scope.
+Similarly, the `sortReactionDetails` prop can be passed to the `MessageList` (or `VirtualizedMessageList`) to sort the list of reacted users. The default implementation used by the reactions list modal dialog sorts users alphabetically by name.
+
+For better performance, keep the sorting functions memoized with `useCallback`, or declare it in either global or module scope.
 
 ## ReactionSelector Props
 
@@ -301,6 +303,14 @@ If true, adds a CSS class that reverses the horizontal positioning of the select
 | ------- | ------- |
 | boolean | false   |
 
+### sortReactionDetails
+
+Comparator function to sort the list of reacted users. Should have the same signature as an array's `sort` method. This prop overrides the function stored in `MessageContext`.
+
+| Type                                                       | Default            |
+| ---------------------------------------------------------- | ------------------ |
+| (this: ReactionResponse, that: ReactionResponse) => number | alphabetical order |
+
 ### sortReactions
 
 Comparator function to sort reactions. Should have the same signature as an array's `sort` method. This prop overrides the function stored in `MessageContext`.

src/components/Message/Message.tsx

@@ -51,7 +51,8 @@ type MessageContextPropsToPick =
   | 'onReactionListClick'
   | 'reactionSelectorRef'
   | 'showDetailedReactions'
-  | 'sortReactions';
+  | 'sortReactions'
+  | 'sortReactionDetails';
 
 type MessageWithContextProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -208,6 +209,7 @@ export const Message = <
     openThread: propOpenThread,
     pinPermissions,
     retrySendMessage: propRetrySendMessage,
+    sortReactionDetails,
     sortReactions,
   } = props;
 
@@ -310,6 +312,7 @@ export const Message = <
       readBy={props.readBy}
       renderText={props.renderText}
       showDetailedReactions={showDetailedReactions}
+      sortReactionDetails={sortReactionDetails}
       sortReactions={sortReactions}
       threadList={props.threadList}
       unsafeHTML={props.unsafeHTML}

src/components/Message/types.ts

@@ -6,7 +6,7 @@ import type { MessageActionsArray } from './utils';
 
 import type { GroupStyle } from '../MessageList/utils';
 import type { MessageInputProps } from '../MessageInput/MessageInput';
-import type { ReactionsComparator } from '../Reactions/types';
+import type { ReactionDetailsComparator, ReactionsComparator } from '../Reactions/types';
 
 import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
 import type { StreamMessage } from '../../context/ChannelStateContext';
@@ -98,6 +98,8 @@ export type MessageProps<
   ) => JSX.Element | null;
   /** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
   retrySendMessage?: ChannelActionContextValue<StreamChatGenerics>['retrySendMessage'];
+  /** Comparator function to sort the list of reacted users, defaults to alphabetical order */
+  sortReactionDetails?: ReactionDetailsComparator;
   /** Comparator function to sort reactions, defaults to alphabetical order */
   sortReactions?: ReactionsComparator;
   /** Whether the Message is in a Thread */

src/components/MessageList/MessageList.tsx

@@ -292,6 +292,7 @@ type PropsDrilledToMessage =
   | 'renderText'
   | 'retrySendMessage'
   | 'sortReactions'
+  | 'sortReactionDetails'
   | 'unsafeHTML';
 
 export type MessageListProps<

src/components/MessageList/VirtualizedMessageList.tsx

@@ -65,6 +65,7 @@ type VirtualizedMessageListPropsForContext =
   | 'messageActions'
   | 'shouldGroupByUser'
   | 'sortReactions'
+  | 'sortReactionDetails'
   | 'threadList';
 
 /**
@@ -195,6 +196,7 @@ const VirtualizedMessageListWithContext = <
     separateGiphyPreview = false,
     shouldGroupByUser = false,
     showUnreadNotificationAlways,
+    sortReactionDetails,
     sortReactions,
     stickToBottomScrollBehavior = 'smooth',
     suppressAutoscroll,
@@ -445,6 +447,7 @@ const VirtualizedMessageListWithContext = <
               ownMessagesReadByOthers,
               processedMessages,
               shouldGroupByUser,
+              sortReactionDetails,
               sortReactions,
               threadList,
               unreadMessageCount: channelUnreadUiState?.unread_messages,
@@ -491,7 +494,8 @@ type PropsDrilledToMessage =
   | 'additionalMessageInputProps'
   | 'customMessageActions'
   | 'messageActions'
-  | 'sortReactions';
+  | 'sortReactions'
+  | 'sortReactionDetails';
 
 export type VirtualizedMessageListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics

src/components/MessageList/VirtualizedMessageListComponents.tsx

@@ -137,6 +137,7 @@ export const messageRenderer = <
     ownMessagesReadByOthers,
     processedMessages: messageList,
     shouldGroupByUser,
+    sortReactionDetails,
     sortReactions,
     unreadMessageCount = 0,
     UnreadMessagesSeparator,
@@ -190,6 +191,7 @@ export const messageRenderer = <
         Message={MessageUIComponent}
         messageActions={messageActions}
         readBy={ownMessagesReadByOthers[message.id] || []}
+        sortReactionDetails={sortReactionDetails}
         sortReactions={sortReactions}
       />
       {showUnreadSeparator && (

src/components/Reactions/ReactionsList.tsx

@@ -8,7 +8,7 @@ import { useProcessReactions } from './hooks/useProcessReactions';
 import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
-import type { ReactionsComparator } from './types';
+import type { ReactionDetailsComparator, ReactionsComparator } from './types';
 import { ReactionsListModal } from './ReactionsListModal';
 import { MessageContextValue, useTranslationContext } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
@@ -28,6 +28,8 @@ export type ReactionsListProps<
   reactions?: ReactionResponse<StreamChatGenerics>[];
   /** Display the reactions in the list in reverse order, defaults to false */
   reverse?: boolean;
+  /** Comparator function to sort the list of reacted users, defaults to alphabetical order */
+  sortReactionDetails?: ReactionDetailsComparator;
   /** Comparator function to sort reactions, defaults to alphabetical order */
   sortReactions?: ReactionsComparator;
 };
@@ -37,7 +39,7 @@ const UnMemoizedReactionsList = <
 >(
   props: ReactionsListProps<StreamChatGenerics>,
 ) => {
-  const { handleFetchReactions, reverse = false, ...rest } = props;
+  const { handleFetchReactions, reverse = false, sortReactionDetails, ...rest } = props;
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
   const [selectedReactionType, setSelectedReactionType] = useState<string | null>(null);
   const { t } = useTranslationContext('ReactionsList');
@@ -104,6 +106,7 @@ const UnMemoizedReactionsList = <
         open={selectedReactionType !== null}
         reactions={existingReactions}
         selectedReactionType={selectedReactionType}
+        sortReactionDetails={sortReactionDetails}
       />
     </>
   );

src/components/Reactions/ReactionsListModal.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 
+import type { ReactionDetailsComparator, ReactionSummary } from './types';
+
 import { Modal, ModalProps } from '../Modal';
-import { ReactionSummary } from './types';
 import { useFetchReactions } from './hooks/useFetchReactions';
 import { LoadingIndicator } from '../Loading';
 import { Avatar } from '../Avatar';
@@ -16,13 +17,21 @@ type ReactionsListModalProps<
     reactions: ReactionSummary[];
     selectedReactionType: string | null;
     onSelectedReactionTypeChange?: (reactionType: string) => void;
+    sortReactionDetails?: ReactionDetailsComparator;
   };
 
+const defaultSortReactionDetails: ReactionDetailsComparator = (a, b) => {
+  const aName = a.user?.name ?? a.user?.id;
+  const bName = b.user?.name ?? b.user?.id;
+  return aName ? (bName ? aName.localeCompare(bName, 'en') : 1) : -1;
+};
+
 export function ReactionsListModal({
   handleFetchReactions,
   onSelectedReactionTypeChange,
   reactions,
   selectedReactionType,
+  sortReactionDetails = defaultSortReactionDetails,
   ...modalProps
 }: ReactionsListModalProps) {
   const selectedReaction = reactions.find(
@@ -38,10 +47,12 @@ export function ReactionsListModal({
       return [];
     }
 
-    return allReactions.filter(
+    const unsortedCurrentReactions = allReactions.filter(
       (reaction) => reaction.type === selectedReactionType && reaction.user,
     );
-  }, [allReactions, selectedReactionType]);
+
+    return unsortedCurrentReactions.sort(sortReactionDetails);
+  }, [allReactions, selectedReactionType, sortReactionDetails]);
 
   return (
     <Modal {...modalProps}>

src/components/Reactions/__tests__/ReactionsListModal.test.js

@@ -152,7 +152,7 @@ describe('ReactionsListModal', () => {
     ).toStrictEqual(Node.DOCUMENT_POSITION_FOLLOWING);
   });
 
-  it('should use custom comparator if provided', async () => {
+  it('should use custom reactions comparator if provided', async () => {
     const reactionCounts = {
       haha: 2,
       like: 8,
@@ -180,4 +180,55 @@ describe('ReactionsListModal', () => {
       ),
     ).toStrictEqual(Node.DOCUMENT_POSITION_FOLLOWING);
   });
+
+  it('should order reacted users alphabetically by default', async () => {
+    const reactionCounts = {
+      haha: 3,
+    };
+    const reactions = generateReactionsFromReactionCounts(reactionCounts).reverse();
+    const fetchReactions = jest.fn(() => Promise.resolve(reactions));
+    const { getByTestId, getByText } = renderComponent({
+      handleFetchReactions: fetchReactions,
+      reaction_counts: reactionCounts,
+      reactions,
+    });
+
+    await act(() => {
+      fireEvent.click(getByTestId('reactions-list-button-haha'));
+    });
+
+    expect(
+      getByText('Mark Number 0').compareDocumentPosition(getByText('Mark Number 1')),
+    ).toStrictEqual(Node.DOCUMENT_POSITION_FOLLOWING);
+
+    expect(
+      getByText('Mark Number 1').compareDocumentPosition(getByText('Mark Number 2')),
+    ).toStrictEqual(Node.DOCUMENT_POSITION_FOLLOWING);
+  });
+
+  it('should use custom reaction details comparator if provided', async () => {
+    const reactionCounts = {
+      haha: 3,
+    };
+    const reactions = generateReactionsFromReactionCounts(reactionCounts).reverse();
+    const fetchReactions = jest.fn(() => Promise.resolve(reactions));
+    const { getByTestId, getByText } = renderComponent({
+      handleFetchReactions: fetchReactions,
+      reaction_counts: reactionCounts,
+      reactions,
+      sortReactionDetails: (a, b) => -a.user.name.localeCompare(b.user.name),
+    });
+
+    await act(() => {
+      fireEvent.click(getByTestId('reactions-list-button-haha'));
+    });
+
+    expect(
+      getByText('Mark Number 2').compareDocumentPosition(getByText('Mark Number 1')),
+    ).toStrictEqual(Node.DOCUMENT_POSITION_FOLLOWING);
+
+    expect(
+      getByText('Mark Number 1').compareDocumentPosition(getByText('Mark Number 0')),
+    ).toStrictEqual(Node.DOCUMENT_POSITION_FOLLOWING);
+  });
 });

src/components/Reactions/types.ts

@@ -1,4 +1,5 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
+import type { ReactionResponse } from 'stream-chat';
 
 export interface ReactionSummary {
   EmojiComponent: ComponentType | null;
@@ -9,3 +10,5 @@ export interface ReactionSummary {
 }
 
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
+
+export type ReactionDetailsComparator = (a: ReactionResponse, b: ReactionResponse) => number;

src/context/MessageContext.tsx

@@ -11,7 +11,7 @@ import type { ReactEventHandler } from '../components/Message/types';
 import type { MessageActionsArray } from '../components/Message/utils';
 import type { MessageInputProps } from '../components/MessageInput/MessageInput';
 import type { GroupStyle } from '../components/MessageList/utils';
-import type { ReactionsComparator } from '../components/Reactions/types';
+import type { ReactionDetailsComparator, ReactionsComparator } from '../components/Reactions/types';
 
 import type { RenderTextOptions } from '../components/Message/renderText';
 import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
@@ -123,6 +123,9 @@ export type MessageContextValue<
     mentioned_users?: UserResponse<StreamChatGenerics>[],
     options?: RenderTextOptions,
   ) => JSX.Element | null;
+  /** Comparator function to sort the list of reacted users, defaults to alphabetical order */
+  sortReactionDetails?: ReactionDetailsComparator;
+  /** Comparator function to sort reactions, defaults to alphabetical order */
   sortReactions?: ReactionsComparator;
   /** Whether or not the Message is in a Thread */
   threadList?: boolean;