fix: move render condition to MessageActions directly

GetStream · Sep 4, 2024 · aa0ccb3 · aa0ccb3
1 parent 04cfbca
commit aa0ccb3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/src/components/Message/MessageOptions.tsx b/src/components/Message/MessageOptions.tsx
@@ -5,14 +5,14 @@ import {
   ReactionIcon as DefaultReactionIcon,
   ThreadIcon as DefaultThreadIcon,
 } from './icons';
-import { MESSAGE_ACTIONS, shouldRenderMessageActions } from './utils';
+import { MESSAGE_ACTIONS } from './utils';
 
 import { MessageActions } from '../MessageActions';
 
 import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
 
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
-import { useComponentContext, useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context';
 
 export type MessageOptionsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -47,7 +47,6 @@ const UnMemoizedMessageOptions = <
   } = props;
 
   const {
-    customMessageActions,
     getMessageActions,
     handleOpenThread: contextHandleOpenThread,
     initialMessage,
@@ -57,20 +56,11 @@ const UnMemoizedMessageOptions = <
     threadList,
   } = useMessageContext<StreamChatGenerics>('MessageOptions');
 
-  const { CustomMessageActionsList } = useComponentContext('MessageOptions');
-
   const { t } = useTranslationContext('MessageOptions');
 
   const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
 
   const messageActions = getMessageActions();
-  const renderMessageActions = shouldRenderMessageActions({
-    // @ts-ignore
-    customMessageActions,
-    CustomMessageActionsList,
-    inThread: threadList,
-    messageActions,
-  });
 
   const shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
   const shouldShowReplies =
@@ -92,9 +82,7 @@ const UnMemoizedMessageOptions = <
 
   return (
     <div className={rootClassName} data-testid='message-options'>
-      {renderMessageActions && (
-        <MessageActions ActionsIcon={ActionsIcon} messageWrapperRef={messageWrapperRef} />
-      )}
+      <MessageActions ActionsIcon={ActionsIcon} messageWrapperRef={messageWrapperRef} />
       {shouldShowReplies && (
         <button
           aria-label={t('aria/Open Thread')}

diff --git a/src/components/Message/__tests__/MessageOptions.test.js b/src/components/Message/__tests__/MessageOptions.test.js
@@ -197,7 +197,7 @@ describe('<MessageOptions />', () => {
       channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
       customMessageProps: { messageActions: [] },
     });
-    expect(MessageActionsMock).not.toHaveBeenCalled();
+    expect(MessageActionsMock).;
   });
 
   it('should not show actions box for message in thread if only non-thread actions are available', async () => {

diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
@@ -11,14 +11,14 @@ import clsx from 'clsx';
 import { MessageActionsBox } from './MessageActionsBox';
 
 import { ActionsIcon as DefaultActionsIcon } from '../Message/icons';
-import { isUserMuted } from '../Message/utils';
+import { isUserMuted, shouldRenderMessageActions } from '../Message/utils';
 
 import { useChatContext } from '../../context/ChatContext';
 import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
 
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
 import { useMessageActionsBoxPopper } from './hooks';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 type MessageContextPropsToPick =
   | 'getMessageActions'
@@ -65,7 +65,9 @@ export const MessageActions = <
   } = props;
 
   const { mutes } = useChatContext<StreamChatGenerics>('MessageActions');
+
   const {
+    customMessageActions,
     getMessageActions: contextGetMessageActions,
     handleDelete: contextHandleDelete,
     handleFlag: contextHandleFlag,
@@ -75,8 +77,11 @@ export const MessageActions = <
     isMyMessage,
     message: contextMessage,
     setEditingState,
+    threadList,
   } = useMessageContext<StreamChatGenerics>('MessageActions');
 
+  const { CustomMessageActionsList } = useComponentContext('MessageActions');
+
   const { t } = useTranslationContext('MessageActions');
 
   const getMessageActions = propGetMessageActions || contextGetMessageActions;
@@ -92,6 +97,16 @@ export const MessageActions = <
 
   const isMuted = useCallback(() => isUserMuted(message, mutes), [message, mutes]);
 
+  const messageActions = getMessageActions();
+
+  const renderMessageActions = shouldRenderMessageActions({
+    // @ts-expect-error
+    customMessageActions,
+    CustomMessageActionsList,
+    inThread: threadList,
+    messageActions,
+  });
+
   const hideOptions = useCallback((event: MouseEvent | KeyboardEvent) => {
     if (event instanceof KeyboardEvent && event.key !== 'Escape') {
       return;
@@ -132,6 +147,8 @@ export const MessageActions = <
     referenceElement: actionsBoxButtonRef.current,
   });
 
+  if (!renderMessageActions) return null;
+
   return (
     <MessageActionsWrapper
       customWrapperClass={customWrapperClass}

diff --git a/src/components/MessageActions/__tests__/MessageActions.test.js b/src/components/MessageActions/__tests__/MessageActions.test.js
@@ -65,10 +65,7 @@ describe('<MessageActions /> component', () => {
     const tree = renderMessageActions({}, testRenderer.create);
     expect(tree.toJSON()).toMatchInlineSnapshot(`
       <div
-        className="
-        str-chat__message-simple__actions__action
-        str-chat__message-simple__actions__action--options
-        str-chat__message-actions-container"
+        className="str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options str-chat__message-actions-container"
         data-testid="message-actions"
         onClick={[Function]}
       >
@@ -276,10 +273,7 @@ describe('<MessageActions /> component', () => {
     );
     expect(tree.toJSON()).toMatchInlineSnapshot(`
       <span
-        className="
-        str-chat__message-simple__actions__action
-        str-chat__message-simple__actions__action--options
-        str-chat__message-actions-container"
+        className="str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options str-chat__message-actions-container"
         data-testid="message-actions"
         onClick={[Function]}
       >