From 5a7af6f721c38546172d10b5891821e07c707044 Mon Sep 17 00:00:00 2001 From: Majid Date: Fri, 29 Sep 2023 21:22:55 +0200 Subject: [PATCH 1/6] Adds pending actions to the AddEmojiReaction --- src/libs/actions/Report.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 7d6d2b0949c1..8a69f699b099 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1742,6 +1742,7 @@ function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredS value: { [emoji.name]: { createdAt, + pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD, users: { [currentUserAccountID]: { skinTones: { @@ -1754,6 +1755,30 @@ function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredS }, ]; + const failureData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`, + value: { + [emoji.name]: { + pendingAction: null, + }, + }, + }, + ]; + + const successData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`, + value: { + [emoji.name]: { + pendingAction: null, + }, + }, + }, + ] + const parameters = { reportID, skinTone, @@ -1763,7 +1788,7 @@ function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredS // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; - API.write('AddEmojiReaction', parameters, {optimisticData}); + API.write('AddEmojiReaction', parameters, {optimisticData, successData, failureData}); } /** From be169e4ca947dff1029f556c9c8705e91c788046 Mon Sep 17 00:00:00 2001 From: Majid Date: Fri, 29 Sep 2023 21:23:31 +0200 Subject: [PATCH 2/6] Uses OfflineWithFeedback to display emojis with pending add actions --- .../ReportActionItemEmojiReactions.js | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index e72c9d9381fa..5384426183bc 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -14,6 +14,7 @@ import Tooltip from '../Tooltip'; import ReactionTooltipContent from './ReactionTooltipContent'; import * as EmojiUtils from '../../libs/EmojiUtils'; import {ReactionListContext} from '../../pages/home/ReportScreenContext'; +import OfflineWithFeedback from '../OfflineWithFeedback'; const propTypes = { emojiReactions: EmojiReactionsPropTypes, @@ -108,6 +109,7 @@ function ReportActionItemEmojiReactions(props) { reactionCount, hasUserReacted, onReactionListOpen, + hasPendingAction: reaction.pendingAction, }; }); @@ -132,16 +134,20 @@ function ReportActionItemEmojiReactions(props) { key={reaction.reactionEmojiName} > - (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)} - count={reaction.reactionCount} - emojiCodes={reaction.emojiCodes} - onPress={reaction.onPress} - reactionUsers={reaction.reactionUsers} - hasUserReacted={reaction.hasUserReacted} - onReactionListOpen={reaction.onReactionListOpen} - shouldBlockReactions={props.shouldBlockReactions} - /> + + (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)} + count={reaction.reactionCount} + emojiCodes={reaction.emojiCodes} + onPress={reaction.onPress} + reactionUsers={reaction.reactionUsers} + hasUserReacted={reaction.hasUserReacted} + onReactionListOpen={reaction.onReactionListOpen} + shouldBlockReactions={props.shouldBlockReactions} + /> + ); From de97cdc5dcc308ea7b6d43f3c641e74c3fc4959b Mon Sep 17 00:00:00 2001 From: Majid Date: Fri, 29 Sep 2023 23:24:43 +0200 Subject: [PATCH 3/6] Fixes prettier issues --- src/components/Reactions/ReportActionItemEmojiReactions.js | 4 +--- src/libs/actions/Report.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 5384426183bc..f1e77c4723ce 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -134,9 +134,7 @@ function ReportActionItemEmojiReactions(props) { key={reaction.reactionEmojiName} > - + (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)} count={reaction.reactionCount} diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 8a69f699b099..3cccdabb7f58 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1777,7 +1777,7 @@ function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredS }, }, }, - ] + ]; const parameters = { reportID, From ec32b858868709ea026cca05899869416295a232 Mon Sep 17 00:00:00 2001 From: Majid Date: Mon, 2 Oct 2023 17:11:17 +0200 Subject: [PATCH 4/6] Disables opacity on emojis when the action has a pending action --- .../Reactions/ReportActionItemEmojiReactions.js | 17 ++++++++++++----- src/pages/home/report/ReportActionItem.js | 2 +- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index f1e77c4723ce..6476701355f0 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -15,12 +15,13 @@ import ReactionTooltipContent from './ReactionTooltipContent'; import * as EmojiUtils from '../../libs/EmojiUtils'; import {ReactionListContext} from '../../pages/home/ReportScreenContext'; import OfflineWithFeedback from '../OfflineWithFeedback'; +import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes'; const propTypes = { emojiReactions: EmojiReactionsPropTypes, - /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */ - reportActionID: PropTypes.string.isRequired, + /** The report action that these reactions are for */ + reportAction: PropTypes.shape(reportActionPropTypes).isRequired, /** * Function to call when the user presses on an emoji. @@ -47,6 +48,9 @@ function ReportActionItemEmojiReactions(props) { let totalReactionCount = 0; + const reportAction = props.reportAction; + const reportActionID = reportAction.reportActionID; + // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone const sortedReactions = _.sortBy(props.emojiReactions, (emojiReaction, emojiName) => { // Since the emojiName is only stored as the object key, when _.sortBy() runs, the object is converted to an array and the @@ -97,7 +101,7 @@ function ReportActionItemEmojiReactions(props) { }; const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchors.current[reactionEmojiName], reactionEmojiName, props.reportActionID); + reactionListRef.current.showReactionList(event, popoverReactionListAnchors.current[reactionEmojiName], reactionEmojiName, reportActionID); }; return { @@ -134,7 +138,10 @@ function ReportActionItemEmojiReactions(props) { key={reaction.reactionEmojiName} > - + (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)} count={reaction.reactionCount} @@ -153,7 +160,7 @@ function ReportActionItemEmojiReactions(props) { {!props.shouldBlockReactions && ( )} diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 2585481748f6..d8fc75afc511 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -442,7 +442,7 @@ function ReportActionItem(props) { {!ReportActionsUtils.isMessageDeleted(props.action) && ( { From 3ba9ba03da495011fec4137c5dba12d891370a29 Mon Sep 17 00:00:00 2001 From: Majid Date: Mon, 2 Oct 2023 23:54:29 +0200 Subject: [PATCH 5/6] Uses reportActionID instead of the whole reportAction --- src/components/Reactions/ReportActionItemEmojiReactions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 6476701355f0..8e612d93871e 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -160,7 +160,7 @@ function ReportActionItemEmojiReactions(props) { {!props.shouldBlockReactions && ( )} From b0145f18a848cf44dbbb7826f3fba888310835dc Mon Sep 17 00:00:00 2001 From: Majid Date: Tue, 3 Oct 2023 15:23:12 +0200 Subject: [PATCH 6/6] Uses lodash get to guard against undefined Adds lodashGet --- src/components/Reactions/ReportActionItemEmojiReactions.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 8e612d93871e..7ead2ab67ae7 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -1,4 +1,5 @@ import React, {useRef, useContext} from 'react'; +import lodashGet from 'lodash/get'; import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; @@ -113,7 +114,7 @@ function ReportActionItemEmojiReactions(props) { reactionCount, hasUserReacted, onReactionListOpen, - hasPendingAction: reaction.pendingAction, + pendingAction: reaction.pendingAction, }; }); @@ -139,8 +140,8 @@ function ReportActionItemEmojiReactions(props) { > (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)}