From 71220c013dfd97c4155e16d6c03230dfcd0d1184 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Thu, 16 Feb 2023 13:19:16 +0100 Subject: [PATCH] implemented toggling reactions when selecting the same again --- .../Reactions/ReportActionItemReactions.js | 76 +++++++------------ src/libs/actions/Report.js | 17 ++++- .../report/ContextMenu/ContextMenuActions.js | 4 +- src/pages/home/report/ReportActionItem.js | 15 ++-- 4 files changed, 50 insertions(+), 62 deletions(-) diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js index fc0f7e9d451a..49e566dde010 100644 --- a/src/components/Reactions/ReportActionItemReactions.js +++ b/src/components/Reactions/ReportActionItemReactions.js @@ -34,8 +34,7 @@ const getUniqueEmojiCodes = (emoji, users) => { const propTypes = { // eslint-disable-next-line react/forbid-prop-types reactions: PropTypes.arrayOf(PropTypes.object).isRequired, - removeReaction: PropTypes.func.isRequired, - addReaction: PropTypes.func.isRequired, + toggleReaction: PropTypes.func.isRequired, ...withCurrentUserPersonalDetailsPropTypes, }; @@ -44,55 +43,36 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -const ReportActionItemReactions = (props) => { - /** - * @param {{ name: string, code: string }} emoji - */ - const selectEmojiFromPicker = (emoji) => { - // Check if the emoji already exists in the reactions - const reaction = _.find(props.reactions, r => r.emoji === emoji.name); - if (reaction) { - props.removeReaction(emoji); - } else { - props.addReaction(emoji); - } - }; - - return ( - - {_.map(props.reactions, (reaction) => { - const reactionCount = reaction.users.length; - const hasUserReacted = _.find(reaction.users, reactor => `${reactor.accountID}` === `${props.currentUserPersonalDetails.accountID}`) != null; - const senderIDs = _.map(reaction.users, sender => sender.accountID); - const emoji = _.find(emojis, e => e.name === reaction.emoji); - const emojiCodes = getUniqueEmojiCodes(emoji, reaction.users); +const ReportActionItemReactions = props => ( + + {_.map(props.reactions, (reaction) => { + const reactionCount = reaction.users.length; + const hasUserReacted = _.find(reaction.users, reactor => `${reactor.accountID}` === `${props.currentUserPersonalDetails.accountID}`) != null; + const senderIDs = _.map(reaction.users, sender => sender.accountID); + const emoji = _.find(emojis, e => e.name === reaction.emoji); + const emojiCodes = getUniqueEmojiCodes(emoji, reaction.users); - const onPress = () => { - if (hasUserReacted) { - props.removeReaction(emoji); - } else { - props.addReaction(emoji); - } - }; + const onPress = () => { + props.toggleReaction(emoji); + }; - return ( - ReactionsContextMenu.showContextMenu(reactions)} - senderIDs={senderIDs} - /> - ); - })} - {props.reactions.length > 0 && } - - ); -}; + // TODO: onLongPress={() => ReactionsContextMenu.showContextMenu(reactions)} + senderIDs={senderIDs} + /> + ); + })} + {props.reactions.length > 0 && } + +); ReportActionItemReactions.displayName = 'ReportActionItemReactions'; ReportActionItemReactions.propTypes = propTypes; diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 30b63187e670..046b22ed5190 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1221,8 +1221,8 @@ function addReaction(reportID, originalReportAction, emoji, skinTone) { }; } - const isReacted = hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone); - if (isReacted) { + const hasCurrentUserReacted = hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone); + if (hasCurrentUserReacted) { return; } @@ -1298,6 +1298,18 @@ function removeReaction(reportID, originalReportAction, emoji) { // API.write('RemoveReaction', parameters, {optimisticData}); } +function toggleReaction(reportID, reportAction, emoji, skinTone) { + const message = reportAction.message[0]; + const reactionObject = message.reactions && _.find(message.reactions, reaction => reaction.emoji === emoji.name); + if (reactionObject) { + const hasCurrentUserReacted = hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone); + if (hasCurrentUserReacted) { + return removeReaction(reportID, reportAction, emoji, skinTone); + } + } + return addReaction(reportID, reportAction, emoji, skinTone); +} + export { addComment, addAttachment, @@ -1331,4 +1343,5 @@ export { showReportActionNotification, addReaction, removeReaction, + toggleReaction, }; diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js index ceb92226ee9d..c0c5680517b8 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.js +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js @@ -43,8 +43,8 @@ export default [ { - console.log('emoji selected', emoji); - Report.addReaction(reportID, reportAction, emoji); + // TODO: we need to add the preferred skin tone here as well somehow + Report.toggleReaction(reportID, reportAction, emoji); }} /> ), diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index eac89b7b2bed..a7bc36db43d6 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -81,8 +81,7 @@ class ReportActionItem extends Component { this.checkIfContextMenuActive = this.checkIfContextMenuActive.bind(this); this.showPopover = this.showPopover.bind(this); this.renderItemContent = this.renderItemContent.bind(this); - this.addReaction = this.addReaction.bind(this); - this.removeReaction = this.removeReaction.bind(this); + this.toggleReaction = this.toggleReaction.bind(this); } shouldComponentUpdate(nextProps, nextState) { @@ -142,12 +141,9 @@ class ReportActionItem extends Component { ); } - addReaction(emoji) { - Report.addReaction(this.props.report.reportID, this.props.action, emoji); - } - - removeReaction(emoji) { - Report.removeReaction(this.props.report.reportID, this.props.action, emoji); + toggleReaction(emoji) { + // TODO: we need to add the skin tone here somehow + Report.toggleReaction(this.props.report.reportID, this.props.action, emoji); } /** @@ -215,8 +211,7 @@ class ReportActionItem extends Component { {hasReactions && ( )}