Skip to content

Commit

Permalink
Merge pull request #21578 from Expensify/cristi_optimistic-report-pre…
Browse files Browse the repository at this point in the history 
…view

Optimistic report previews
  • Loading branch information
@Julesssss
Julesssss authored Jul 11, 2023
2 parents e299de5 + c379a5c commit 38890e2
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 39 deletions.
25 changes: 13 additions & 12 deletions src/libs/ReportUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1081,10 +1081,10 @@ function getTransactionReportName(reportAction) {
* Get money request message for an IOU report
*
* @param {Object} report
* @param {Object} reportAction
* @param {Object} [reportAction={}]
* @returns {String}
*/
function getReportPreviewMessage(report, reportAction) {
function getReportPreviewMessage(report, reportAction = {}) {
const reportActionMessage = lodashGet(reportAction, 'message[0].html', '');

if (_.isEmpty(report) || !report.reportID) {
Expand Down Expand Up @@ -1561,26 +1561,27 @@ function buildOptimisticIOUReportAction(type, amount, currency, comment, partici
};
}

function buildOptimisticReportPreview(reportID, iouReportID, payeeAccountID) {
function buildOptimisticReportPreview(chatReport, iouReport) {
const message = getReportPreviewMessage(iouReport);
return {
reportActionID: NumberUtils.rand64(),
reportID,
created: DateUtils.getDBTime(),
reportID: chatReport.reportID,
actionName: CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW,
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
accountID: payeeAccountID,
originalMessage: {
linkedReportID: iouReport.reportID,
},
message: [
{
html: '',
text: '',
html: message,
text: message,
isEdited: false,
type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
},
],
originalMessage: {
linkedReportID: iouReportID,
},
actorAccountID: currentUserAccountID,
created: DateUtils.getDBTime(),
accountID: iouReport.managerID || 0,
actorAccountID: iouReport.managerID || 0,
};
}

Expand Down
91 changes: 64 additions & 27 deletions src/libs/actions/IOU.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ function buildOnyxDataForMoneyRequest(
reportPreviewAction,
isNewChatReport,
isNewIOUReport,
isNewReportPreviewAction,
) {
const optimisticData = [
{
Expand Down Expand Up @@ -124,9 +123,7 @@ function buildOnyxDataForMoneyRequest(
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
value: {
...(isNewChatReport ? {[chatCreatedAction.reportActionID]: chatCreatedAction} : {}),
[reportPreviewAction.reportActionID]: {
...(isNewReportPreviewAction ? reportPreviewAction : {created: DateUtils.getDBTime()}),
},
[reportPreviewAction.reportActionID]: reportPreviewAction,
},
},
{
Expand Down Expand Up @@ -189,13 +186,9 @@ function buildOnyxDataForMoneyRequest(
},
}
: {}),
...(isNewReportPreviewAction
? {
[reportPreviewAction.reportActionID]: {
pendingAction: null,
},
}
: {}),
[reportPreviewAction.reportActionID]: {
pendingAction: null,
},
},
},
{
Expand Down Expand Up @@ -387,11 +380,14 @@ function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, part
},
};

let isNewReportPreviewAction = false;
let reportPreviewAction = isNewIOUReport ? null : ReportActionsUtils.getReportPreviewAction(chatReport.reportID, iouReport.reportID);
if (!reportPreviewAction) {
isNewReportPreviewAction = true;
reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport.reportID, iouReport.reportID);
if (reportPreviewAction) {
reportPreviewAction.created = DateUtils.getDBTime();
const message = ReportUtils.getReportPreviewMessage(iouReport, reportPreviewAction);
reportPreviewAction.message[0].html = message;
reportPreviewAction.message[0].text = message;
} else {
reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport, iouReport);
}

// STEP 5: Build Onyx Data
Expand All @@ -406,7 +402,6 @@ function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, part
reportPreviewAction,
isNewChatReport,
isNewIOUReport,
isNewReportPreviewAction,
);

// STEP 6: Make the request
Expand Down Expand Up @@ -649,11 +644,14 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
},
};

let isNewOneOnOneReportPreviewAction = false;
let oneOnOneReportPreviewAction = ReportActionsUtils.getReportPreviewAction(oneOnOneChatReport.reportID, oneOnOneIOUReport.reportID);
if (!oneOnOneReportPreviewAction) {
isNewOneOnOneReportPreviewAction = true;
oneOnOneReportPreviewAction = ReportUtils.buildOptimisticReportPreview(oneOnOneChatReport.reportID, oneOnOneIOUReport.reportID);
if (oneOnOneReportPreviewAction) {
oneOnOneReportPreviewAction.created = DateUtils.getDBTime();
const message = ReportUtils.getReportPreviewMessage(oneOnOneIOUReport, oneOnOneReportPreviewAction);
oneOnOneReportPreviewAction.message[0].html = message;
oneOnOneReportPreviewAction.message[0].text = message;
} else {
oneOnOneReportPreviewAction = ReportUtils.buildOptimisticReportPreview(oneOnOneChatReport, oneOnOneIOUReport);
}

// STEP 5: Build Onyx Data
Expand All @@ -668,7 +666,6 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
oneOnOneReportPreviewAction,
isNewOneOnOneChatReport,
isNewOneOnOneIOUReport,
isNewOneOnOneReportPreviewAction,
);

const splitData = {
Expand Down Expand Up @@ -944,14 +941,16 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
true,
);

const reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport, optimisticIOUReport);

// First, add data that will be used in all cases
const optimisticChatReportData = {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
value: {
...chatReport,
lastReadTime: DateUtils.getDBTime(),
lastVisibleActionCreated: optimisticIOUReportAction.created,
lastVisibleActionCreated: reportPreviewAction.created,
},
};
const optimisticIOUReportData = {
Expand All @@ -963,7 +962,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
lastMessageHtml: optimisticIOUReportAction.message[0].html,
},
};
const optimisticReportActionsData = {
const optimisticIOUReportActionsData = {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticIOUReport.reportID}`,
value: {
Expand All @@ -973,6 +972,13 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
},
},
};
const optimisticChatReportActionsData = {
onyxMethod: Onyx.METHOD.SET,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
value: {
[reportPreviewAction.reportActionID]: reportPreviewAction,
},
};

const successData = [
{
Expand All @@ -989,6 +995,15 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,
value: {pendingAction: null},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
value: {
[reportPreviewAction.reportActionID]: {
pendingAction: null,
},
},
},
];

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

// Set and clear pending fields on the chat report
Expand Down Expand Up @@ -1053,8 +1067,8 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
},
};

// Add an optimistic created action to the optimistic reportActions data
optimisticReportActionsData.value[optimisticCreatedAction.reportActionID] = optimisticCreatedAction;
// Add an optimistic created action to the optimistic chat reportActions data
optimisticChatReportActionsData.value[optimisticCreatedAction.reportActionID] = optimisticCreatedAction;
} else {
failureData.push({
onyxMethod: Onyx.METHOD.MERGE,
Expand All @@ -1067,7 +1081,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
});
}

const optimisticData = [optimisticChatReportData, optimisticIOUReportData, optimisticReportActionsData, optimisticTransactionData];
const optimisticData = [optimisticChatReportData, optimisticIOUReportData, optimisticChatReportActionsData, optimisticIOUReportActionsData, optimisticTransactionData];
if (!_.isEmpty(optimisticPersonalDetailListData)) {
optimisticData.push(optimisticPersonalDetailListData);
}
Expand All @@ -1081,6 +1095,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
transactionID: optimisticTransaction.transactionID,
newIOUReportDetails,
createdReportActionID: isNewChat ? optimisticCreatedAction.reportActionID : 0,
reportPreviewReportActionID: reportPreviewAction.reportActionID,
},
optimisticData,
successData,
Expand Down Expand Up @@ -1115,6 +1130,12 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
login: recipient.login,
};

const optimisticReportPreviewAction = ReportActionsUtils.getReportPreviewAction(chatReport.reportID, iouReport.reportID);
optimisticReportPreviewAction.created = DateUtils.getDBTime();
const message = ReportUtils.getReportPreviewMessage(iouReport, optimisticReportPreviewAction);
optimisticReportPreviewAction.message[0].html = message;
optimisticReportPreviewAction.message[0].text = message;

const optimisticData = [
{
onyxMethod: Onyx.METHOD.MERGE,
Expand All @@ -1139,6 +1160,13 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
},
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
value: {
[optimisticReportPreviewAction.reportActionID]: optimisticReportPreviewAction,
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
Expand Down Expand Up @@ -1196,6 +1224,15 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
},
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
value: {
[optimisticReportPreviewAction.reportActionID]: {
created: optimisticReportPreviewAction.created,
},
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,
Expand Down

0 comments on commit 38890e2

Please sign in to comment.