From e5c11b161ebb57c1de714d7035c3c4c826c8f091 Mon Sep 17 00:00:00 2001 From: Jaap Date: Mon, 28 Sep 2020 11:34:39 +0200 Subject: [PATCH 1/4] update MESSAGE_ACTIONS and getMessageActions fn --- src/components/Message/utils.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Message/utils.js b/src/components/Message/utils.js index a27c70bfd..94d995ce4 100644 --- a/src/components/Message/utils.js +++ b/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; }; From bb4530b4d852961c65e651d2bed82b3da4686c11 Mon Sep 17 00:00:00 2001 From: Jaap Date: Mon, 28 Sep 2020 11:38:16 +0200 Subject: [PATCH 2/4] updated Message component for extra messageActions --- src/components/Message/Message.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Message/Message.js b/src/components/Message/Message.js index 16bb43996..2b76e2b8e 100644 --- a/src/components/Message/Message.js +++ b/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'; From ae4e2ebf2bb7181d92b2145f93d93342574f4a9a Mon Sep 17 00:00:00 2001 From: Jaap Date: Mon, 28 Sep 2020 11:39:15 +0200 Subject: [PATCH 3/4] add conditional checks in MessageOptions for new messageActions --- src/components/Message/MessageOptions.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/Message/MessageOptions.js b/src/components/Message/MessageOptions.js index a7c7cd94d..8fbe4ebe9 100644 --- a/src/components/Message/MessageOptions.js +++ b/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; + + console.log(messageActions); if ( !message || message.type === 'error' || @@ -53,7 +64,7 @@ const MessageOptionsComponent = (props) => {
From f147f1e84a3b0bc600c9e40a80f617b84ad52674 Mon Sep 17 00:00:00 2001 From: Jaap Date: Mon, 28 Sep 2020 13:34:36 +0200 Subject: [PATCH 4/4] fix tests --- src/components/Message/MessageOptions.js | 2 +- src/components/Message/__tests__/MessageCommerce.test.js | 2 +- src/components/Message/__tests__/MessageOptions.test.js | 2 ++ src/components/Message/__tests__/utils.test.js | 2 ++ 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Message/MessageOptions.js b/src/components/Message/MessageOptions.js index 8fbe4ebe9..a4a314226 100644 --- a/src/components/Message/MessageOptions.js +++ b/src/components/Message/MessageOptions.js @@ -34,6 +34,7 @@ const MessageOptionsComponent = (props) => { messageActions.indexOf(MESSAGE_ACTIONS.react) > -1 && channelConfig && channelConfig.reactions; + const shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && @@ -41,7 +42,6 @@ const MessageOptionsComponent = (props) => { channelConfig && channelConfig.replies; - console.log(messageActions); if ( !message || message.type === 'error' || diff --git a/src/components/Message/__tests__/MessageCommerce.test.js b/src/components/Message/__tests__/MessageCommerce.test.js index 0d3b28e52..7e8504ea5 100644 --- a/src/components/Message/__tests__/MessageCommerce.test.js +++ b/src/components/Message/__tests__/MessageCommerce.test.js @@ -37,7 +37,7 @@ async function renderMessageCommerce( > ['flag', 'mute']} + getMessageActions={() => ['flag', 'mute', 'react', 'reply']} {...props} /> , diff --git a/src/components/Message/__tests__/MessageOptions.test.js b/src/components/Message/__tests__/MessageOptions.test.js index b0763f142..4e55314a9 100644 --- a/src/components/Message/__tests__/MessageOptions.test.js +++ b/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) { diff --git a/src/components/Message/__tests__/utils.test.js b/src/components/Message/__tests__/utils.test.js index e4b3891ad..f63614204 100644 --- a/src/components/Message/__tests__/utils.test.js +++ b/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);