Merge pull request #547 from GetStream/CRS-289-react-reply-configurable

CRS-289: make reply/reactions available in messageActions

Author: jaapbakker88

src/components/Message/Message.js

@@ -78,6 +78,8 @@ const Message = (props) => {
     onUserHoverHandler: propOnUserHover,
   });
   const { isMyMessage, isAdmin, isModerator, isOwner } = useUserRole(message);
+  const canReact = true;
+  const canReply = true;
   const canEdit = isMyMessage || isModerator || isOwner || isAdmin;
   const canDelete = canEdit;
   const messageActionsHandler = useCallback(() => {
@@ -88,10 +90,21 @@ const Message = (props) => {
     return getMessageActions(messageActions, {
       canDelete,
       canEdit,
+      canReply,
+      canReact,
       canFlag: !isMyMessage,
       canMute: !isMyMessage && !!channelConfig?.mutes,
     });
-  }, [channelConfig, message, messageActions, canDelete, canEdit, isMyMessage]);
+  }, [
+    channelConfig,
+    message,
+    messageActions,
+    canDelete,
+    canEdit,
+    canReply,
+    canReact,
+    isMyMessage,
+  ]);
 
   const actionsEnabled =
     message && message.type === 'regular' && message.status === 'received';

src/components/Message/MessageOptions.js

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import { useUserRole, useOpenThreadHandler } from './hooks';
 import { ChannelContext } from '../../context';
 import { MessageActions } from '../MessageActions';
+import { MESSAGE_ACTIONS } from './utils';
 import { ThreadIcon, ReactionIcon } from './icons';
 
 /**
@@ -28,9 +29,19 @@ const MessageOptionsComponent = (props) => {
    */
   const { channel } = useContext(ChannelContext);
   const channelConfig = channel?.getConfig();
+  const messageActions = props.getMessageActions();
+  const shouldShowReactions =
+    messageActions.indexOf(MESSAGE_ACTIONS.react) > -1 &&
+    channelConfig &&
+    channelConfig.reactions;
+
   const shouldShowReplies =
-    displayReplies && !threadList && channelConfig && channelConfig.replies;
-  const shouldShowReactions = channelConfig && channelConfig.reactions;
+    messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 &&
+    displayReplies &&
+    !threadList &&
+    channelConfig &&
+    channelConfig.replies;
+
   if (
     !message ||
     message.type === 'error' ||
@@ -53,7 +64,7 @@ const MessageOptionsComponent = (props) => {
           <div
             data-testid="thread-action"
             onClick={propHandleOpenThread || handleOpenThread}
-            className={`str-chat__message-${theme} str-chat__message-${theme}__actions__action--thread`}
+            className={`str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--thread`}
           >
             <ThreadIcon />
           </div>

src/components/Message/__tests__/MessageCommerce.test.js

@@ -37,7 +37,7 @@ async function renderMessageCommerce(
     >
       <MessageCommerce
         message={message}
-        getMessageActions={() => ['flag', 'mute']}
+        getMessageActions={() => ['flag', 'mute', 'react', 'reply']}
         {...props}
       />
     </ChannelContext.Provider>,

src/components/Message/__tests__/MessageOptions.test.js

@@ -9,6 +9,7 @@ import {
 } from 'mock-builders';
 import { ChannelContext } from '../../../context';
 import { MessageActions as MessageActionsMock } from '../../MessageActions';
+import { MESSAGE_ACTIONS } from '../utils';
 import MessageOptions from '../MessageOptions';
 
 jest.mock('../../MessageActions', () => ({
@@ -22,6 +23,7 @@ const defaultProps = {
   threadList: false,
   messageWrapperRef: { current: document.createElement('div') },
   onReactionListClick: () => {},
+  getMessageActions: () => Object.keys(MESSAGE_ACTIONS),
 };
 
 function generateAliceMessage(messageOptions) {

src/components/Message/__tests__/utils.test.js

@@ -75,6 +75,8 @@ describe('Message utils', () => {
       canEdit: true,
       canFlag: true,
       canMute: true,
+      canReply: true,
+      canReact: true,
     };
     const actions = Object.values(MESSAGE_ACTIONS);
 

src/components/Message/utils.js

@@ -40,6 +40,8 @@ export const MESSAGE_ACTIONS = {
   delete: 'delete',
   flag: 'flag',
   mute: 'mute',
+  react: 'react',
+  reply: 'reply',
 };
 
 /**
@@ -48,12 +50,14 @@ export const MESSAGE_ACTIONS = {
  *   canDelete?: boolean;
  *   canMute?: boolean;
  *   canFlag?: boolean;
+ *   canReact?: boolean;
+ *   canReply?: boolean;
  * }} Capabilities
  * @type {(actions: string[] | boolean, capabilities: Capabilities) => string[]} Typescript syntax
  */
 export const getMessageActions = (
   actions,
-  { canDelete, canFlag, canEdit, canMute },
+  { canDelete, canFlag, canEdit, canMute, canReact, canReply },
 ) => {
   const messageActionsAfterPermission = [];
   let messageActions = [];
@@ -83,6 +87,14 @@ export const getMessageActions = (
     messageActionsAfterPermission.push(MESSAGE_ACTIONS.mute);
   }
 
+  if (canReact && messageActions.indexOf(MESSAGE_ACTIONS.react) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.react);
+  }
+
+  if (canReply && messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1) {
+    messageActionsAfterPermission.push(MESSAGE_ACTIONS.reply);
+  }
+
   return messageActionsAfterPermission;
 };