From d1442aed3566bf609b27469e7a2aa5f78f3fd475 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 02:33:20 +0500 Subject: [PATCH 1/8] Block new reactions on report action of report that has creation errors --- .../Reactions/ReportActionItemEmojiReactions.js | 15 +++++++++------ src/pages/home/report/ReportActionItem.js | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 806e87b4301d..0091a528fb5c 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -19,7 +19,7 @@ const propTypes = { emojiReactions: EmojiReactionsPropTypes, /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */ - reportActionID: PropTypes.string.isRequired, + reportAction: PropTypes.object, /** * Function to call when the user presses on an emoji. @@ -37,6 +37,7 @@ const defaultProps = { }; function ReportActionItemEmojiReactions(props) { + const hasErrors = !_.isEmpty(props.reportAction.errors); const {reactionListRef} = useContext(ReportScreenContext); const popoverReactionListAnchor = useRef(null); let totalReactionCount = 0; @@ -91,7 +92,7 @@ function ReportActionItemEmojiReactions(props) { }; const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID); + reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportAction.reportActionID); }; return { @@ -143,10 +144,12 @@ function ReportActionItemEmojiReactions(props) { ); })} - + {!hasErrors && ( + + )} ) ); diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 9f0c2d8cda47..8b944b3354d0 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -399,7 +399,7 @@ function ReportActionItem(props) { {!ReportActionsUtils.isMessageDeleted(props.action) && ( { if (Session.isAnonymousUser()) { From bf188acfade22437b8ee4ffa402cbd25be4e00a6 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 02:33:53 +0500 Subject: [PATCH 2/8] Block user from removing reactions on report action of report that has creation errors --- src/components/Reactions/EmojiReactionBubble.js | 16 ++++++++++++++-- .../Reactions/ReportActionItemEmojiReactions.js | 1 + 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 30520cb633ef..0a7f308ce912 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -38,6 +38,9 @@ const propTypes = { */ hasUserReacted: PropTypes.bool, + /** Whether the user can react with the current emoji */ + isReactionBlocked: PropTypes.bool, + ...windowDimensionsPropTypes, }; @@ -45,6 +48,7 @@ const defaultProps = { count: 0, onReactionListOpen: () => {}, isContextMenu: false, + isReactionBlocked: false, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -52,8 +56,16 @@ const defaultProps = { function EmojiReactionBubble(props) { return ( [styles.emojiReactionBubble, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu)]} - onPress={props.onPress} + style={({hovered, pressed}) => [ + styles.emojiReactionBubble, + StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu), + props.isReactionBlocked && styles.cursorDisabled, + ]} + onPress={() => { + if (props.isReactionBlocked) return; + + props.onPress(); + }} onLongPress={props.onReactionListOpen} onSecondaryInteraction={props.onReactionListOpen} ref={props.forwardedRef} diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 0091a528fb5c..29c2661a68c9 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -139,6 +139,7 @@ function ReportActionItemEmojiReactions(props) { reactionUsers={reaction.reactionUsers} hasUserReacted={reaction.hasUserReacted} onReactionListOpen={reaction.onReactionListOpen} + isReactionBlocked={hasErrors} /> From aecdc3e4d120fb6601e32ae66171f0ffd4fd80be Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 03:53:42 +0500 Subject: [PATCH 3/8] Updated report action prop type in report item emoji reactions --- .../Reactions/ReportActionItemEmojiReactions.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 29c2661a68c9..59e65da9387a 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -18,8 +18,12 @@ import ReportScreenContext from '../../pages/home/ReportScreenContext'; const propTypes = { emojiReactions: EmojiReactionsPropTypes, - /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */ - reportAction: PropTypes.object, + /** The report action belonging to the emoji reaction */ + reportAction: PropTypes.shape({ + reportActionID: PropTypes.string.isRequired, + // eslint-disable-next-line react/forbid-prop-types + errors: PropTypes.object, + }), /** * Function to call when the user presses on an emoji. From 87ed5ddd8130a6a2982715fe390f2bd2b45bbaf1 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 12:28:03 +0500 Subject: [PATCH 4/8] Updated early return style --- src/components/Reactions/EmojiReactionBubble.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 0a7f308ce912..1e7816052658 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -62,7 +62,9 @@ function EmojiReactionBubble(props) { props.isReactionBlocked && styles.cursorDisabled, ]} onPress={() => { - if (props.isReactionBlocked) return; + if (props.isReactionBlocked) { + return; + } props.onPress(); }} From 1086186fac2f17270c56093aec62ce2a11ca9b06 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 12:38:10 +0500 Subject: [PATCH 5/8] Added prop for report action item error in emoji reactions --- .../ReportActionItemEmojiReactions.js | 21 +++++++++---------- src/pages/home/report/ReportActionItem.js | 11 +++++----- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 59e65da9387a..1912014d6716 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -18,12 +18,8 @@ import ReportScreenContext from '../../pages/home/ReportScreenContext'; const propTypes = { emojiReactions: EmojiReactionsPropTypes, - /** The report action belonging to the emoji reaction */ - reportAction: PropTypes.shape({ - reportActionID: PropTypes.string.isRequired, - // eslint-disable-next-line react/forbid-prop-types - errors: PropTypes.object, - }), + /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */ + reportActionID: PropTypes.string.isRequired, /** * Function to call when the user presses on an emoji. @@ -32,16 +28,19 @@ const propTypes = { */ toggleReaction: PropTypes.func.isRequired, + /** A bool indicating if the current report action has any errors */ + hasReportActionErrors: PropTypes.bool, + ...withCurrentUserPersonalDetailsPropTypes, }; const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, emojiReactions: {}, + hasReportActionErrors: false, }; function ReportActionItemEmojiReactions(props) { - const hasErrors = !_.isEmpty(props.reportAction.errors); const {reactionListRef} = useContext(ReportScreenContext); const popoverReactionListAnchor = useRef(null); let totalReactionCount = 0; @@ -96,7 +95,7 @@ function ReportActionItemEmojiReactions(props) { }; const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportAction.reportActionID); + reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID); }; return { @@ -143,16 +142,16 @@ function ReportActionItemEmojiReactions(props) { reactionUsers={reaction.reactionUsers} hasUserReacted={reaction.hasUserReacted} onReactionListOpen={reaction.onReactionListOpen} - isReactionBlocked={hasErrors} + isReactionBlocked={props.hasReportActionErrors} /> ); })} - {!hasErrors && ( + {!props.hasReportActionErrors && ( )} diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 8b944b3354d0..7b6105a3fd05 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -245,7 +245,7 @@ function ReportActionItem(props) { * @param {Boolean} hovered whether the ReportActionItem is hovered * @returns {Object} child component(s) */ - const renderItemContent = (hovered = false) => { + const renderItemContent = (hovered = false, hasErrors = false) => { let children; const originalMessage = lodashGet(props.action, 'originalMessage', {}); @@ -399,8 +399,9 @@ function ReportActionItem(props) { {!ReportActionsUtils.isMessageDeleted(props.action) && ( { if (Session.isAnonymousUser()) { hideContextMenu(false); @@ -438,8 +439,8 @@ function ReportActionItem(props) { * @param {Boolean} isWhisper whether the ReportActionItem is a whisper * @returns {Object} report action item */ - const renderReportActionItem = (hovered, isWhisper) => { - const content = renderItemContent(hovered || isContextMenuActive); + const renderReportActionItem = (hovered, isWhisper, hasErrors) => { + const content = renderItemContent(hovered || isContextMenuActive, hasErrors); if (props.draftMessage) { return {content}; @@ -592,7 +593,7 @@ function ReportActionItem(props) { /> )} - {renderReportActionItem(hovered, isWhisper)} + {renderReportActionItem(hovered, isWhisper, hasErrors)} From bf8d641c4e6dfdd59d3eb2d1e5fc6675ca871937 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 12:39:48 +0500 Subject: [PATCH 6/8] Added jsdoc for report action errors prop --- src/pages/home/report/ReportActionItem.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 7b6105a3fd05..eec643d1ea0e 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -243,6 +243,7 @@ function ReportActionItem(props) { /** * Get the content of ReportActionItem * @param {Boolean} hovered whether the ReportActionItem is hovered + * @param {Boolean} hasErrors whether the report action has any errors * @returns {Object} child component(s) */ const renderItemContent = (hovered = false, hasErrors = false) => { @@ -437,6 +438,7 @@ function ReportActionItem(props) { * Get ReportActionItem with a proper wrapper * @param {Boolean} hovered whether the ReportActionItem is hovered * @param {Boolean} isWhisper whether the ReportActionItem is a whisper + * @param {Boolean} hasErrors whether the report action has any errors * @returns {Object} report action item */ const renderReportActionItem = (hovered, isWhisper, hasErrors) => { From 913794278042fe348769ed439f06fbabbab7bee4 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 19:32:48 +0500 Subject: [PATCH 7/8] Renamed reaction blocked prop --- .../Reactions/ReportActionItemEmojiReactions.js | 10 +++++----- src/pages/home/report/ReportActionItem.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 1912014d6716..0be077bd5f0e 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -28,8 +28,8 @@ const propTypes = { */ toggleReaction: PropTypes.func.isRequired, - /** A bool indicating if the current report action has any errors */ - hasReportActionErrors: PropTypes.bool, + /** A bool indicating if the user can add or remove reactions from current action */ + isReactionBlocked: PropTypes.bool, ...withCurrentUserPersonalDetailsPropTypes, }; @@ -37,7 +37,7 @@ const propTypes = { const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, emojiReactions: {}, - hasReportActionErrors: false, + isReactionBlocked: false, }; function ReportActionItemEmojiReactions(props) { @@ -142,13 +142,13 @@ function ReportActionItemEmojiReactions(props) { reactionUsers={reaction.reactionUsers} hasUserReacted={reaction.hasUserReacted} onReactionListOpen={reaction.onReactionListOpen} - isReactionBlocked={props.hasReportActionErrors} + isReactionBlocked={props.isReactionBlocked} /> ); })} - {!props.hasReportActionErrors && ( + {!props.isReactionBlocked && ( { if (Session.isAnonymousUser()) { hideContextMenu(false); From c17a085dac644ac761119388b04daad0382b6d5d Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 23 Aug 2023 23:20:08 +0500 Subject: [PATCH 8/8] Updated emojis block boolean prop name --- src/components/Reactions/EmojiReactionBubble.js | 10 +++++----- .../Reactions/ReportActionItemEmojiReactions.js | 10 +++++----- src/pages/home/report/ReportActionItem.js | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 1e7816052658..bb37735d6920 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -38,8 +38,8 @@ const propTypes = { */ hasUserReacted: PropTypes.bool, - /** Whether the user can react with the current emoji */ - isReactionBlocked: PropTypes.bool, + /** We disable reacting with emojis on report actions that have errors */ + shouldBlockReactions: PropTypes.bool, ...windowDimensionsPropTypes, }; @@ -48,7 +48,7 @@ const defaultProps = { count: 0, onReactionListOpen: () => {}, isContextMenu: false, - isReactionBlocked: false, + shouldBlockReactions: false, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -59,10 +59,10 @@ function EmojiReactionBubble(props) { style={({hovered, pressed}) => [ styles.emojiReactionBubble, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu), - props.isReactionBlocked && styles.cursorDisabled, + props.shouldBlockReactions && styles.cursorDisabled, ]} onPress={() => { - if (props.isReactionBlocked) { + if (props.shouldBlockReactions) { return; } diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 0be077bd5f0e..ec2755f1a5dd 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -28,8 +28,8 @@ const propTypes = { */ toggleReaction: PropTypes.func.isRequired, - /** A bool indicating if the user can add or remove reactions from current action */ - isReactionBlocked: PropTypes.bool, + /** We disable reacting with emojis on report actions that have errors */ + shouldBlockReactions: PropTypes.bool, ...withCurrentUserPersonalDetailsPropTypes, }; @@ -37,7 +37,7 @@ const propTypes = { const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, emojiReactions: {}, - isReactionBlocked: false, + shouldBlockReactions: false, }; function ReportActionItemEmojiReactions(props) { @@ -142,13 +142,13 @@ function ReportActionItemEmojiReactions(props) { reactionUsers={reaction.reactionUsers} hasUserReacted={reaction.hasUserReacted} onReactionListOpen={reaction.onReactionListOpen} - isReactionBlocked={props.isReactionBlocked} + shouldBlockReactions={props.shouldBlockReactions} /> ); })} - {!props.isReactionBlocked && ( + {!props.shouldBlockReactions && ( { if (Session.isAnonymousUser()) { hideContextMenu(false);