Skip to content

Commit 38890e2

Browse files
JulesssssJulesssss
authored
Merge pull request #21578 from Expensify/cristi_optimistic-report-preview
Optimistic report previews
2 parents e299de5 + c379a5c commit 38890e2

File tree

2 files changed

+77
-39
lines changed

2 files changed

+77
-39
lines changed

‎src/libs/ReportUtils.js

+13-12
Original file line numberDiff line numberDiff line change
@@ -1081,10 +1081,10 @@ function getTransactionReportName(reportAction) {
10811081
* Get money request message for an IOU report
10821082
*
10831083
* @param {Object} report
1084-
* @param {Object} reportAction
1084+
* @param {Object} [reportAction={}]
10851085
* @returns {String}
10861086
*/
1087-
function getReportPreviewMessage(report, reportAction) {
1087+
function getReportPreviewMessage(report, reportAction = {}) {
10881088
const reportActionMessage = lodashGet(reportAction, 'message[0].html', '');
10891089

10901090
if (_.isEmpty(report) || !report.reportID) {
@@ -1561,26 +1561,27 @@ function buildOptimisticIOUReportAction(type, amount, currency, comment, partici
15611561
};
15621562
}
15631563

1564-
function buildOptimisticReportPreview(reportID, iouReportID, payeeAccountID) {
1564+
function buildOptimisticReportPreview(chatReport, iouReport) {
1565+
const message = getReportPreviewMessage(iouReport);
15651566
return {
15661567
reportActionID: NumberUtils.rand64(),
1567-
reportID,
1568-
created: DateUtils.getDBTime(),
1568+
reportID: chatReport.reportID,
15691569
actionName: CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW,
15701570
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
1571-
accountID: payeeAccountID,
1571+
originalMessage: {
1572+
linkedReportID: iouReport.reportID,
1573+
},
15721574
message: [
15731575
{
1574-
html: '',
1575-
text: '',
1576+
html: message,
1577+
text: message,
15761578
isEdited: false,
15771579
type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
15781580
},
15791581
],
1580-
originalMessage: {
1581-
linkedReportID: iouReportID,
1582-
},
1583-
actorAccountID: currentUserAccountID,
1582+
created: DateUtils.getDBTime(),
1583+
accountID: iouReport.managerID || 0,
1584+
actorAccountID: iouReport.managerID || 0,
15841585
};
15851586
}
15861587

‎src/libs/actions/IOU.js

+64-27
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ function buildOnyxDataForMoneyRequest(
8989
reportPreviewAction,
9090
isNewChatReport,
9191
isNewIOUReport,
92-
isNewReportPreviewAction,
9392
) {
9493
const optimisticData = [
9594
{
@@ -124,9 +123,7 @@ function buildOnyxDataForMoneyRequest(
124123
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
125124
value: {
126125
...(isNewChatReport ? {[chatCreatedAction.reportActionID]: chatCreatedAction} : {}),
127-
[reportPreviewAction.reportActionID]: {
128-
...(isNewReportPreviewAction ? reportPreviewAction : {created: DateUtils.getDBTime()}),
129-
},
126+
[reportPreviewAction.reportActionID]: reportPreviewAction,
130127
},
131128
},
132129
{
@@ -189,13 +186,9 @@ function buildOnyxDataForMoneyRequest(
189186
},
190187
}
191188
: {}),
192-
...(isNewReportPreviewAction
193-
? {
194-
[reportPreviewAction.reportActionID]: {
195-
pendingAction: null,
196-
},
197-
}
198-
: {}),
189+
[reportPreviewAction.reportActionID]: {
190+
pendingAction: null,
191+
},
199192
},
200193
},
201194
{
@@ -387,11 +380,14 @@ function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, part
387380
},
388381
};
389382

390-
let isNewReportPreviewAction = false;
391383
let reportPreviewAction = isNewIOUReport ? null : ReportActionsUtils.getReportPreviewAction(chatReport.reportID, iouReport.reportID);
392-
if (!reportPreviewAction) {
393-
isNewReportPreviewAction = true;
394-
reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport.reportID, iouReport.reportID);
384+
if (reportPreviewAction) {
385+
reportPreviewAction.created = DateUtils.getDBTime();
386+
const message = ReportUtils.getReportPreviewMessage(iouReport, reportPreviewAction);
387+
reportPreviewAction.message[0].html = message;
388+
reportPreviewAction.message[0].text = message;
389+
} else {
390+
reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport, iouReport);
395391
}
396392

397393
// STEP 5: Build Onyx Data
@@ -406,7 +402,6 @@ function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, part
406402
reportPreviewAction,
407403
isNewChatReport,
408404
isNewIOUReport,
409-
isNewReportPreviewAction,
410405
);
411406

412407
// STEP 6: Make the request
@@ -649,11 +644,14 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
649644
},
650645
};
651646

652-
let isNewOneOnOneReportPreviewAction = false;
653647
let oneOnOneReportPreviewAction = ReportActionsUtils.getReportPreviewAction(oneOnOneChatReport.reportID, oneOnOneIOUReport.reportID);
654-
if (!oneOnOneReportPreviewAction) {
655-
isNewOneOnOneReportPreviewAction = true;
656-
oneOnOneReportPreviewAction = ReportUtils.buildOptimisticReportPreview(oneOnOneChatReport.reportID, oneOnOneIOUReport.reportID);
648+
if (oneOnOneReportPreviewAction) {
649+
oneOnOneReportPreviewAction.created = DateUtils.getDBTime();
650+
const message = ReportUtils.getReportPreviewMessage(oneOnOneIOUReport, oneOnOneReportPreviewAction);
651+
oneOnOneReportPreviewAction.message[0].html = message;
652+
oneOnOneReportPreviewAction.message[0].text = message;
653+
} else {
654+
oneOnOneReportPreviewAction = ReportUtils.buildOptimisticReportPreview(oneOnOneChatReport, oneOnOneIOUReport);
657655
}
658656

659657
// STEP 5: Build Onyx Data
@@ -668,7 +666,6 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
668666
oneOnOneReportPreviewAction,
669667
isNewOneOnOneChatReport,
670668
isNewOneOnOneIOUReport,
671-
isNewOneOnOneReportPreviewAction,
672669
);
673670

674671
const splitData = {
@@ -944,14 +941,16 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
944941
true,
945942
);
946943

944+
const reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport, optimisticIOUReport);
945+
947946
// First, add data that will be used in all cases
948947
const optimisticChatReportData = {
949948
onyxMethod: Onyx.METHOD.MERGE,
950949
key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
951950
value: {
952951
...chatReport,
953952
lastReadTime: DateUtils.getDBTime(),
954-
lastVisibleActionCreated: optimisticIOUReportAction.created,
953+
lastVisibleActionCreated: reportPreviewAction.created,
955954
},
956955
};
957956
const optimisticIOUReportData = {
@@ -963,7 +962,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
963962
lastMessageHtml: optimisticIOUReportAction.message[0].html,
964963
},
965964
};
966-
const optimisticReportActionsData = {
965+
const optimisticIOUReportActionsData = {
967966
onyxMethod: Onyx.METHOD.MERGE,
968967
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticIOUReport.reportID}`,
969968
value: {
@@ -973,6 +972,13 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
973972
},
974973
},
975974
};
975+
const optimisticChatReportActionsData = {
976+
onyxMethod: Onyx.METHOD.SET,
977+
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
978+
value: {
979+
[reportPreviewAction.reportActionID]: reportPreviewAction,
980+
},
981+
};
976982

977983
const successData = [
978984
{
@@ -989,6 +995,15 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
989995
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,
990996
value: {pendingAction: null},
991997
},
998+
{
999+
onyxMethod: Onyx.METHOD.MERGE,
1000+
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
1001+
value: {
1002+
[reportPreviewAction.reportActionID]: {
1003+
pendingAction: null,
1004+
},
1005+
},
1006+
},
9921007
];
9931008

9941009
const failureData = [
@@ -1008,7 +1023,6 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
10081023
// Change the method to set for new reports because it doesn't exist yet, is faster,
10091024
// and we need the data to be available when we navigate to the chat page
10101025
optimisticChatReportData.onyxMethod = Onyx.METHOD.SET;
1011-
optimisticReportActionsData.onyxMethod = Onyx.METHOD.SET;
10121026
optimisticIOUReportData.onyxMethod = Onyx.METHOD.SET;
10131027

10141028
// Set and clear pending fields on the chat report
@@ -1053,8 +1067,8 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
10531067
},
10541068
};
10551069

1056-
// Add an optimistic created action to the optimistic reportActions data
1057-
optimisticReportActionsData.value[optimisticCreatedAction.reportActionID] = optimisticCreatedAction;
1070+
// Add an optimistic created action to the optimistic chat reportActions data
1071+
optimisticChatReportActionsData.value[optimisticCreatedAction.reportActionID] = optimisticCreatedAction;
10581072
} else {
10591073
failureData.push({
10601074
onyxMethod: Onyx.METHOD.MERGE,
@@ -1067,7 +1081,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
10671081
});
10681082
}
10691083

1070-
const optimisticData = [optimisticChatReportData, optimisticIOUReportData, optimisticReportActionsData, optimisticTransactionData];
1084+
const optimisticData = [optimisticChatReportData, optimisticIOUReportData, optimisticChatReportActionsData, optimisticIOUReportActionsData, optimisticTransactionData];
10711085
if (!_.isEmpty(optimisticPersonalDetailListData)) {
10721086
optimisticData.push(optimisticPersonalDetailListData);
10731087
}
@@ -1081,6 +1095,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
10811095
transactionID: optimisticTransaction.transactionID,
10821096
newIOUReportDetails,
10831097
createdReportActionID: isNewChat ? optimisticCreatedAction.reportActionID : 0,
1098+
reportPreviewReportActionID: reportPreviewAction.reportActionID,
10841099
},
10851100
optimisticData,
10861101
successData,
@@ -1115,6 +1130,12 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
11151130
login: recipient.login,
11161131
};
11171132

1133+
const optimisticReportPreviewAction = ReportActionsUtils.getReportPreviewAction(chatReport.reportID, iouReport.reportID);
1134+
optimisticReportPreviewAction.created = DateUtils.getDBTime();
1135+
const message = ReportUtils.getReportPreviewMessage(iouReport, optimisticReportPreviewAction);
1136+
optimisticReportPreviewAction.message[0].html = message;
1137+
optimisticReportPreviewAction.message[0].text = message;
1138+
11181139
const optimisticData = [
11191140
{
11201141
onyxMethod: Onyx.METHOD.MERGE,
@@ -1139,6 +1160,13 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
11391160
},
11401161
},
11411162
},
1163+
{
1164+
onyxMethod: Onyx.METHOD.MERGE,
1165+
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
1166+
value: {
1167+
[optimisticReportPreviewAction.reportActionID]: optimisticReportPreviewAction,
1168+
},
1169+
},
11421170
{
11431171
onyxMethod: Onyx.METHOD.MERGE,
11441172
key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
@@ -1196,6 +1224,15 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
11961224
},
11971225
},
11981226
},
1227+
{
1228+
onyxMethod: Onyx.METHOD.MERGE,
1229+
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
1230+
value: {
1231+
[optimisticReportPreviewAction.reportActionID]: {
1232+
created: optimisticReportPreviewAction.created,
1233+
},
1234+
},
1235+
},
11991236
{
12001237
onyxMethod: Onyx.METHOD.MERGE,
12011238
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,

0 commit comments

Comments
 (0)