From e87117d7c75907d343fce5b34486428ded08a8a9 Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Sat, 22 Jul 2023 05:22:11 +0800 Subject: [PATCH 01/13] fixed: dev: '0:undefined:' displayed in reaction emoji tooltip --- .../Reactions/ReportActionItemEmojiReactions.js | 2 +- .../home/report/ReactionList/PopoverReactionList.js | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index bb21f034c11c..e390821773cc 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -96,7 +96,7 @@ function ReportActionItemEmojiReactions(props) { }; const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID); + reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emojiName, props.reportActionID); }; return ( diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index ae2801b2f97d..a9a99df6f6fe 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -147,7 +147,14 @@ class PopoverReactionList extends React.Component { getSelectedReactionFromAction(reportAction, emojiName) { const reactions = lodashGet(reportAction, ['message', 0, 'reactions'], []); const reactionsWithCount = _.filter(reactions, (reaction) => reaction.users.length > 0); - return _.find(reactionsWithCount, (reaction) => reaction.emoji === emojiName); + const reaction = _.find(reactionsWithCount, (reaction) => reaction.emoji === emojiName); + if (reaction) { + return { + ...reaction, + users: reaction.users.map(({accountID, skinTone}) => ({accountID, skinTones: {skinTone}})) + }; + } + return undefined; } /** @@ -186,7 +193,7 @@ class PopoverReactionList extends React.Component { const reactionUsers = _.map(selectedReaction.users, (sender) => sender.accountID); const emoji = EmojiUtils.findEmojiByName(selectedReaction.emoji); const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, selectedReaction.users); - const hasUserReacted = Report.hasAccountIDReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers); + const hasUserReacted = Report.hasAccountIDEmojiReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers); const users = PersonalDetailsUtils.getPersonalDetailsByIDs(reactionUsers, this.props.currentUserPersonalDetails.accountID, true); return { emojiCount, From fc871eaf6efdcb68ed1e1b8c4c7c4226a8a5f3b8 Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Mon, 24 Jul 2023 11:48:23 +0800 Subject: [PATCH 02/13] use reactionEmojiName instead of reaction.emojiName --- src/components/Reactions/ReportActionItemEmojiReactions.js | 2 +- src/pages/home/report/ReactionList/PopoverReactionList.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index e390821773cc..4896c906f463 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -96,7 +96,7 @@ function ReportActionItemEmojiReactions(props) { }; const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emojiName, props.reportActionID); + reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID); }; return ( diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index a9a99df6f6fe..7b78b06bc7ba 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -147,11 +147,11 @@ class PopoverReactionList extends React.Component { getSelectedReactionFromAction(reportAction, emojiName) { const reactions = lodashGet(reportAction, ['message', 0, 'reactions'], []); const reactionsWithCount = _.filter(reactions, (reaction) => reaction.users.length > 0); - const reaction = _.find(reactionsWithCount, (reaction) => reaction.emoji === emojiName); + const reaction = _.find(reactionsWithCount, (item) => item.emoji === emojiName); if (reaction) { return { ...reaction, - users: reaction.users.map(({accountID, skinTone}) => ({accountID, skinTones: {skinTone}})) + users: _.map(reaction.users, ({accountID, skinTone}) => ({accountID, skinTones: {skinTone}})) }; } return undefined; From 7477b569b29aa6fd477ad44c2d24b24f2cfe255c Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Mon, 24 Jul 2023 15:16:21 +0800 Subject: [PATCH 03/13] added successData in toogleReaction result and updated test --- src/libs/actions/Report.js | 102 ++++++++++++++++-- .../ReactionList/PopoverReactionList.js | 2 +- tests/actions/ReportTest.js | 10 ++ 3 files changed, 104 insertions(+), 10 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index c293356ce08b..19e708c5a746 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1563,15 +1563,17 @@ function hasAccountIDEmojiReacted(accountID, users, skinTone) { * Adds a reaction to the report action. * Uses the NEW FORMAT for "emojiReactions" * @param {String} reportID - * @param {String} reportActionID + * @param {Object} reportAction * @param {Object} emoji * @param {String} emoji.name * @param {String} emoji.code * @param {String[]} [emoji.types] * @param {Number} [skinTone] */ -function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredSkinTone) { +function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSkinTone) { + const reportActionID = reportAction.reportActionID; const createdAt = moment().utc().format(CONST.DATE.SQL_DATE_TIME); + const optimisticData = [ { onyxMethod: Onyx.METHOD.MERGE, @@ -1591,6 +1593,46 @@ function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredS }, ]; + // We need to update the REPORT_ACTIONS on success + const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction); + const message = reportAction.message[0]; + + let reactionObject = message.reactions && _.find(message.reactions, (reaction) => reaction.emoji === emoji.name); + const needToInsertReactionObject = !reactionObject; + if (needToInsertReactionObject) { + reactionObject = { + emoji: emoji.name, + users: [], + }; + } else { + // Make a copy of the reaction object so that we can modify it without mutating the original + reactionObject = {...reactionObject}; + } + + reactionObject.users = [...reactionObject.users, {accountID: currentUserAccountID, skinTone}]; + let updatedReactions = [...(message.reactions || [])]; + if (needToInsertReactionObject) { + updatedReactions = [...updatedReactions, reactionObject]; + } else { + updatedReactions = _.map(updatedReactions, (reaction) => (reaction.emoji === emoji.name ? reactionObject : reaction)); + } + + const updatedMessage = { + ...message, + reactions: updatedReactions, + }; + const successData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, + value: { + [reportActionID]: { + message: [updatedMessage], + }, + }, + }, + ]; + const parameters = { reportID, skinTone, @@ -1600,20 +1642,21 @@ 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}); } /** * Removes a reaction to the report action. * Uses the NEW FORMAT for "emojiReactions" * @param {String} reportID - * @param {String} reportActionID + * @param {Object} reportAction * @param {Object} emoji * @param {String} emoji.name * @param {String} emoji.code * @param {String[]} [emoji.types] */ -function removeEmojiReaction(reportID, reportActionID, emoji) { +function removeEmojiReaction(reportID, reportAction, emoji) { + const reportActionID = reportAction.reportActionID; const optimisticData = [ { onyxMethod: Onyx.METHOD.MERGE, @@ -1628,6 +1671,48 @@ function removeEmojiReaction(reportID, reportActionID, emoji) { }, ]; + // We need to update the REPORT_ACTIONS on success + const message = reportAction.message[0]; + const reactionObject = message.reactions && _.find(message.reactions, (reaction) => reaction.emoji === emoji.name); + if (!reactionObject) { + return; + } + + const updatedReactionObject = { + ...reactionObject, + }; + updatedReactionObject.users = _.filter(reactionObject.users, (sender) => sender.accountID !== currentUserAccountID); + const updatedReactions = _.filter( + // Replace the reaction object either with the updated one or null if there are no users + _.map(message.reactions, (reaction) => { + if (reaction.emoji === emoji.name) { + if (updatedReactionObject.users.length === 0) { + return null; + } + return updatedReactionObject; + } + return reaction; + }), + + // Remove any null reactions + (reportObject) => reportObject !== null, + ); + const updatedMessage = { + ...message, + reactions: updatedReactions, + }; + const successData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, + value: { + [reportActionID]: { + message: [updatedMessage], + }, + }, + }, + ]; + const parameters = { reportID, reportActionID, @@ -1635,7 +1720,7 @@ function removeEmojiReaction(reportID, reportActionID, emoji) { // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; - API.write('RemoveEmojiReaction', parameters, {optimisticData}); + API.write('RemoveEmojiReaction', parameters, {optimisticData, successData}); } /** @@ -1664,11 +1749,10 @@ function toggleEmojiReaction(reportID, reportAction, reactionObject, existingRea const skinTone = emoji.types === undefined ? -1 : paramSkinTone; if (existingReactionObject && hasAccountIDEmojiReacted(currentUserAccountID, existingReactionObject.users, skinTone)) { - removeEmojiReaction(reportID, reportAction.reportActionID, emoji); + removeEmojiReaction(reportID, reportAction, emoji); return; } - - addEmojiReaction(reportID, reportAction.reportActionID, emoji, skinTone); + addEmojiReaction(reportID, reportAction, emoji, skinTone); } /** diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index 7b78b06bc7ba..d504b7f214ca 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -151,7 +151,7 @@ class PopoverReactionList extends React.Component { if (reaction) { return { ...reaction, - users: _.map(reaction.users, ({accountID, skinTone}) => ({accountID, skinTones: {skinTone}})) + users: _.map(reaction.users, ({accountID, skinTone}) => ({accountID, skinTones: {skinTone}})), }; } return undefined; diff --git a/tests/actions/ReportTest.js b/tests/actions/ReportTest.js index 5937e1117a4b..9f6ac56e052b 100644 --- a/tests/actions/ReportTest.js +++ b/tests/actions/ReportTest.js @@ -561,6 +561,8 @@ describe('actions/Report', () => { return waitForPromisesToResolve(); }) .then(() => { + reportAction = _.first(_.values(reportActions)); + // Expect the reaction to exist in the reportActionsReactions collection expect(reportActionsReactions).toHaveProperty(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`); @@ -583,15 +585,21 @@ describe('actions/Report', () => { expect(reportActionReaction[EMOJI.name].users[TEST_USER_ACCOUNT_ID]).toBeNull(); }) .then(() => { + reportAction = _.first(_.values(reportActions)); + // Add the same reaction to the same report action with a different skintone Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI); return waitForPromisesToResolve() .then(() => { + reportAction = _.first(_.values(reportActions)); + const reportActionReaction = reportActionsReactions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`]; Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI, reportActionReaction, EMOJI_SKIN_TONE); return waitForPromisesToResolve(); }) .then(() => { + reportAction = _.first(_.values(reportActions)); + // Expect the reaction to exist in the reportActionsReactions collection expect(reportActionsReactions).toHaveProperty(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`); @@ -670,6 +678,8 @@ describe('actions/Report', () => { return waitForPromisesToResolve(); }) .then(() => { + resultAction = _.first(_.values(reportActions)); + // Now we toggle the reaction while the skin tone has changed. // As the emoji doesn't support skin tones, the emoji // should get removed instead of added again. From 40f01ead23e22a42a2dbcacdcf8758cb5954505a Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 03:31:10 +0800 Subject: [PATCH 04/13] merged response data --- src/libs/actions/Report.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 19e708c5a746..536ced32fba3 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1574,7 +1574,7 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki const reportActionID = reportAction.reportActionID; const createdAt = moment().utc().format(CONST.DATE.SQL_DATE_TIME); - const optimisticData = [ + const reportActionsReactionsData = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`, @@ -1621,7 +1621,7 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki ...message, reactions: updatedReactions, }; - const successData = [ + const reportActionsData = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, @@ -1632,6 +1632,10 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki }, }, ]; + const optimisticData = [ + ...reportActionsReactionsData, + ...reportActionsData, + ]; const parameters = { reportID, @@ -1642,7 +1646,7 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; - API.write('AddEmojiReaction', parameters, {optimisticData, successData}); + API.write('AddEmojiReaction', parameters, {optimisticData}); } /** @@ -1657,7 +1661,7 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki */ function removeEmojiReaction(reportID, reportAction, emoji) { const reportActionID = reportAction.reportActionID; - const optimisticData = [ + const reportActionsReactionsData = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`, @@ -1701,7 +1705,7 @@ function removeEmojiReaction(reportID, reportAction, emoji) { ...message, reactions: updatedReactions, }; - const successData = [ + const reportActionsData = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, @@ -1712,6 +1716,10 @@ function removeEmojiReaction(reportID, reportAction, emoji) { }, }, ]; + const optimisticData = [ + ...reportActionsReactionsData, + ...reportActionsData, + ]; const parameters = { reportID, @@ -1720,7 +1728,8 @@ function removeEmojiReaction(reportID, reportAction, emoji) { // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; - API.write('RemoveEmojiReaction', parameters, {optimisticData, successData}); + + API.write('RemoveEmojiReaction', parameters, {optimisticData}); } /** From 660bb483252719a3845be7c8a88a73b45d64b30f Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 03:37:30 +0800 Subject: [PATCH 05/13] removed unnecessary line --- src/libs/actions/Report.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 536ced32fba3..6878d9886033 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1728,7 +1728,6 @@ function removeEmojiReaction(reportID, reportAction, emoji) { // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; - API.write('RemoveEmojiReaction', parameters, {optimisticData}); } From fb327b0a72c1b513309280100896f14ff3adbe96 Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 03:58:46 +0800 Subject: [PATCH 06/13] prettier --- src/libs/actions/Report.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 6878d9886033..ff0cbd64c11e 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1632,10 +1632,7 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki }, }, ]; - const optimisticData = [ - ...reportActionsReactionsData, - ...reportActionsData, - ]; + const optimisticData = [...reportActionsReactionsData, ...reportActionsData]; const parameters = { reportID, @@ -1716,10 +1713,7 @@ function removeEmojiReaction(reportID, reportAction, emoji) { }, }, ]; - const optimisticData = [ - ...reportActionsReactionsData, - ...reportActionsData, - ]; + const optimisticData = [...reportActionsReactionsData, ...reportActionsData]; const parameters = { reportID, From 107de5b3eaf95d483ed0d2d0859e909d63e5053e Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 07:10:45 +0800 Subject: [PATCH 07/13] updated PopoverReactsList with EmojiReaction instadOf reportAction --- .../ReportActionItemEmojiReactions.js | 2 +- src/libs/actions/Report.js | 105 ++------------ .../ReactionList/PopoverReactionList.js | 135 ++---------------- src/pages/home/report/ReportActionsView.js | 5 +- 4 files changed, 22 insertions(+), 225 deletions(-) diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 4896c906f463..57e901bf3cdc 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -96,7 +96,7 @@ function ReportActionItemEmojiReactions(props) { }; const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID); + reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction); }; return ( diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index ff0cbd64c11e..f807346e365b 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1563,18 +1563,16 @@ function hasAccountIDEmojiReacted(accountID, users, skinTone) { * Adds a reaction to the report action. * Uses the NEW FORMAT for "emojiReactions" * @param {String} reportID - * @param {Object} reportAction + * @param {String} reportActionID * @param {Object} emoji * @param {String} emoji.name * @param {String} emoji.code * @param {String[]} [emoji.types] * @param {Number} [skinTone] */ -function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSkinTone) { - const reportActionID = reportAction.reportActionID; +function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredSkinTone) { const createdAt = moment().utc().format(CONST.DATE.SQL_DATE_TIME); - - const reportActionsReactionsData = [ + const optimisticData = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`, @@ -1592,48 +1590,6 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki }, }, ]; - - // We need to update the REPORT_ACTIONS on success - const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction); - const message = reportAction.message[0]; - - let reactionObject = message.reactions && _.find(message.reactions, (reaction) => reaction.emoji === emoji.name); - const needToInsertReactionObject = !reactionObject; - if (needToInsertReactionObject) { - reactionObject = { - emoji: emoji.name, - users: [], - }; - } else { - // Make a copy of the reaction object so that we can modify it without mutating the original - reactionObject = {...reactionObject}; - } - - reactionObject.users = [...reactionObject.users, {accountID: currentUserAccountID, skinTone}]; - let updatedReactions = [...(message.reactions || [])]; - if (needToInsertReactionObject) { - updatedReactions = [...updatedReactions, reactionObject]; - } else { - updatedReactions = _.map(updatedReactions, (reaction) => (reaction.emoji === emoji.name ? reactionObject : reaction)); - } - - const updatedMessage = { - ...message, - reactions: updatedReactions, - }; - const reportActionsData = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, - value: { - [reportActionID]: { - message: [updatedMessage], - }, - }, - }, - ]; - const optimisticData = [...reportActionsReactionsData, ...reportActionsData]; - const parameters = { reportID, skinTone, @@ -1650,15 +1606,14 @@ function addEmojiReaction(reportID, reportAction, emoji, skinTone = preferredSki * Removes a reaction to the report action. * Uses the NEW FORMAT for "emojiReactions" * @param {String} reportID - * @param {Object} reportAction + * @param {String} reportActionID * @param {Object} emoji * @param {String} emoji.name * @param {String} emoji.code * @param {String[]} [emoji.types] */ -function removeEmojiReaction(reportID, reportAction, emoji) { - const reportActionID = reportAction.reportActionID; - const reportActionsReactionsData = [ +function removeEmojiReaction(reportID, reportActionID, emoji) { + const optimisticData = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`, @@ -1671,50 +1626,6 @@ function removeEmojiReaction(reportID, reportAction, emoji) { }, }, ]; - - // We need to update the REPORT_ACTIONS on success - const message = reportAction.message[0]; - const reactionObject = message.reactions && _.find(message.reactions, (reaction) => reaction.emoji === emoji.name); - if (!reactionObject) { - return; - } - - const updatedReactionObject = { - ...reactionObject, - }; - updatedReactionObject.users = _.filter(reactionObject.users, (sender) => sender.accountID !== currentUserAccountID); - const updatedReactions = _.filter( - // Replace the reaction object either with the updated one or null if there are no users - _.map(message.reactions, (reaction) => { - if (reaction.emoji === emoji.name) { - if (updatedReactionObject.users.length === 0) { - return null; - } - return updatedReactionObject; - } - return reaction; - }), - - // Remove any null reactions - (reportObject) => reportObject !== null, - ); - const updatedMessage = { - ...message, - reactions: updatedReactions, - }; - const reportActionsData = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, - value: { - [reportActionID]: { - message: [updatedMessage], - }, - }, - }, - ]; - const optimisticData = [...reportActionsReactionsData, ...reportActionsData]; - const parameters = { reportID, reportActionID, @@ -1751,10 +1662,10 @@ function toggleEmojiReaction(reportID, reportAction, reactionObject, existingRea const skinTone = emoji.types === undefined ? -1 : paramSkinTone; if (existingReactionObject && hasAccountIDEmojiReacted(currentUserAccountID, existingReactionObject.users, skinTone)) { - removeEmojiReaction(reportID, reportAction, emoji); + removeEmojiReaction(reportID, reportAction.reportActionID, emoji); return; } - addEmojiReaction(reportID, reportAction, emoji, skinTone); + addEmojiReaction(reportID, reportAction.reportActionID, emoji, skinTone); } /** diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index d504b7f214ca..eef8098ada77 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -1,37 +1,15 @@ import React from 'react'; import {Dimensions} from 'react-native'; import _ from 'underscore'; -import lodashGet from 'lodash/get'; -import {withOnyx} from 'react-native-onyx'; -import PropTypes from 'prop-types'; import * as Report from '../../../../libs/actions/Report'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasuredContent'; import BaseReactionList from './BaseReactionList'; import compose from '../../../../libs/compose'; -import reportPropTypes from '../../../reportPropTypes'; -import reportActionPropTypes from '../reportActionPropTypes'; -import ONYXKEYS from '../../../../ONYXKEYS'; import withCurrentUserPersonalDetails from '../../../../components/withCurrentUserPersonalDetails'; +import emojis from '../../../../../assets/emojis'; import * as PersonalDetailsUtils from '../../../../libs/PersonalDetailsUtils'; import * as EmojiUtils from '../../../../libs/EmojiUtils'; -import * as ReportActionsUtils from '../../../../libs/ReportActionsUtils'; -import * as ReportUtils from '../../../../libs/ReportUtils'; -import CONST from '../../../../CONST'; - -const propTypes = { - /** The report currently being looked at */ - report: reportPropTypes.isRequired, - - /** Actions from the ChatReport */ - reportActions: PropTypes.shape(reportActionPropTypes), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - reportActions: {}, -}; class PopoverReactionList extends React.Component { constructor(props) { @@ -54,7 +32,6 @@ class PopoverReactionList extends React.Component { emojiName: '', emojiCount: 0, hasUserReacted: false, - reportActionID: '', }; this.onPopoverHideActionCallback = () => {}; @@ -63,7 +40,6 @@ class PopoverReactionList extends React.Component { this.hideReactionList = this.hideReactionList.bind(this); this.measureReactionListPosition = this.measureReactionListPosition.bind(this); this.getReactionListMeasuredLocation = this.getReactionListMeasuredLocation.bind(this); - this.getSelectedReaction = this.getSelectedReaction.bind(this); this.getReactionInformation = this.getReactionInformation.bind(this); this.dimensionsEventListener = null; this.contentRef = React.createRef(); @@ -73,47 +49,6 @@ class PopoverReactionList extends React.Component { this.dimensionsEventListener = Dimensions.addEventListener('change', this.measureReactionListPosition); } - shouldComponentUpdate(nextProps, nextState) { - const selectedReaction = this.getSelectedReaction(nextProps.reportActions, nextState.reportActionID, nextState.emojiName); - const {emojiCount, emojiCodes, hasUserReacted, users} = this.getReactionInformation(selectedReaction); - const previousLocale = lodashGet(this.props, 'preferredLocale', CONST.LOCALES.DEFAULT); - const nextLocale = lodashGet(nextProps, 'preferredLocale', CONST.LOCALES.DEFAULT); - - return ( - this.state.isPopoverVisible !== nextState.isPopoverVisible || - this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition || - previousLocale !== nextLocale || - (this.state.isPopoverVisible && - (this.state.reportActionID !== nextState.reportActionID || - this.state.emojiName !== nextState.emojiName || - this.state.emojiCount !== emojiCount || - this.state.hasUserReacted !== hasUserReacted || - !_.isEqual(this.state.emojiCodes, emojiCodes) || - !_.isEqual(this.state.users, users))) - ); - } - - componentDidUpdate() { - if (!this.state.emojiName) { - return; - } - - const selectedReaction = this.getSelectedReaction(this.props.reportActions, this.state.reportActionID, this.state.emojiName); - if (!selectedReaction) { - this.setState({ - isPopoverVisible: false, - }); - } else { - const {emojiCount, emojiCodes, hasUserReacted, users} = this.getReactionInformation(selectedReaction); - this.setState({ - users, - emojiCodes, - emojiCount, - hasUserReacted, - }); - } - } - componentWillUnmount() { if (!this.dimensionsEventListener) { return; @@ -137,43 +72,6 @@ class PopoverReactionList extends React.Component { }); } - /** - * Get the selected reaction from report action. - * - * @param {Object} reportAction - * @param {String} emojiName - Name of emoji - * @returns {Object} - */ - getSelectedReactionFromAction(reportAction, emojiName) { - const reactions = lodashGet(reportAction, ['message', 0, 'reactions'], []); - const reactionsWithCount = _.filter(reactions, (reaction) => reaction.users.length > 0); - const reaction = _.find(reactionsWithCount, (item) => item.emoji === emojiName); - if (reaction) { - return { - ...reaction, - users: _.map(reaction.users, ({accountID, skinTone}) => ({accountID, skinTones: {skinTone}})), - }; - } - return undefined; - } - - /** - * Get the selected reaction. - * - * @param {Array} reportActions - * @param {String} reportActionID - * @param {String} emojiName - Name of emoji - * @returns {Object} - */ - getSelectedReaction(reportActions, reportActionID, emojiName) { - const reportAction = _.find(reportActions, (action) => action.reportActionID === reportActionID); - if (!reportAction || ReportUtils.isThreadFirstChat(reportAction, this.props.report.reportID)) { - const parentReportAction = ReportActionsUtils.getParentReportAction(this.props.report); - return this.getSelectedReactionFromAction(parentReportAction, emojiName); - } - return this.getSelectedReactionFromAction(reportAction, emojiName); - } - /** * Get the reaction information. * @@ -189,12 +87,13 @@ class PopoverReactionList extends React.Component { emojiCount: 0, }; } - const emojiCount = selectedReaction.users.length; - const reactionUsers = _.map(selectedReaction.users, (sender) => sender.accountID); - const emoji = EmojiUtils.findEmojiByName(selectedReaction.emoji); + const reactionUsers = _.pick(selectedReaction.users, _.identity); + const emojiCount = _.map(reactionUsers, (user) => user).length; + const userAccountIDs = _.map(reactionUsers, (user, accountID) => parseInt(accountID, 10)); + const emoji = _.find(emojis, (e) => e.name === selectedReaction.emojiName); const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, selectedReaction.users); const hasUserReacted = Report.hasAccountIDEmojiReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers); - const users = PersonalDetailsUtils.getPersonalDetailsByIDs(reactionUsers, this.props.currentUserPersonalDetails.accountID, true); + const users = PersonalDetailsUtils.getPersonalDetailsByIDs(userAccountIDs, this.props.currentUserPersonalDetails.accountID, true); return { emojiCount, emojiCodes, @@ -208,13 +107,14 @@ class PopoverReactionList extends React.Component { * * @param {Object} [event] - A press event. * @param {Element} reactionListAnchor - reactionListAnchor + * @param {Object} emojiReaction * @param {String} emojiName - Name of emoji - * @param {String} reportActionID */ - showReactionList(event, reactionListAnchor, emojiName, reportActionID) { + showReactionList(event, reactionListAnchor, emojiReaction) { const nativeEvent = event.nativeEvent || {}; this.reactionListAnchor = reactionListAnchor; - const selectedReaction = this.getSelectedReaction(this.props.reportActions, reportActionID, emojiName); + const selectedReaction = emojiReaction; + const {emojiName} = emojiReaction; const {emojiCount, emojiCodes, hasUserReacted, users} = this.getReactionInformation(selectedReaction); this.getReactionListMeasuredLocation().then(({x, y}) => { this.setState({ @@ -232,7 +132,6 @@ class PopoverReactionList extends React.Component { emojiCount, isPopoverVisible: true, hasUserReacted, - reportActionID, }); }); } @@ -295,16 +194,6 @@ class PopoverReactionList extends React.Component { } } -PopoverReactionList.propTypes = propTypes; -PopoverReactionList.defaultProps = defaultProps; +PopoverReactionList.propTypes = withLocalizePropTypes; -export default compose( - withLocalize, - withOnyx({ - reportActions: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, - canEvict: false, - }, - }), - withCurrentUserPersonalDetails, -)(PopoverReactionList); +export default compose(withLocalize, withCurrentUserPersonalDetails)(PopoverReactionList); diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 817174398896..22d2fcf08655 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -338,10 +338,7 @@ function ReportActionsView(props) { newMarkerReportActionID={newMarkerReportActionID} policy={props.policy} /> - + ); } From 3fc65c226f28067dba595b9d9f081ecdc4481a5e Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 07:20:12 +0800 Subject: [PATCH 08/13] added new lines like previus update --- src/libs/actions/Report.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index f807346e365b..2c85781ddc06 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1590,6 +1590,7 @@ function addEmojiReaction(reportID, reportActionID, emoji, skinTone = preferredS }, }, ]; + const parameters = { reportID, skinTone, @@ -1599,6 +1600,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}); } @@ -1626,6 +1628,7 @@ function removeEmojiReaction(reportID, reportActionID, emoji) { }, }, ]; + const parameters = { reportID, reportActionID, @@ -1633,6 +1636,7 @@ function removeEmojiReaction(reportID, reportActionID, emoji) { // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; + API.write('RemoveEmojiReaction', parameters, {optimisticData}); } From 768733feae5b597e7344b2026634102e5e50003d Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 07:20:49 +0800 Subject: [PATCH 09/13] removed unncessary lines --- src/libs/actions/Report.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 2c85781ddc06..654171b821ae 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1600,7 +1600,6 @@ 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}); } @@ -1636,7 +1635,6 @@ function removeEmojiReaction(reportID, reportActionID, emoji) { // This will be removed as part of https://github.com/Expensify/App/issues/19535 useEmojiReactions: true, }; - API.write('RemoveEmojiReaction', parameters, {optimisticData}); } From f2aff14c23e6717ef4047a416ea1e449bdccfdb8 Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 07:21:34 +0800 Subject: [PATCH 10/13] added new lines like previus update --- src/libs/actions/Report.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 654171b821ae..c293356ce08b 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1667,6 +1667,7 @@ function toggleEmojiReaction(reportID, reportAction, reactionObject, existingRea removeEmojiReaction(reportID, reportAction.reportActionID, emoji); return; } + addEmojiReaction(reportID, reportAction.reportActionID, emoji, skinTone); } From 254fd6fc4013baa69e76779f4457d74a15cdedd5 Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 08:00:24 +0800 Subject: [PATCH 11/13] prettier --- .../report/ReactionList/PopoverReactionList.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index eef8098ada77..2fdab7126788 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -1,5 +1,6 @@ import React from 'react'; import {Dimensions} from 'react-native'; +import lodashGet from 'lodash/get'; import _ from 'underscore'; import * as Report from '../../../../libs/actions/Report'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; @@ -10,6 +11,7 @@ import withCurrentUserPersonalDetails from '../../../../components/withCurrentUs import emojis from '../../../../../assets/emojis'; import * as PersonalDetailsUtils from '../../../../libs/PersonalDetailsUtils'; import * as EmojiUtils from '../../../../libs/EmojiUtils'; +import CONST from '../../../../CONST'; class PopoverReactionList extends React.Component { constructor(props) { @@ -49,6 +51,18 @@ class PopoverReactionList extends React.Component { this.dimensionsEventListener = Dimensions.addEventListener('change', this.measureReactionListPosition); } + shouldComponentUpdate(nextProps, nextState) { + const previousLocale = lodashGet(this.props, 'preferredLocale', CONST.LOCALES.DEFAULT); + const nextLocale = lodashGet(nextProps, 'preferredLocale', CONST.LOCALES.DEFAULT); + + return ( + this.state.isPopoverVisible !== nextState.isPopoverVisible || + this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition || + previousLocale !== nextLocale || + (this.state.isPopoverVisible && (this.state.reportActionID !== nextState.reportActionID || this.state.emojiName !== nextState.emojiName)) + ); + } + componentWillUnmount() { if (!this.dimensionsEventListener) { return; From 5c0ed2565bef0d9b733468f3e2e1f2348324f30c Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 09:09:41 +0800 Subject: [PATCH 12/13] fixed issues --- src/pages/home/report/ReactionList/PopoverReactionList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index 2fdab7126788..3d8ed53d19fc 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -103,8 +103,8 @@ class PopoverReactionList extends React.Component { } const reactionUsers = _.pick(selectedReaction.users, _.identity); const emojiCount = _.map(reactionUsers, (user) => user).length; - const userAccountIDs = _.map(reactionUsers, (user, accountID) => parseInt(accountID, 10)); - const emoji = _.find(emojis, (e) => e.name === selectedReaction.emojiName); + const userAccountIDs = _.map(reactionUsers, (user, accountID) => Number(accountID)); + const emoji = EmojiUtils.findEmojiByName(selectedReaction.emojiName); const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, selectedReaction.users); const hasUserReacted = Report.hasAccountIDEmojiReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers); const users = PersonalDetailsUtils.getPersonalDetailsByIDs(userAccountIDs, this.props.currentUserPersonalDetails.accountID, true); From 9578fbb02934dbbd5e4713f2600f941f87a171c6 Mon Sep 17 00:00:00 2001 From: jfquevedol2198 Date: Tue, 25 Jul 2023 09:11:00 +0800 Subject: [PATCH 13/13] removed unnecessary lines --- src/pages/home/report/ReactionList/PopoverReactionList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js index 3d8ed53d19fc..8a9b32b5fd9a 100644 --- a/src/pages/home/report/ReactionList/PopoverReactionList.js +++ b/src/pages/home/report/ReactionList/PopoverReactionList.js @@ -8,7 +8,6 @@ import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasur import BaseReactionList from './BaseReactionList'; import compose from '../../../../libs/compose'; import withCurrentUserPersonalDetails from '../../../../components/withCurrentUserPersonalDetails'; -import emojis from '../../../../../assets/emojis'; import * as PersonalDetailsUtils from '../../../../libs/PersonalDetailsUtils'; import * as EmojiUtils from '../../../../libs/EmojiUtils'; import CONST from '../../../../CONST';