Finalize

Author: arnautov-anton

src/components/Reactions/MessageReactions.tsx

@@ -21,6 +21,7 @@ import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { ReactionsComparator, ReactionType } from './types';
 import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
+import { ReactionSelector } from './ReactionSelector';
 
 export type MessageReactionsProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -66,7 +67,6 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
     capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},
     flipHorizontalPosition = false,
     handleFetchReactions,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     reactionDetailsSort,
     verticalPosition = 'top',
     visualStyle = 'clustered',
@@ -89,7 +89,9 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
   const { isMyMessage, message } = useMessageContext('MessageReactions');
 
   const divRef = useRef<ComponentRef<'div'>>(null);
-  const dialogId = `message-reactions-detail-${message.id}`;
+  const dialogId = DefaultMessageReactionsDetail.getDialogId({
+    messageId: message.id,
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
   const isDialogOpen = useDialogIsOpen(dialogId, dialogManager?.id);
 
@@ -225,6 +227,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
         <MessageReactionsDetail
           handleFetchReactions={handleFetchReactions}
           onSelectedReactionTypeChange={setSelectedReactionType}
+          reactionDetailsSort={reactionDetailsSort}
           reactionGroups={reactionGroups}
           reactions={existingReactions}
           selectedReactionType={selectedReactionType}

src/components/Reactions/MessageReactionsDetail.tsx

@@ -45,7 +45,13 @@ export const MessageReactionsDetailLoadingIndicator = () => {
   return <>{elements}</>;
 };
 
-export function MessageReactionsDetail({
+interface MessageReactionsDetailInterface {
+  (props: MessageReactionsDetailProps): React.ReactNode;
+  displayName: string;
+  getDialogId: (_: { messageId: string }) => string;
+}
+
+export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
   handleFetchReactions,
   handleReaction,
   onSelectedReactionTypeChange,
@@ -55,13 +61,14 @@ export function MessageReactionsDetail({
   reactions,
   selectedReactionType,
   totalReactionCount,
-}: MessageReactionsDetailProps) {
+}) => {
   const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);
   const { client } = useChatContext();
   const {
     Avatar = DefaultAvatar,
     LoadingIndicator = MessageReactionsDetailLoadingIndicator,
     reactionOptions = defaultReactionOptions,
+    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,
   } = useComponentContext(MessageReactionsDetail.name);
   const { t } = useTranslationContext();
 
@@ -91,8 +98,8 @@ export function MessageReactionsDetail({
         className='str-chat__message-reactions-detail'
         data-testid='message-reactions-detail'
       >
-        <ReactionSelector.ExtendedList
-          dialogId={`message-reactions-detail-${message.id}`}
+        <ReactionSelectorExtendedList
+          dialogId={MessageReactionsDetail.getDialogId({ messageId: message.id })}
           handleReaction={handleReaction}
           own_reactions={own_reactions}
         />
@@ -220,4 +227,9 @@ export function MessageReactionsDetail({
       </div>
     </div>
   );
-}
+};
+
+MessageReactionsDetail.displayName = 'MessageReactionsDetail';
+
+MessageReactionsDetail.getDialogId = ({ messageId }) =>
+  `message-reactions-detail-${messageId}`;

src/components/Reactions/ReactionSelector.tsx

@@ -33,8 +33,10 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
   const { handleReaction: propHandleReaction, own_reactions: propOwnReactions } = props;
   const [extendedListOpen, setExtendedListOpen] = useState(false);
 
-  const { reactionOptions = defaultReactionOptions } =
-    useComponentContext('ReactionSelector');
+  const {
+    reactionOptions = defaultReactionOptions,
+    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,
+  } = useComponentContext('ReactionSelector');
 
   const {
     closeReactionSelectorOnClick,
@@ -116,7 +118,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
         </>
       )}
       {extendedListOpen && (
-        <ReactionSelector.ExtendedList {...props} dialogId={dialogId} />
+        <ReactionSelectorExtendedList {...props} dialogId={dialogId} />
       )}
     </div>
   );

src/context/ComponentContext.tsx

@@ -1,6 +1,7 @@
-import type { PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
 
+
 import {
   type AttachmentPreviewListProps,
   type AttachmentProps,
@@ -43,6 +44,7 @@ import {
   type PollOptionSelectorProps,
   type QuotedMessagePreviewProps,
   type ReactionOptions,
+  type ReactionSelector,
   type ReactionSelectorProps,
   type RecordingPermissionDeniedNotificationProps,
   type ReminderNotificationProps,
@@ -211,6 +213,9 @@ export type ComponentContextValue = {
   reactionOptions?: ReactionOptions;
   /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
   ReactionSelector?: React.ForwardRefExoticComponent<ReactionSelectorProps>;
+  ReactionSelectorExtendedList?: React.ComponentType<
+    ComponentProps<(typeof ReactionSelector)['ExtendedList']>
+  >;
   /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [MessageReactions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/MessageReactions.tsx) */
   MessageReactions?: React.ComponentType<MessageReactionsProps>;
   /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [MessageReactionsDetail](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/MessageReactionsDetail.tsx) */